Fancybox - Ajax图库

Question

我有一个自定义图库,用缩略图填充div,每个缩写包含在一个fancybox组中.

当您单击一个(它在fancybox中打开)并且您可以按Prev/Next在第一个"页面"上的图像之间循环.要在页面之间移动,您必须关闭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

因此，基本上添加“数组”作为函数参数，然后添加该if (array)...行。

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

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

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

更新：就像你说的，你正在使用 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 选择器中。