javascript - ColorBox 对照片进行分组

Question

我使用的是彩盒，它工作正常，只是我不明白如何在单击它时将多个图像添加到图库中。

但我需要为每朵花显示 2 张图片。

感谢您的帮助!

Answer 1

这里有很多要解释的，因为您使用的是示例代码，您需要将 rel="Example1" 属性添加到您的图片标签中。每组图像必须具有唯一的 rel 属性值和相应的 jQuery 钩子(Hook):

你的 jQuery 代码:

$("a[rel='example1']").colorbox(); // Choose the type of colorbox instance you like and replicate it
$("a[rel='example2']").colorbox();

如果页面上的所有图像都具有相同的 rel 属性值，则 colorbox 实例会将页面上的所有图像分组到幻灯片中。

<a href="images/floral/full-size/vegas-weddings-floral-1.jpg" rel="example1" title="Flower 1">
<a href="images/floral/full-size/vegas-weddings-floral-1.jpg" rel="example1" title="Flower 2">
<a href="images/floral/full-size/vegas-weddings-floral-1.jpg" rel="example1" title="Flower 3">

<a href="images/floral/full-size/vegas-weddings-floral-1.jpg" rel="example2" title="Flower 1">
<a href="images/floral/full-size/vegas-weddings-floral-1.jpg" rel="example2" title="Flower 2">
<a href="images/floral/full-size/vegas-weddings-floral-1.jpg" rel="example2" title="Flower 3">