0

我有一个（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) 中时才有效！？

4

1 回答 1

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

于 2013-05-04T19:39:28.890 回答