Fancybox - Ajax Image Gallery

Question

I have a custom image gallery which populates a div with thumbnails, each contained in a fancybox group.

When you click one (it opens in fancybox) and you can press Prev/Next to cycle between images on the first "page". To move between pages, you have to close fancybox and change pages then open a new thumbnail. This new set of photos is retrieved via ajax.

To show you exactly what I'm talking about, http://www.speedcountry.com/mSpeed323/Mazda_MAZDASPEED3

How can I use fancybox to switch pages and load the next set of images?

Answer 1

It doesn't appear there are any internal methods in FancyBox, so you'll have to modify the plugin. I took the liberty of making a minor change and posting a demo - in the demo, open any image in a FancyBox popup, then press Enter on the keyboard. It will load all of the images into the gallery and start from the first.

Modified line 887, then insert a line before 892:

$.fancybox.pos = function(pos, array) { // array parameter added
    if (busy) {
        return;
    }

    if (array) { currentArray = array; } // new line

So, basically add "array" as a function parameter, then add the if (array)... line.

To use it, just call the pos function while FancyBox is open. This is the code from the demo:

// pos( index of image, jQuery object of gallery objects )
$.fancybox.pos(0, $('#examples a[id]'));

*Note: Initially I just used $('a[id]') and it included the image that was inside fancy box.

---

Update: So like you said, you are loading in more images using ajax... I'm guessing you are just getting a list of image urls. Starting with a url, you will need to form and add these images to the page in a hidden area:

<div id="ajax-loaded" style="display:none">
 <a href="#" title="image1 title"><img src="image1.jpg"></a>
 <a href="#" title="image2 title"><img src="image2.jpg"></a>
 ...
 <a href="#" title="imageN title"><img src="imageN.jpg"></a>
</div>

Then you can make an array of jquery objects $('#ajax-content img') to the $.fancybox.pos function as a second paramter, and start with the first image (the zero)

// ajax complete, add images to gallery
$.fancybox.pos( 0, $('#ajax-loaded a') );

Update #2: I wrapped the above HTML in links and the jQuery selector after I found that it is necessary if you want to include an image caption.