2012-11-09 62 views
0

我使用优秀的Cycle2插件在我的网站上运行幻灯片,看到这里:http://new.element17.com重新初始化幻灯片与新的幻灯片从PHP通过jQuery

<?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设置像这样:

幻灯片被指定为循环2,像这样一个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}); 
}); 

我一直在抓我的头一两天,现在如何让HTML新滑入该slideshow.html()方法。现在发生的是,由于设置了Cookie,当您单击某个相册然后刷新该页面时,新相册将加载。我想也许有这种方法重新加载页面本身(我不知道这是可能的),但这似乎真的不雅。

有没有什么办法让我的代码幻灯片生成基本上重新运行?我也想过提前生成所有专辑的所有幻灯片,并将它们填入变量名称的变量中(我知道大多数人讨厌它们,但我喜欢PHP中变量变量的概念),但我仍然无法从PHP代码跳跃到jQuery。

有人可以帮我吗?

+0

你能解释一下什么是真正的问题,现在呢? – Amit

+0

什么不清楚我已经发布了什么?我无法弄清楚如何做到这一点。 – NaOH

+0

据我所认为的问题是,您需要找出一种方法来确保相同的专辑加载为用户点击。这可能发生的原因可能是该cookie不可用于PHP脚本。如果cookie路径与PHP脚本路径不相同,则这是可能的。 – Amit

回答

1

我下载从您的网站的所有内容,并把它纳入一个index.php文件,你给PHP代码,

我所有的照片数据分配给一个PHP变量,然后传递到一个解决您的问题全球JS变量由第一个JSON编码它。

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

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

这里是我的索引。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}); 
    }); 
+0

这太棒了!你的演示完全符合我的需求。当我回家并尝试实施您的解决方案时,我会进一步观察。非常感谢你! – NaOH

+0

没问题,我喜欢处理你的代码 –

1

这听起来像你想要做的是使用AJAX请求到一个PHP脚本,它可以发回相册的信息。唯一的方法是将所有相册信息预先生成并发送到页面,然后使用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和您的脚本。

+0

你能告诉我一些示例代码吗? – NaOH

+0

@NaOH我用一些代码更新了答案。 –