‹‹ cycle homejQuery Cycle Plugin - Anchor Demo

Anchors and Images

This demo shows how to use anchors with images in your slideshow.

<div class="pics">
    <a href="A"><img src="images/beach1.jpg" width="200" height="200" /></a>
    <a href="B"><img src="images/beach2.jpg" width="200" height="200" /></a>
    <a href="C"><img src="images/beach3.jpg" width="200" height="200" /></a>
</div>

$('#s1').cycle({
    fx:     'fade',
    timeout: 2000,
    after:   onAfter
});
Current anchor: A

Limitations

Because transition effects apply to the slide element, transitions that manipulate the size of the slide will not behave as expected. For example, all of the "turn" transitions change the height or width of the slide to achieve the effect. But when you change the height/width of an anchor, the image within the anchor does not get resized and so the effect does not behave as expected.

So when you want images wrapped in anchors you will need to stick with transitions that do not maniplate size. The following fall into this category: