Geek Answers Handbook

Fancybox - Ajax Image Gallery

I have a custom image gallery that fills a div using thumbnails, each of which is contained in a fancybox group.

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

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

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

+5
source share
3 answers

There are no built-in methods in FancyBox, so you have to modify the plugin. I took the liberty of making minor changes and posting the demo in a demo, open any image in the FancyBox popup window, and then press Enter on the keyboard. He will upload all the images to the gallery and start from the first.

Modified line 887, then insert line up to 892:

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

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

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

To use it, just call the function poswhile the 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. At first, I used $('a[id]')and included an image that was inside a fantasy.

. , , ajax... , URL- . URL-, :

<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>

jquery $('#ajax-content img') $.fancybox.pos ()

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

# 2. HTML jQuery , , , .

+4

FancyBox . , .

, , .

, - , .

.

+1

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

+1
source

More articles:


All Articles