1

私は次のスクリプトを使用しており、それを変更して 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 をクリックすると、最後の写真が表示されますが、新しい写真は表示されず、コンソールにスクリプト アクティビティも記録されません。

4

1 に答える 1

0

わかりました、私はこれを解決しました!、何らかの理由で、アルバム内の写真の拡張子は.jpgではなく.jpegだったので、その拡張子を取得するためにどこからダウンロードしたのかわかりません. とにかく、私は変わりました

$files      = glob($location . '/' . $album_name . '/' . $location2 . '/*.{jpg,gif,png}', GLOB_BRACE);

jpegを追加しました

$files      = glob($location . '/' . $album_name . '/' . $location2 . '/*.{jpg,gif,png,jpeg}', GLOB_BRACE);

そして今、それは完全に機能します!.

于 2013-08-01T22:33:32.030 に答える