Fancybox - Ajax 图片库

Question

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

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

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

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

Answer 1

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

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

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

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

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

要使用它，只需在 FancyBox 打开时调用 pos 函数即可。这是演示中的代码：

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

*注意：最初我只是使用 $('a[id]') 并且它包含精美框中的图像。

---

更新：就像你说的，你正在使用ajax加载更多图像......我猜你只是得到一个图像网址列表。从 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 选择器中我发现如果你想包含图像标题，这是必要的。

Answer 2

我在此处的答案中发布了一些有用的 FancyBox 链接。请检查它们。

如果您觉得没有用，请纠正我。

同时，如果实现有任何问题，请贴出代码。

谢谢。

Answer 3

刚刚在 prepGallery() 末尾添加了 $("#profileGallery .vehiclePictures:first").click()。因此，在您的 AJAX 调用之后，它会自动“单击”照片。