我有一个自定义图片库，它使用缩略图填充 div，每个缩略图都包含在一个 fancybox 组中。
当您单击一个（它在花式框中打开）时，您可以按 Prev/Next 在第一个“页面”上的图像之间循环。要在页面之间移动，您必须关闭 fancybox 并更改页面，然后打开一个新的缩略图。这组新照片是通过 ajax 检索的。
为了准确地告诉你我在说什么， http://www.speedcountry.com/mSpeed323/Mazda_MAZDASPEED3
如何使用fancybox切换页面并加载下一组图片？
【问题讨论】：
标签： javascript ajax jquery fancybox
FancyBox 中似乎没有任何内部方法，因此您必须修改插件。我冒昧地做了一个小改动并发布了demo - 在演示中，在 FancyBox 弹出窗口中打开任何图像，然后按键盘上的 Enter。它会将所有图像加载到图库中并从第一张开始。
修改887行，然后在892之前插入一行：
$.fancybox.pos = function(pos, array) { // array parameter added
if (busy) {
return;
}
if (array) { currentArray = array; } // new line
所以，基本上添加“数组”作为函数参数，然后添加if (array)... 这一行。
要使用它，只需在 FancyBox 打开时调用 pos 函数。这是演示中的代码：
// 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 选择器中。
【讨论】：
$.fancybox.pos 的第二位是一个内部的 fancybox 函数，有点像“goto”图像#...我所做的只是将当前数组（jQuery 对象数组）替换为您自己添加的数组。
【讨论】：
刚刚在prepGallery() 的末尾添加了$("#profileGallery .vehiclePictures:first").click()。所以在你的 AJAX 调用之后，它会自动“点击”照片。
【讨论】：