的fancybox - 阿贾克斯图片廊 [英] Fancybox - Ajax Image Gallery

问题描述

我有一个它填充带缩览图格的自定义图片库，每个包含在的fancybox组。

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

当您单击其中一个（它的fancybox打开），你可以preSS preV /下一个循环图像之间的第一页上。在页面之间移动，必须关闭的fancybox和更改网页再打开一个新的缩略图。这组新的照片是通过AJAX检索。

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.

要告诉你正是我想说的， <一href="http://www.speedcountry.com/mSpeed323/Mazda_MAZDASPEED3">http://www.speedcountry.com/mSpeed323/Mazda_MAZDASPEED3

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

我如何使用的fancybox切换页面，并加载下一个图像集？

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

推荐答案

它不会出现有在的fancybox任何内部方法，所以你必须修改插件。我做了一个微小的变化，并张贴演示的自由 - 在演示中，打开任何图像中的fancybox弹出，那么$键盘页上$ PSS输入。这将加载所有的图像进入画廊，从第一个开始。

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.

修改行887，然后892之前插入一行：

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

因此​​，基本上增加阵列作为函数参数，然后添加如果（阵列）... 行。

要使用它，只需调用 POS 功能的同时的fancybox是开放的。这是从演示code：

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]'));

*注：最初，我只是用 $（'A [ID]'），它包括了在里​​面看中在图片

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

更新：所以像你说的，要装载更多的照片用ajax ......我猜你是刚刚获得的图像的URL列表。与URL开始，您将需要形成这些图像在一个隐藏的区域添加到页面：

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>

然后就可以让jQuery的对象 $（'＃AJAX内容IMG'）到 $。fancybox.pos 函数作为第二放慢参数，并开始与第一个图像（零）

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') );

更新＃2 ：我裹在链接上面的HTML和jQuery选择后，我发现，如果你想包含图片的标题，这是必要的。

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.

这篇关于的fancybox - 阿贾克斯图片廊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！