The Cycle plugin for use with the jQuery library can be described as a robust, mature and versatile JavaScript plugin. Plentiful options allow every aspect of a slideshow created with Cycle to be modified.
For interactive slideshows where you’d like the user to be able to click on a slide to get more information, wrap an anchor around each slide. Then, when the user clicks on a slide they will be shown the target link. You could show the user a larger image, an expanded view of a portion of the image, or more descriptive text about the slide.
The markup is straightforward, using an unordered list of links:
Transition Effects Problem
Wrapping anchors around each slide makes them clickable, but that introduces a potential problem when using the Cycle plugin. Some of the transition effects just won’t work as expected. In this example the children that will be manipulated inside the #show container are the anchor links, not the images. Even though we know it’s supposed to be the images that are to be swapped in and out of this slideshow, technically, the children that will be swapped are the anchors, and that makes a difference in how things will look. Images are contained inside the anchors, so the images won’t be manipulated, just the anchors.
Most of the available transition effects modify the size of the slide’s width and/or height to achieve the desired effect. When an anchor is wrapped around an image, the anchor’s size can be manipulated, but the contained image won’t be resized. If one of the transitions that manipulate the slide width or height has been called, the effect won’t be seen as intended.
For example, the two slideshows below use the same HTML markup, except for having different container ids, which are targeted by the script and the CSS. Images are wrapped by <a> in both the left and right slideshows below.
Here’s the HTML Markup for the example slideshows below:
Using one of the turn effects illustrates how the different children behave. The slideshow on the left is manipulating anchors, while a slight change in the script allows the slideshow on the right to manipulate the images. Both slideshows below use the turnDown transition effect.
Watch each slide transition and you’ll see that the one on the left doesn’t show any turning behavior as the top slide is dragged off the lower slide. In the slideshow on the right the turnDown effect can be seen as the images are manipulated in a way to make it look like the next image is being turned down from above.
Clik here to view.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
Clik here to view.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
This phenomenon happens using the jQuery Cycle plugin when an anchor, <div>, or any other tag wraps around the images, in effect taking their place as children of the slideshow container.
slideExpr Solution
One solution is to use the slideExpr option. The default value for slideExpr is ‘NULL‘ which indicates that the default children will be manipulated as the slides, as in the slideshow on the left.
$('#showleft').cycle({
fx: 'turnDown',
speed: 700,
timeout: 2000
});
$('#showright').cycle({
fx: 'turnDown',
speed: 700,
timeout: 2000,
slideExpr: 'img'
});
The slideshow on the right, #showright, has specified the option slideExpr: ‘img’ to assure that the <img> should be treated as slides, see line 11. By specifying which element should be treated as the children of the slideshow container, the transition fx can be seen as intended.
Slideshows can use any content for slides, so remember that extra elements in the slideshow container will be treated as slides. Inspect the HTML markup above and take note of the blank paragraph in each slideshow container. The default slideshow on the left, #showleft, assumes that the <p> is a child that is part of the slideshow, so it shows a blank paragraph after the last slide. Only images are slides in the slideshow #showright, so its behavior is to wrap around to the first <img>, instead of showing the blank paragraph as the last slide.
fx Solution
Another way to avoid the transition effect problem is to stick with the slide transitions that aren’t affected when using wrappers around slides. When the design requires wrapping slides in anchors or divs, pick from the subset of transition effects that doesn’t modify the image size. To see the true effects use fade, scrollUp, scrollDown, scrollLeft, scrollRight, and shuffle for slide transitions.
Note: The blank spaces between each slide in #showleft are due to the way that WordPress assembles a webpage or post. Use slideExpr with WordPress to avoid having WordPress-injected elements acting as slides in slideshows with the jQuery Cycle plugin.