Question

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

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

向您展示我正在谈论的内容， http://www.speedcountry.com/mSpeed323/Mazda_MAZDASPEED3

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

Answer 1

FancyBox中没有任何内部方法，所以你必须修改插件。我冒昧地做了一个小改动并在演示中发布demo - 在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加载更多图像......我猜你只是得到一个图片网址列表。从网址开始，您需要在隐藏区域中将这些图像形成并添加到页面中：

<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 ：我发现如果你想要包含一个图片标题是必要的，我在链接和jQuery选择器中包装了上面的HTML。

Answer 2

我在答案here中发布了一些有用的FancyBox链接。请检查一下。

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

同时，如果实施有任何问题，请发布代码。

谢谢。

Answer 3

刚刚在$("#profileGallery .vehiclePictures:first").click()的末尾添加了prepGallery()。所以在你的AJAX通话之后，它会自动“点击”照片。

Fancybox - Ajax图库

3 个答案: