我使用優秀的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。
有人可以幫我嗎?
你能解釋一下什麼是真正的問題,現在呢? – Amit
什麼不清楚我已經發布了什麼?我無法弄清楚如何做到這一點。 – NaOH
據我所認爲的問題是,您需要找出一種方法來確保相同的專輯加載爲用戶點擊。這可能發生的原因可能是該cookie不可用於PHP腳本。如果cookie路徑與PHP腳本路徑不相同,則這是可能的。 – Amit