javascript – Fancybox – Ajax图像库

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

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

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

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

解决方法:

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.