Question

I’m using the excellent Cycle2 plugin to run a slideshow on my website, seen here: http://new.element17.com.

Slides are generated inside a div designated for Cycle2 like so:

<?php
    if(isset($_COOKIE["currentalbum"])) {
        $currentalbum = $_COOKIE["currentalbum"];
    } else {
        $currentalbum = "gallery/01_New";
    }
    $photos = glob($currentalbum.'/*.[Jj][Pp][Gg]');
    $albumparts = explode('_', $currentalbum);
    switch (array_key_exists(2,$albumparts)) {
        case false:
            usort($photos,"cmpexiftime");
            break;
        case true:
            usort($photos,"cmpexiftimer");
            break;
    }
    foreach($photos as $photo){
        $title = basename($photo,".jpg");
        $exif = read_exif_data_raw("$photo",0);
        $desc = $exif["IFD0"]["ImageDescription"];
        $camera = ucwords(strtolower($exif["IFD0"]["Model"]));
        switch($exif["SubIFD"]["LensInfo"]) {
            case "105.0 mm f/2.8":
                $lens = "Micro-Nikkor 105mm f/2.8 VR";
                break;
            case "50.0 mm f/1.8":
                $lens = "Nikkor 50mm f/1.8D";
                break;
            case "17.0-50.0 mm f/2.8":
                $lens = "Tamron 17-50mm f/2.8 VC";
                break;
            case "70.0-300.0 mm f/4.5-5.6":
                $lens = "Nikkor 70-300mm f/4.5-5.6 VR";
                break;
            default:
                $lens = $exif["SubIFD"]["LensInfo"];
                break;
        }
        $length = str_replace(" ","",$exif["SubIFD"]["FocalLength"]);
        $shutter = str_replace(" ","",str_replace("ec","",$exif["SubIFD"]["ShutterSpeedValue"]));
        $aperture = $exif["SubIFD"]["ApertureValue"];
        $iso = $exif["SubIFD"]["ISOSpeedRatings"];
        list($width,$height) = getimagesize($photo);
        if ($height >= $width) {                            
            $photolist .= '<span data-title="'.$title.'" data-desc="'.$desc.'" data-camera="'.$camera.'" data-lens="'.$lens.'" data-length="'.$length.'" data-shutter="'.$shutter.'" data-aperture="'.$aperture.'" data-iso="'.$iso.'" style="background-image:url('.$photo.'); background-size:contain;" class="slide"></span>';
        } else {
            $photolist .= '<span data-title="'.$title.'" data-desc="'.$desc.'" data-camera="'.$camera.'" data-lens="'.$lens.'" data-length="'.$length.'" data-shutter="'.$shutter.'" data-aperture="'.$aperture.'" data-iso="'.$iso.'" style="background-image:url('.$photo.'); background-size:cover;" class="slide"></span>';
        }
    }
?>

The div for the slides is set up like this:

<div class="cycle-slideshow" data-cycle-slides="> span" data-cycle-timeout="10000" data-cycle-speed="1000" data-cycle-sync=false data-cycle-overlay-template="
    <div class='photo_title'>{{title}}</div>
    <div class='photo_desc'>{{desc}}</div>
    <div class='exif'>{{camera}}, {{lens}} @ {{length}}, {{shutter}}, {{aperture}}, ISO {{iso}}
    </div>
    <img src='images/close_pane.png' class='fadein close_pane button toggleinfo' alt='Close Info Pane'>" data-cycle-prev="#prev" data-cycle-next="#next" id="slideshow">
    <div class="cycle-overlay custom info"></div>
    <?php echo $photolist; ?>
</div>

There is also a list of albums, generated like so:

<div class="toggleblock pane" id="albums">
<?php
    $directory = 'gallery/*';
    $subfolders = glob($directory);
    foreach($subfolders as $subfolder) {
        $album = explode('_'. $subfolder);
        $albumname = str_replace(' ','%20',$album[1]);
        echo '<a href="#" class="fadein togglealbum" id="',$subfolder,'">',$albumname,'</a>';
    }
?>
<img src="images/close_pane.png" class="togglelink fadein close_pane button" data-block="albums" alt="Close Album List">
</div>

When a user clicks on one of these albums, here is the jQuery that is fired:

$('.togglealbum').on('click',function() {       
    var slideshow = $('#slideshow');
    slideshow.cycle('destroy');
    slideshow.html("HTML GOES HERE");
    slideshow.cycle();
    $.cookie("currentalbum",(this).id,{expires:7});
});

I’ve been scratching my head for a day or two now on how to get the HTML for the new slides into that slideshow.html() method. Right now what happens is, because of the cookies being set, when you click on an album and then refresh the page, the new album loads. I thought about maybe having this method reload the page itself (I don’t yet know if that’s possible) but that seems really inelegant.

Is there some way I get the code for slide generation to basically re-run?

I’ve also thought about having all slides for all albums generated ahead of time, and stuffing them into variables with variable names (I know most people hate them, but I love the concept of variable variables in PHP), but I still can’t make the leap from the PHP code into jQuery.

Can someone help me out?

Answer 1

I downloaded all content from your website and incorporated it into a index.php file, with your given PHP code,

I solved your problem by assigning all photo data to a php variable and then passing it into a global JS variable by first JSON encoding it.

http://w3egitim.com/stack/ here you can check it out.

There are some errors but I think that’s because I dont fully understand how all your jquery plugins work out.

here is my index.php and some comments

    <?php
    ini_set("display_errors", true);
    error_reporting(E_ALL);

    include "exif.inc.php"; //I included this for read_exif_data_raw function was undefined

    if(isset($_COOKIE["currentalbum"])) {
            $currentalbum = $_COOKIE["currentalbum"];
    } else {
        $currentalbum = "gallery/01_New";
    }

    $photolist = getPhotoList($currentalbum); //get photolist data from a function


    //normal flow breaks here
    //we get all photollists for all album lists
    $allList = array();
    $directory = 'gallery/*';
    $subfolders = glob($directory);
    foreach($subfolders as $subfolder) {
        $album = explode('_', $subfolder);
        $albumname = str_replace(' ','%20',$album[1]);
        $allList[$subfolder] = getPhotoList($subfolder); //get photolist for each of the albums
    }

    $allList = json_encode($allList); //json encode them

  // I encapsulated your photo list code into a function for reusability
    function getPhotoList($currentalbum){
        $photos = glob($currentalbum.'/*.[Jj][Pp][Gg]');
        $albumparts = explode('_', $currentalbum);
        switch (array_key_exists(2,$albumparts)) {
            case false:
                usort($photos,"cmpexiftime");
                break;
            case true:
                usort($photos,"cmpexiftimer");
                break;
        }
        $photolist = "";
        foreach($photos as $photo){
            $title = basename($photo,".jpg");
            $exif = read_exif_data_raw("$photo",0);

            $desc = @$exif["IFD0"]["ImageDescription"];
            $camera = ucwords(strtolower(@$exif["IFD0"]["Model"]));
            switch(@$exif["SubIFD"]["LensInfo"]) {
                case "105.0 mm f/2.8":
                    $lens = "Micro-Nikkor 105mm f/2.8 VR";
                    break;
                case "50.0 mm f/1.8":
                    $lens = "Nikkor 50mm f/1.8D";
                    break;
                case "17.0-50.0 mm f/2.8":
                    $lens = "Tamron 17-50mm f/2.8 VC";
                    break;
                case "70.0-300.0 mm f/4.5-5.6":
                    $lens = "Nikkor 70-300mm f/4.5-5.6 VR";
                    break;
                default:
                    $lens = @$exif["SubIFD"]["LensInfo"];
                    break;
            }
            $length = str_replace(" ","",$exif["SubIFD"]["FocalLength"]);
            $shutter = str_replace(" ","",str_replace("ec","",$exif["SubIFD"]["ShutterSpeedValue"]));
            $aperture = $exif["SubIFD"]["ApertureValue"];
            $iso = $exif["SubIFD"]["ISOSpeedRatings"];
            list($width,$height) = getimagesize($photo);

            if ($height >= $width) {                            
                $photolist .= '<span data-title="'.$title.'" data-desc="'.$desc.'" data-camera="'.$camera.'" data-lens="'.$lens.'" data-length="'.$length.'" data-shutter="'.$shutter.'" data-aperture="'.$aperture.'" data-iso="'.$iso.'" style="background-image:url('.$photo.'); background-size:contain;" class="slide"></span>';
            } else {
                $photolist .= '<span data-title="'.$title.'" data-desc="'.$desc.'" data-camera="'.$camera.'" data-lens="'.$lens.'" data-length="'.$length.'" data-shutter="'.$shutter.'" data-aperture="'.$aperture.'" data-iso="'.$iso.'" style="background-image:url('.$photo.'); background-size:cover;" class="slide"></span>';
            }
        }

        return $photolist;
    }

    function cmpexiftime($a, $b) { 
        $exif1 = exif_read_data($a, 0, true); 
        $exif2 = exif_read_data($b, 0, true); 

        if ($exif1["EXIF"]["DateTimeOriginal"]==$exif2["EXIF"]["DateTimeOriginal"]) { 
         return 0; 
         } 
         return $exif1["EXIF"]["DateTimeOriginal"] < $exif2["EXIF"]["DateTimeOriginal"] ? -1 : 1; 
        } 
    ?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Element&#185;&#8311; Photography</title>
        <link rel="stylesheet" href="css/main.css" />
        <script src="js/jquery-1.8.0.min.js"></script>
        <script src="js/jquery.cycle2.min.js"></script>
        <script src="js/jquery.cokie.js"></script>
        <script src="js/main.js"></script>
        <script type="text/javascript">
                        //here I just echo json encoded string to JS, you should use a more secure JSON decode library for javascript
            var all_photo_data = <?php echo $allList;?>;

        </script>
    </head>
    <body>

Then your main.js needs following changes you go figure it out

$('.togglealbum').on('click',function() {       
        var slideshow = $('#slideshow');
        slideshow.cycle('destroy');
        slideshow.html(all_photo_data[(this).id]);
        slideshow.cycle();
        $.cookie("currentalbum",(this).id,{expires:7});
    });