[EDITED QUESTION]
I am using an image preview tooltip, which is making use of the rel attribute, so for the colorbox i am using the class="slideshow" to group the images together. I have this working fine, but i'd like to be able to open the slideshow from a text link, seen below.
(rel="medium.jpg" is the image used for the image preview)
<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>
Below is the standard code to trigger the colorbox, how can i modify this to open the slideshow?
<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>
Thanks in advance.
I looked at colorbox page and everything is explained here.
Look at this, it's exactly what you are trying to do : example 1
Hmm when I try Kai's suggestion it does not work
Using the example page:
$(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>
Just extend it after dynamically creating the gallery.
$(document).ready(function() {
//dynamacially create the gallery here
$("a.slideshow").colorbox({ slideshow: true });
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.