2

フォト ビューアーをゼロから作成していますが、いくつかの点を除いて正常に動作しています。

コードは次のようになります。

まず、現在のアルバムの ID を取得し、写真に属するすべての画像を印刷します。次に、ユーザーが写真をクリックすると、次のことが起こりました。

    var loaded = [];
    var albums = [];
        var album_id = ALBUM ID
    var cur_pic = 0;
    var alb_name = ''; 
    $('.photo').click(function(){
    var cover_photo = $(this).attr('id').replace("911","");


        albums[album_id] = [];

        $('#photo_preview .pleft').html('<img src="'+cover_photo+'"/>');
        $('#photo_preview').show();


    $.ajax({
        type: 'POST',
        url: "photo_ajax.php",
        dataType:'json',
        data: 'action=get_info' + $('#aid').val().replace("aid",""),    
        success: function(data){

        loaded[album_id] = true;
        albums[album_id] = data;

    $('#photo_preview .pleft').html('<img src="'+albums[album_id][0]['ImagePath']+'"/>'); // The first photo you click on, will be the first photo to see :)
       $('#photo_preview').show();

            }
        })
//  }       
});

// Loading images and make them visible in the popup...

function loadNextImage(album_id, step){
function loadNextImage(album_id, step){

var next_pic = 0;

        if(step == 0){

            next_pic = 0;

        }else if(step == 'next'){


            next_pic = parseInt(cur_pic, 10)+1;
            cur_pic = next_pic;

        if(next_pic >= albums[album_id].length){
                next_pic = 0;
            }

        }else{

            next_pic = parseInt(cur_pic, 10)-1;

            if(next_pic < 0){
                next_pic = albums[album_id].length - 1;
            }
        }
        cur_pic = next_pic;

        $('#photo_preview .pleft').html('<img src="'+albums[album_id][next_pic]['ImagePath']+'"/>');
    }


// Loading the next image in the JSON array...:

    $(".preview_next").click(function(){

        loadNextImage(album_id, 'next');

    });


// Loading the previous image in the JSON array...:

    $(".preview_prev").click(function(){

        loadNextImage(album_id, 'prev');

    });

photo_ajax.php で:

    $i = 0; $album = array();

    foreach( $aImageInfo as $row ){

            $album[$i] = array();

            $album[$i]['ImageID'] = $row['ImageID'];

            $album[$i]['ImagePath'] = $row['ImagePath'];

            $album[$i]['ImageDate'] = $row['ImageDate'];

            $album[$i]['ImageDescription'] = $row['ImageDescription'];

            $i++;
        }
        echo json_encode($album);

これは機能していますが、私の質問は次のとおりです。

  1. var cur_pic = 0; 0 に設定されています。これは、json 配列の最初の写真の表示を開始することを意味します。クリックしたばかりの写真の配列で魔女の番号を見つけて、その場所から表示およびカウントを開始できるように、修正する必要があります。

  2. これは現在、アルバム内でのみ機能しています。別のページに 1 枚の写真が表示されているとします。これを修正する方法-クリックすると-写真が表示され、json配列全体を取得し、クリックした写真と同じアルバムに属するすべての画像を参照できます。

ストレートな例。Facebook または Twitter と言ってください。あなたは壁に写真を持っています。それをクリックすると、アルバム全体をナビゲートできます。

の解き方？

4

1 に答える 1

1

今朝は少し戸惑いましたが、今では答えは明らかです。最初に行う必要があるのは、画像 ID を jquery 関数に送信して、画像ビューアーを開くことです。次に、AJAX 呼び出しから結果が返ってきたら、次のようにします。

for(var i = 0; i < albums[album_id].length; i++) {

    if(albums[album_id][i]['ImageID'] == imgId){

        var newStep = i;    
    }
}

次に、json 配列内の正しい位置を取得します。次に、これをフォローアップして、次のコードで表示可能な正しい写真を取得できます。

albums[album_id][newStep]['ImagePath']

写真がアルバムの外にあるときに同じ結果を取得したい場合-単一のページで。解決策はかなり明確になるはずです。アルバムのIDと写真のIDの両方を送ります。次に、同じ方法で AJAX を使用し、JSON 配列を取得します。

そして、ユーザーに写真を見せます。他の画像は配列内にあるため、ユーザーは他の画像を表示せずにアルバム内を移動できるようになりました。

少し余分。次のようなナビゲーション情報を取得するために: Photo 20 of 110, 私はこれをしました:

$('#PhotoViewerBottomBarContent').html(parseInt(cur_pic+1)+' of '+albums[album_id].length);

配列は常に 0 から始まるため、+1 が必要でした。

したがって、解決策は簡単でした:)

于 2012-07-14T15:13:53.853 に答える