6

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

Brendon Muir
  • 4,540
  • 2
  • 33
  • 55
Coco
  • 79
  • 1
  • 4

2 Answers2

10

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

apaul
  • 16,092
  • 8
  • 47
  • 82
0

it would be correct specify the protocol - "http://"

<ul class="cycle-slideshow" data-cycle-slides="li">
    <li><a href="http://www.google.co.uk"><img src="path/to/some/image1.jpg"></a></li>
    <li><a href="http://www.google.co.uk"><img src="path/to/some/image2.jpg"></a></li>
    <li><a href="http://www.google.co.uk"><img src="path/to/some/image3.jpg"></a></li>
</ul>
SellatoRU
  • 11
  • 1
  • 1
    Please remove this ANSWER and post your correction suggestion as a comment under [apaul's answer](http://stackoverflow.com/a/16485594/517705). If you don't want to get more downvotes. – Sk8erPeter May 28 '14 at 21:01