Fancybox - Ajax 图片库

5

我有一个自定义图像库,它会在一个div中显示缩略图,并将每个缩略图包含在fancybox组中。

当您单击其中一张图像(它会在fancybox中打开),您可以按Prev/Next按钮在第一个“页面”之间循环浏览图像。要在页面之间移动,您必须关闭fancybox并更改页面,然后打开新的缩略图。这些新的照片通过ajax检索。

为了让您准确了解我所说的,http://www.speedcountry.com/mSpeed323/Mazda_MAZDASPEED3

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

3个回答

4

在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]'),这样会包含在fancy box中的图片。


更新:就像你说的那样,你正在使用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选择器中添加了链接。

我理解你的逻辑,但是第二部分让我有点困惑(演示对我来说也无法工作)。我在数组参数中传递了什么?你能详细说明一下“jQuery对象的图库对象”是什么意思吗? - pws5068
嗨,演示停止工作是因为我链接到他们网站上的fancybox文件。我刚刚切换了所有链接并添加了CSS,所以现在应该可以工作了。第二部分涉及$.fancybox.pos,这是一种内部fancybox函数,类似于“转到”图像#...我所做的就是用你自己添加的数组(jQuery对象数组)替换当前数组。 - Mottie
感谢你的所有帮助,奖励已发放。 - pws5068
@Mottie 很遗憾,这对我没有起作用。您能否请看一下这个问题?链接 谢谢您的帮助。 - Jack

1

我在我的答案这里中发布了一些FancyBox的有用链接,请查看。

如果您觉得不实用,请指正我。

同时,如果在实现过程中有任何问题,请发布代码。

谢谢。


1
刚刚在prepGallery()的结尾添加了$("#profileGallery .vehiclePictures:first").click()。所以,在你的AJAX调用之后,它将自动“点击”照片。

如果第一张照片在画廊中被明确点击,那将是一个事件。我该如何修改它,以便如果他们点击图片“n”并移动到页面上的最后一张(带有fancybox箭头)...它会发出ajax调用? - pws5068
@pws5068 你可以使用onStart事件来检查当前图像是否为最后一个,这样你就可以做类似于这样的事情 - HChen

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接