Javascript Fancybox-Ajax图像库

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

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

让你知道我在说什么，

---

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

我在回答中发布了一些fancybox的有用链接。请检查一下

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

同时，如果在实现上有任何问题，请发布代码

---

谢谢。

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>

---

更新#2：我发现如果需要包含图像标题，就必须使用jQuery选择器将上述HTML包装在链接和jQuery选择器中。

刚刚添加了

$（“#profileGallery.vehiclePictures:first”）。单击
prepGallery（）
末尾的（）。因此，在您的AJAX调用之后，它将自动“单击”照片。
如果明确单击照片，这将是画廊中第一张照片的事件。我如何修改它，以便如果他们单击图片“n”并移动到页面上的最后一个图片（带有fancybox箭头）。。。它发出了一个ajax调用？@pws5068您可以使用onStart事件来检查当前图像是否是最后一个图像，这样您就可以执行类似的操作。我在这里看到了您的逻辑，但第二个部分我有点困惑（演示对我来说不起作用）。我在数组参数中传递什么？你能详细介绍一下“画廊对象的jQuery对象”吗Hiya，演示停止了，因为我链接到了他们网站上的fancybox文件。我刚刚切换了所有链接并添加了css，所以它现在应该可以工作了。带有
$.fancybox.pos
的第二位是一个内部fancybox函数，有点像“转到”图像35;。。。我所做的只是将当前数组（jQuery对象数组）替换为您自己添加的数组。感谢您的帮助，bountyawarded@Mottie不幸的是，这对我不起作用。你能看一下这个问题吗？提前谢谢。
// ajax complete, add images to gallery
$.fancybox.pos( 0, $('#ajax-loaded a') );