Question

I am using jquery to create a custom gallery using fancybox and now i have a problem with that. Whenever user clicks the next/previous button, i am calling a javascript method, which will retrieve all the details about the photo and display it dynamically. But with the current method i am unable to achieve infinite looping of image.

For example, if we have 10 images, and when user clicks next after 10th image, it should go to first image and loop continues this way for previous button also. I have tried everything i can but i couldn’t figure it out. My code is

photoArray is a JSON Array which consists information of all the photos that i will display in gallery.

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

If your goal is to simulate an infinite loop, then I suggest that you either do one of the following:

1. “return” the first image to the “start position” (in other words, remove it from the start of the array and add it to the end) once you have reached the last element in the array
2. duplicate the first image and add it to the end of the array once you have reached the last element (this could cause a performance issue depending on how fancybox works – I don’t know if it actually removes already viewed elements from the DOM, once they are no longer visible)
3. combine both 1 and 2 (and effectively eliminate any worry about performance if fancybox doesn’t remove already viewed elements – which they likely don’t), by duplicating the first element, adding it to the end of the array, then waiting until it is no longer visible to remove it from the array.

I recommend you go with option three – it has the best safety and it accounts for you not having enough elements to fill the whole slider before repeating. The idea would be to call the .offset() method on the first element as it slides (I assume you can use a step function – otherwise you may need a timer), then add the value of the left property of the offset to the width of the element to get the current ending x-coordinate of the element. Compare that with the starting coordinate of the sliding container (either the static position, if you know it, or the left property of the container’s offset), and remove the element if the container’s offset is greater.

Let me know if you have any questions or need clarification. Good luck! 🙂