[英]Re-initialize slideshow with new slides from PHP via jQuery
我正在使用優秀的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});
});
我現在已經開始討論如何將新幻燈片的HTML放到該slideshow.html()
方法中一兩天了。 現在發生的情況是,由於設置了cookie,當您點擊相冊然后刷新頁面時,新相冊會加載。 我想過可能有這個方法重新加載頁面本身(我還不知道這是否可能),但這看起來真的很不優雅。
有沒有什么方法可以讓幻燈片生成的代碼基本上重新運行?
我還考慮過提前生成所有專輯的所有幻燈片,並將它們填充到變量名稱的變量中(我知道大多數人討厭它們,但我喜歡PHP中變量變量的概念),但我仍然可以'從PHP代碼跳轉到jQuery。
有人可以幫我嗎?
聽起來你想要做的是使用一個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和腳本。
我從您的網站下載了所有內容,並將其合並到index.php文件中,並附帶您給定的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¹⁷ 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});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.