優れたCycle2プラグインを使用して、自分のWebサイトでスライドショーを実行しています。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>
ユーザーがこれらのアルバムの1つをクリックすると、起動される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をそのメソッドに取り込む方法について、私は1、2日頭を悩ませてきましたslideshow.html()。現在、Cookieが設定されているため、アルバムをクリックしてからページを更新すると、新しいアルバムが読み込まれます。このメソッドでページ自体をリロードすることを考えましたが（それが可能かどうかはまだわかりません）、それは本当にエレガントではないようです。
スライド生成のコードを基本的に再実行する方法はありますか？
また、すべてのアルバムのすべてのスライドを事前に生成し、それらを変数名の変数に詰め込むことも考えました（ほとんどの人がそれらを嫌うことは知っていますが、PHPの変数変数の概念は大好きです）が、それでも可能です。 tPHPコードからjQueryに飛躍します。
誰かが私を助けることができますか？