一个Colorbox用于两组图像

时间:2014-01-21 18:37:54

标签: colorbox

有两组图像:

<div class="gallery1">
<p><a href="image1.jpg" class="group1" /><img src="small/image1.jpg" alt="" /></a></p>
<p><a href="image2.jpg" class="group1" /><img src="small/image3.jpg" alt="" /></a></p>
<p><a href="image3.jpg" class="group1" /><img src="small/image3.jpg" alt="" /></a></p>
</div>

<div class="gallery2">
<p><a href="image4.jpg" class="group2" /><img src="small/image4.jpg" alt="" /></a></p>
<p><a href="image5.jpg" class="group2" /><img src="small/image5.jpg" alt="" /></a></p>
<p><a href="image6.jpg" class="group2" /><img src="small/image6.jpg" alt="" /></a></p>
</div>
  • 有没有办法一次为每个组启动和运行Colorbox,但是在<script></script>中没有添加两个Colorbox <head></head>组?就像有一些变量而不是集合选择器jQuery('a.group1')。colorbox({rel:'group1'});?

更新1

我已经找到了使用变量类名的方法:

<script>
    jQuery(document).ready(function(){
    jQuery("a").click(function(){
        var myclassname = $(this).attr('class');
        alert('a.'+myclassname);
        jQuery('a.'+myclassname).colorbox({rel:'myclassname'});
    });
    });
</script>

但问题仍未解决。由于脚本的功能如下:

  • 新加载的页面:单击一组图像(其中的“A”标记) - Colorbox启动并按顺序显示相应组的所有图像。正如它应该的那样。

  • 但是如果你继续在同一页面上没有重新加载,点击另一组图像(其中的“A”标签),Colorbox将启动并串联显示相应组加上之前点击的组的所有图像。因为不希望这样。

在每次启动/关闭过程中,似乎必须以某种方式删除Colorbox。因此,下次启动将重新开始,就像在新加载的页面上一样。

如何实现这一目标?或者还有其他方法吗?

1 个答案:

答案 0 :(得分:1)

你需要这样的东西吗?

<a href="image1" rel="group1" class="gallery">
 <img src="image1">
</a>
<a href="image2" rel="group1"  class="gallery">
 <img src="image2">
</a>

<a href="image3" rel="group2"  class="gallery">
 <img src="image1">
</a>
<a href="image4" rel="group2"  class="gallery">
 <img src="image2">
</a>

<script>
$(".gallery").colorbox();
</script>

注意a href标签中的rel属性 在这个例子中,将有2个不同的画廊组