2012-11-09 126 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我用一些代碼更新了答案。 –