Fancybox - Ajax Image Gallery

问题

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?

回答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.

回答2:

I have posted some useful links of FancyBox in my answers here. Please check them.

If you don't find it useful, please correct me.

Meanwhile, if there is any issue with the implementation, please post code.

Thank you.

回答3:

Just added $("#profileGallery .vehiclePictures:first").click() at the end of prepGallery(). So after your AJAX call, it will automatically "click" the photo.

来源：https://stackoverflow.com/questions/4999390/fancybox-ajax-image-gallery

标签

javascript

ajax

jquery

fancybox