Search code examples
htmldreamweaverjquery-cycle2

Adding Link to image in slideshow cycle2 or pager

I need to add a link to images in my slideshow(cycle2) which is also setup with a pager. How do I do that without knocking the image down of the slider??

 <div 
 id="slideshow" class="cycle-slideshow"
 data-cycle-manual-fx="scrollHorz"
 data-cycle-pager-fx="fade" 
 data-cycle-manual-speed="400"
 data-cycle-prev="#prev"    
 data-cycle-next="#next"
 data-cycle-speed="600"  
 data-cycle-timeout="3000" 
 data-cycle-pager = "#pager" 
 data-cycle-pager-template="<a href='#'><img src='{{src}}' width=150     height=100></a>">


    <img src="bear scene.jpg" alt=""/>
    <img src="someimage.jpg" alt=""/>
    <img src="otherimage.jpg" alt=""/>
    <img src="picute.jpg" alt=""/>
    <img src="somethingelse.jpg" alt=""/>
    <img src="anotherpic_.jpg" alt=""/>
    <img src="lastpic.jpg" alt=""/>

   </div>

Solution

  • If you do not want to mess up with the css (which you need to do if you wrap the images in <a> tags) you can just use javascript onclick event for the images to open a link from the images like this:

    <img onclick="window.open('http://www.google.com', '_blank')" src="bear scene.jpg" alt=""/>

    Here are some examples: https://jsfiddle.net/2jjomuge/