Fancybox - Ajax 图片库

我有一个自定义图像库，它用缩略图填充 div，每个缩略图都包含在一个 fancybox 组中。

当您单击一个（它在 fancybox 中打开）时，您可以按“上一张”/“下一张”在第一“页面”上的图像之间循环。要在页面之间移动，您必须关闭 fancybox 并更改页面，然后打开新的缩略图。这组新照片是通过ajax 检索的。

为了准确地向你展示我在说什么http://www.speedcountry.com/mSpeed323/Mazda_MAZDASPEED3 http://www.speedcountry.com/mSpeed323/Mazda_MAZDASPEED3

如何使用fancybox切换页面并加载下一组图像？

FancyBox 中似乎没有任何内部方法，因此您必须修改插件。我冒昧地做了一个小小的改变并发布了demo http://jsfiddle.net/Mottie/UagVd/1/- 在演示中，在 FancyBox 弹出窗口中打开任何图像，然后按键盘上的 Enter。它将把所有图像加载到图库中并从第一个开始。

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

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

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

所以，基本上添加“数组”作为函数参数，然后添加if (array)... line.

要使用它，只需调用posFancyBox 打开时起作用。这是演示中的代码：

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

*注意：最初我只是使用$('a[id]')它包括精美盒子内的图像。

Update：就像你说的，你正在使用 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') to the $.fancybox.pos函数作为第二个参数，并从第一个图像（零）开始

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

更新#2：在我发现如果你想包含图像标题是必要的之后，我将上面的 HTML 包装在链接和 jQuery 选择器中。