私は次のスクリプトを使用しており、それを変更して 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 Script 273 B 51 B 10 ms 10 ms 10 ms0 loading.gif /twinfocus/gallery/images GET 200 OK image/gif jquery.min.js:103 スクリプト (キャッシュから) 保留中 00 01774fa806.jpg /twinfocus/albums/67016ce16a/800x600 GET 200 OK image/jpeg jquery.min.js:48 スクリプト (キャッシュから) 保留中 00 next_photo.png /twinfocus /gallery/images GET 200 OK image/png jquery.min.js:118 スクリプト (キャッシュから) 保留中 00
next_photo.png をクリックすると、最後の写真が表示されますが、新しい写真は表示されず、コンソールにスクリプト アクティビティも記録されません。