ColorBox分组照片

Question

我使用颜色框,我有它工作正常,除了我不明白如何在单击时添加多个图像到库.

但我需要为每朵花出现2张图片.

谢谢你的帮助!

Answer 1

这里有很多要解释的因为您使用的是示例代码,您需要为rel="Example1"图像标记添加属性.每组图像必须具有唯一的rel属性值和相应的jQuery钩子:

你的jQuery代码:

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

如果页面上的所有图像都具有相同的rel属性值,则颜色框实例会将页面上的所有图像分组为幻灯片.

<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">

Answer 2

更好的是：通过 rel 或 data-rel 属性自动对图像进行分组。

<a href=".." class="colorbox" data-rel="group1"><..></a> 
<a href=".." class="colorbox" data-rel="group1"><..></a> 
<a href=".." class="colorbox" data-rel="group2"><..></a> 
<a href=".." class="colorbox" data-rel="group2"><..></a> 
<a href=".." class="colorbox" data-rel="group2"><..></a> 

colorbox 的配置 - 对 rel 属性使用回调

$('.colorbox').colorbox({
    rel:function() {        
        return $(this).data('rel');
    }
});

（修复了 jquery 类选择器上的一个错字）