我一直在使用以下脚本，我试图修改它以从我的 mysql 数据库中提取图像详细信息。它似乎可以正常工作，并加载所有专辑以及专辑缩略图和标题，当我单击专辑缩略图时，它会从图库中加载第一张图片，但之后就没有了，我只能看到下一张图片图标.
这是原始脚本： http ://tympanus.net/codrops/2010/06/27/beautiful-photo-stack-gallery-with-jquery-and-css3/
Iv 修改了这部分代码以从数据库中提取专辑：
<div id="ps_slider" class="ps_slider">
<a class="prev disabled"></a>
<a class="next disabled"></a>
<div id="ps_albums">
<?php
include("../connect.php");
$sql = <<<SQL
SELECT *
FROM `albums`
WHERE isalbum='yes'
SQL;
if(!$result = $db->query($sql)){
die('There was an error running the query [' . $db->error . ']');
}
while($row = $result->fetch_assoc()){
echo '<div id="'.$row['albumid'].'" class="ps_album" style="opacity:0;"><img src="../albums/'.$row['albumid'].'/albumthumbnail/'.$row['albumthumbnail'].'" alt=""/><div class="ps_desc"><h2>'.$row['albumname'].'</h2><span></span></div></div>';
}
?>
</div>
</div>
这部分代码应该加载下一张图片：
/**
* when we click on an album,
* we load with AJAX the list of pictures for that album.
* we randomly rotate them except the last one, which is
* the one the User sees first. We also resize and center each image.
*/
$ps_albums.children('div').bind('click',function(){
var $elem = $(this);
var album_name = $(this).attr('id');
var $loading = $('<div />',{className:'loading'});
$elem.append($loading);
$ps_container.find('img').remove();
$.get('photostack.php', {album_name:album_name} , function(data) {
var items_count = data.length;
for(var i = 0; i < items_count; ++i){
var item_source = data[i];
var cnt = 0;
$('<img />').load(function(){
var $image = $(this);
++cnt;
resizeCenterImage($image);
$ps_container.append($image);
var r = Math.floor(Math.random()*41)-20;
if(cnt < items_count){
$image.css({
'-moz-transform' :'rotate('+r+'deg)',
'-webkit-transform' :'rotate('+r+'deg)',
'transform' :'rotate('+r+'deg)'
});
}
if(cnt == items_count){
$loading.remove();
$ps_container.show();
$ps_close.show();
$ps_overlay.show();
}
}).attr('src',item_source);
}
},'json');
});
在 photostack.php 中，我已将其更改为以下内容：
<?php
$location = '../albums';
$location2 = '800x600';
$album_name = $_GET['album_name'];
$files = glob($location . '/' . $album_name . '/' . $location2 . '/*. {jpg,gif,png}', GLOB_BRACE);
$encoded = json_encode($files);
echo $encoded;
unset($encoded);
因此，出于某种原因，它只从相册文件夹中提取第一张照片，而不是全部？
在 Chrome 控制台中，我得到：
photostack.php?album_name=67016ce16a /twinfocus/gallery GET 200 OK text/html jquery.min.js:130 脚本 273 B 51 B 10 ms 10 ms 10 ms0 loading.gif /twinfocus/gallery/images GET 200 OK image/gif jquery.min.js:103 脚本（来自缓存） Pending 00 01774fa806.jpg /twinfocus/albums/67016ce16a/800x600 GET 200 OK image/jpeg jquery.min.js:48 脚本（来自缓存） Pending 00 next_photo.png /twinfocus /gallery/images GET 200 OK image/png jquery.min.js:118 脚本（来自缓存） Pending 00
如果我单击 next_photo.png 最后一张照片飞走，但没有新的照片进来，控制台中也不会记录更多的脚本活动。