0

jqueryを使用してfancyboxを使用してカスタムギャラリーを作成していますが、問題が発生しています。ユーザーが次/前のボタンをクリックするたびに、私はjavascriptメソッドを呼び出しています。これにより、写真に関するすべての詳細が取得され、動的に表示されます。しかし、現在の方法では、画像の無限ループを実現することはできません。

たとえば、10枚の画像があり、ユーザーが10枚目の画像の後に次をクリックすると、最初の画像に移動し、前のボタンについてもこのようにループが続行されます。私はできる限りのことを試みましたが、それを理解することができませんでした。私のコードは

photoArrayは、ギャラリーに表示するすべての写真の情報で構成されるJSON配列です。

function showNextPrevious(value) {
    var presentPhotoId = $('#presentId').val();
    var length = photoArray.length;
    if(value == "next") {
        for(var i=0; i<photoArray.length; i++) {
            if(i!=length-1) {               
                var id = photoArray[i].photo_id;
                if(id == presentPhotoId) {      
                    var tags = (typeof photoArray[i+1].tags!= "undefined")?photoArray[i+1].tags:"";

                    var caption = photoArray[i+1].caption;
                    var source = photoArray[i+1].owner;
                    var mainPhoto = photoArray[i+1].main_photo;
                    var photoId = photoArray[i+1].photo_id;
                    var path = photoArray[i+1].path;
                    var mediumpath = replaceAll(path,".jpg", "_medium.jpg");
                    var ownerlink = photoArray[i+1].source_link;
                    var owner = photoArray[i+1].owner;

                    $('#tag').text(tags);
                    $('#caption').text(caption);
                    $("#photoCount").text(((i+1)+1)+"/"+photoArray.length);
                    $('#presentId').val(photoId);
                    $('#owner').text(owner);
                    $('#mainphoto').attr("src" , mediumpath);
                    if(owner!='NULL' || owner.length>0) {
                        $('#ownerlink').attr("href" , "http://flickr.com/search/people/?q="+owner);
                        $('#ownerlink').attr("target" , "_blank");
                    } else {
                        $('#ownerlink').attr("href" , "javascript:void('0')");
                        $('#ownerlink').attr("target" , "_self");
                    }

                    if(mainPhoto == "Yes"){
                        $('#mainP').html('<div style="display:block;color:#000000;">Currently the main photo for this city.</div>');
                    } else {
                        $('#mainP').html('<div style="display:block;"><input name="" type="button" class="button-small" value="Make this the main photo for this city" onclick="javascript:changeMainPhoto(\''+photoArray[i+1].photo_id+'\','+photoArray[i+1].city+')" /></div>');
                    }                   
                } // End of if(id == presentPhotoId)
            } 
        }
    } else if(value == "previous") {
        for(var i = 0;i<photoArray.length;i++){
            var id = photoArray[i].photo_id;            
            if(id == presentPhotoId){
                var tags = (typeof photoArray[i-1].tags!="undefined")?photoArray[i-1].tags:"";
                var caption = photoArray[i-1].caption;
                var source = photoArray[i-1].owner;
                var mainPhoto = photoArray[i-1].main_photo;
                var photoId = photoArray[i-1].photo_id;
                var path = photoArray[i-1].path;
                var mediumpath = replaceAll(path,".jpg", "_medium.jpg");
                var ownerlink = photoArray[i-1].source_link;
                var owner = photoArray[i-1].owner;

                $('#tag').text(tags);
                $('#caption').text(caption);
                $('#presentId').val(photoId);
                $('#owner').text(owner);
                $("#photoCount").text(((i-1)+1)+"/"+photoArray.length);
                $('#mainphoto').attr("src" , mediumpath);
                if(owner!='NULL' || owner.length>0) {
                    $('#ownerlink').attr("href" , "http://flickr.com/search/people/?q="+owner);
                    $('#ownerlink').attr("target" , "_blank");
                } else {
                    $('#ownerlink').attr("href" , "javascript:void(0)");
                    $('#ownerlink').attr("target" , "_self");
                }       
                if(mainPhoto == "Yes") {
                    $('#mainP').html('<div style="display:block;">Currently the main photo for this city.</div>');
                } else {
                    $('#mainP').html('<div style="display:block;"><input name="" type="button" class="button-small" value="Make this the main photo for this city" onclick="javascript:changeMainPhoto(\''+photoArray[i-1].photo_id+'\','+photoArray[i-1].city+')" /></div>');
                }
            }
        }
    }
}
4

1 に答える 1

0

無限ループをシミュレートすることが目標である場合は、次のいずれかを実行することをお勧めします。

  1. 配列の最後の要素に到達したら、最初の画像を「開始位置」に「戻す」（つまり、配列の最初から削除して最後に追加する）
  2. 最初の画像を複製し、最後の要素に到達したら配列の最後に追加します（これにより、fancyboxの動作によってはパフォーマンスの問題が発生する可能性があります-すでに表示されている要素が実際にDOMから削除されるかどうかはわかりませんそれらはもう表示されません）
  3. 1と2の両方を組み合わせて（そして、fancyboxがすでに表示されている要素を削除しない場合のパフォーマンスの心配を効果的に排除します-おそらく削除されません）、最初の要素を複製し、それを配列の最後に追加して、それまで待つアレイから削除するために表示されなくなりました。

オプション3を選択することをお勧めします。これは安全性が最も高く、繰り返す前にスライダー全体を埋めるのに十分な要素がないことを説明しています。スライドするときに最初の要素でメソッドを呼び出し.offset()（ステップ関数を使用できると思いますが、そうでない場合はタイマーが必要になる場合があります）、leftオフセットのプロパティの値を要素の幅に追加します。要素の現在の終了x座標を取得します。これをスライドコンテナの開始座標（わかっている場合は静的位置、またはleftコンテナのオフセットのプロパティ）と比較し、コンテナのオフセットが大きい場合は要素を削除します。

ご不明な点がある場合や説明が必要な場合はお知らせください。幸運を！:)

于 2012-10-26T15:02:19.087 に答える