Question

我正在使用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>');
                }
            }
        }
    }
}

Answer 1

如果您的目标是模拟无限循环，那么我建议您执行以下操作之一：

＆＃34;返回＆＃34;第一张图像到＆＃34;开始位置＆＃34; （换句话说，一旦到达数组中的最后一个元素，将其从数组的开头删除并将其添加到结尾）
复制第一张图片并在到达最后一个元素后将其添加到数组的末尾（这可能会导致性能问题，具体取决于fancybox的工作原理 - 我不知道它是否实际删除了已查看的元素来自DOM，一旦它们不再可见）
将1和2结合起来（并且如果fancybox没有删除已经查看过的元素 - 他们可能不会删除它们，有效地消除了对性能的担心），通过复制第一个元素，将其添加到结尾数组，然后等待，直到它不再可见，从阵列中删除它。

我建议您使用选项三 - 它具有最佳的安全性，并且它说明在重复之前没有足够的元素来填充整个滑块。想法是在第一个元素滑动时调用.offset()方法（我假设您可以使用步进函数 - 否则您可能需要一个计时器），然后添加left属性的值偏移到元素的宽度，以获得元素的当前结束x坐标。将其与滑动容器的起始坐标（静态位置，如果您知道它，或容器的left属性的偏移量）进行比较，并在容器的情况下删除元素。偏差更大。

如果您有任何疑问或需要澄清，请与我们联系。祝好运！：）

在图库中循环图像

1 个答案: