有两组图像:
<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>
<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将启动并串联显示相应组加上的所有图像strong>之前点击的组的所有图像。因为不希望这样。
在每次启动/关闭过程中,似乎必须以某种方式删除Colorbox。因此,下次启动将重新开始,就像在新加载的页面上一样。
如何实现这一目标?或者还有其他方法吗?
答案 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个不同的画廊组