[编辑问题]
我正在使用图像预览工具提示,它正在使用rel属性,因此对于colorbox我使用class =“slideshow”将图像分组在一起。我有这个工作正常,但我希望能够从文本链接打开幻灯片,如下所示。
(rel =“medium.jpg”是用于图像预览的图像)
<div id='gallery'>
<a href='large.jpg' class="slideshow" rel='medium.jpg'><img src='small.jpg'/></a>
<a href='large2.jpg' class="slideshow" rel='medium2.jpg'><img src='small.2jpg'/></a>
</div>
<!--text link-->
<a href="#" class="openSlideshow">open slideshow</a>
下面是触发彩盒的标准代码,我该如何修改它以打开幻灯片?
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="../colorbox/jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
$("a.openSlideshow").colorbox({slideshow:true});
});
</script>
提前致谢。
答案 0 :(得分:2)
我查看了彩盒页面,这里解释了所有内容。
看看这个,这正是你要做的事:example 1
答案 1 :(得分:1)
当我尝试Kai的建议时它不起作用
使用示例页面:
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$("a.example4").colorbox({ slideshow: true });
<h2>Slideshow</h2>
<p><a href="../content/ohoopee1.jpg" class="example4" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
<p><a href="../content/ohoopee2.jpg" class="example4" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
<p><a href="../content/ohoopee3.jpg" class="example4" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
答案 2 :(得分:0)
在动态创建图库后,只需将其扩展即可。
$(document).ready(function() {
//dynamacially create the gallery here
$("a.slideshow").colorbox({ slideshow: true });
})