Cycle2 make images links

Question

Hi Ive just swapped from Keyframes to Cycle2 (http://jquery.malsup.com/cycle2/) as a way of slideshowing images , I swapped to cycle2 as i believed this would allow me to make the images links , I only need one of the images to a link not all of them so when the slideshow gets to the slide the link is active ,

 <img src="/images/promo1.jpg">
 <img src="/images/promo2.jpg">
 <img src="/images/promo3.jpg">
 <img src="/images/promo4.jpg">

this works fine slideshows perfect, soon at i try

<a href="http://www.google.co.uk">
 <img src="images/promo2.jpg"></a>

on just one of the images , it knocks it out of the slideshow and displays it underneath as its own image.

any help appreciated

Thanks

Answer 1

From the Cycle2 FAQ

I want to use slides that are not images. How do I tell Cycle2 what my slides are?

Use the data-cycle-slides attribute to provide a jQuery selector which identifies the elements within the container that are slides. For example, if your slideshow is a ul with li slides you would set the attribute like this: data-cycle-slides="li"

<ul class="cycle-slideshow" data-cycle-slides="li">
    <li><img src="path/to/some/image1.jpg"></li>
    <li><img src="path/to/some/image2.jpg"></li>
    <li><img src="path/to/some/image3.jpg"></li>
</ul>

In your case, you probably need something like:

<ul class="cycle-slideshow" data-cycle-slides="li" data-cycle-fx="scrollHorz">
    <li><a href="http://www.example.com"><img src="http://placehold.it/350x150"/></a></li>
    <li><a href="http://www.example.com"><h2>This is a non-image slide</h2></a></li>
    <li><a href="http://www.example.com"><img src="http://placehold.it/350x150"/></a></li>
    <li><a href="http://www.example.com"><h2>This is a non-image slide</h2></a></li>
</ul>

Working Example