Question

我有一个（html）页面，其中包含一个图库（所有图像在一起）和一个单独的图像。

我将图片库中的所有图片放在

中

<div id="imageGallery">

我将单独的图像放在

中

<div id="separateImage">

我有javascript

$('#imageGallery a').fancybox();
$('#separateImage a').fancybox();

Fancybox在图像库和单独的图像上都能正常工作。我可以在图库中循环，但是，单独的图像不是循环的一部分。我怎样才能使它循环遍历所有图像：图像库中的图像和单独的图像？

我尝试添加

rel="gallery"

按照https://www.inkling.com/read/javascript-jquery-david-sawyer-mcfarland-2nd/chapter-7/advanced-gallery-with-jquery

中的说明

到锚点

但显然这只有在所有图像都在同一个div（id）中才有效！？

Answer 1

问题在于您将fancybox绑定到两个不同的选择器：

$('#imageGallery a')和$('#separateImage a')但为了制作图库，所有元素（无论它们是否在同一个div内）都需要使用相同的选择器（fancybox v2.x）

因此，无需手动硬编码每个分开的div的每个元素，您可以执行以下操作：

$("#imageGallery a, #separateImage a")
    .addClass("fancybox")
    .attr("rel", "gallery")
    .fancybox({
       //API options
       padding: 8 // example
    });

现在，无论其位置如何，所有元素都共享相同的类和rel属性。

参见 JSFIDDLE

Fancybox画廊与图像在不同的地方

1 个答案: