0

我正在使用出色的 Cycle2 插件在我的网站上运行幻灯片,请参见此处: http: //new.element17.com

幻灯片在为 Cycle2 指定的 div 中生成,如下所示:

<?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>';
        }
    }
?>

幻灯片的 div 设置如下:

<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>

还有一个专辑列表,生成如下:

<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>

当用户点击其中一张专辑时,会触发以下 jQuery:

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

slideshow.html()对于如何将新幻灯片的 HTML 获取到该方法中,我已经摸索了一两天了。现在发生的情况是,由于设置了 cookie,当您单击相册然后刷新页面时,会加载新相册。我想过也许让这种方法重新加载页面本身(我还不知道这是否可能),但这似乎真的很不雅。

有什么方法可以让幻灯片生成的代码基本上重新运行吗?

我还考虑过提前生成所有专辑的所有幻灯片,并将它们填充到带有变量名的变量中(我知道大多数人讨厌它们,但我喜欢 PHP 中变量变量的概念),但我仍然可以' t 实现从 PHP 代码到 jQuery 的飞跃。

有人可以帮我吗?

4

2 回答 2

1

听起来您想要做的是对 PHP 脚本使用 AJAX 请求,该脚本可以发回专辑的信息。唯一的另一种方法是预先生成所有专辑信息并将其发送到页面,然后使用 JavaScript 来决定哪些是在页面上实际可见的。

服务器上的 PHP 脚本(为了简洁起见中途开始):

<?php
    $directory = 'gallery/*';
    $subfolders = glob($directory);
    $albums = array();
    foreach($subfolders as $subfolder) {
        $album = explode('_'. $subfolder);
        $albumname = str_replace(' ','%20',$album[1]);
        array_push($albums, array('name' => $albumname, 'subfolder' => $subfolder));
    }
    echo json_encode($albums);
?>

客户端中的 JavaScript:

$('.togglealbum').on('click',function() {
    $.ajax("my_uri", { dataType : "json", success: function(data, textStatus, jqXHR) {
        var slideshow = $('#slideshow');
        var html = "";
        for (var i = 0; i < data.length; i++) {
            html += "<a href='#' class="fadein togglealbum" id='" + data[i].subfolder + "'>" + data[i].name + "</a>";
        }
        slideshow.cycle('destroy');
        slideshow.html(html);
        slideshow.cycle();
    } });    

});

显然根据您的需要调整输出 HTML 和您的脚本。

于 2012-11-11T05:56:12.850 回答
1

我从您的网站下载了所有内容,并使用您给定的 PHP 代码将其合并到 index.php 文件中,

我通过将所有照片数据分配给一个 php 变量,然后通过首先对其进行 JSON 编码将其传递给一个全局 JS 变量来解决您的问题。

http://w3egitim.com/stack/在这里您可以查看。

有一些错误,但我认为那是因为我不完全理解你所有的 jquery 插件是如何工作的。

这是我的 index.php 和一些评论

    <?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>

然后你的 main.js 需要进行以下更改,你去弄清楚

$('.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});
    });
于 2012-11-13T16:08:28.107 回答