Coco Coco - 1 year ago 60
Javascript Question

Cycle2 make images links

Hi Ive just swapped from Keyframes to 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="">
<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


Answer Source

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>

In your case, you probably need something like:

<ul class="cycle-slideshow" data-cycle-slides="li" data-cycle-fx="scrollHorz">
    <li><a href=""><img src=""/></a></li>
    <li><a href=""><h2>This is a non-image slide</h2></a></li>
    <li><a href=""><img src=""/></a></li>
    <li><a href=""><h2>This is a non-image slide</h2></a></li>

Working Example