JavaScript plugins can definitely speed up development of a website, but unless you take the time to explore the plugins you’re using, you may not be using them to full advantage. Read on to learn more about using the jQuery Cycle plugin for slideshows. It works with jQuery v1.3.2 and later.
The jQuery Cycle Plugin offers an amazing number of transitions for your next slideshow. If any of the two dozen transitions don’t give the effect you’re looking for, the plugin can always be modified to suit. If you’re looking to make some unique transitions, check out the advanced demos on the plugin site.
Over 50 options can be implemented to show your slides in the best light. Options are available for controlling the speed of the transitions, the length of time between slides, as well as running the slideshow backwards or stopping after a certain number of slides have been shown.
Slides can be forced to fit a container and made to be manually paused and resumed. Easing transitions can be specified as can random showing of slides. Options in Cycle are plentiful and definitely worth investigating.
Command strings can be used to pause or resume the slideshow or advance to the next or previous slides. Tie these commands to a click event to let your visitors see the show as they wish.
The Cycle plugin works with two assumptions in creating slideshows. First, it assumes that a container object has been identified, usually via a class or id identifier, that will contain the slides for the slideshow. All children of the containing parent will become a slide.
Second, the slides must all be children of the container. Any object can be a child here, so textual content, images, anchors and divs can all be manipulated and viewed as slides in your slideshow. Don’t put anything else in the slideshow container unless you want it to become part of the slideshow.
Here’s the HTML markup that could be used for a simple slideshow of images:
<div id="show">
<img src="../images/pic1.jpg" alt="one" />
<img src="../images/pic2.jpg" alt="two" />
<img src="../images/pic3.jpg" alt="three" />
<img src="../images/pic4.jpg" alt="four" />
<img src="../images/pic5.jpg" alt="five" />
</div>The images are contained in a specific container, div#show, which can be styled with CSS. Giving the container and the slides fixed dimensions works best, so make sure to specify the widths and heights.
The default behavior is to fade slides in and out of the container in a continuous and sequential manner, in a cyclical way. So, we’re going to ‘cycle’ through the slides in this slideshow. The javascript for a slideshow using default behavior is simple:
$('#show').cycle();With Cycle plugin default settings the slideshow starts with the first image or slide and each slide takes one second, or 1000 milliseconds, to be faded in. Each slide is then paused for 4 seconds and then faded out in one second. The slideshow wraps around so that the first slide will be shown after the last one. The fading in and out action occurs continuously and indefinitely with the default settings, as below:
To alter the slideshow behavior pass an effect, other than fade, as a string to the cycle method, like so:
$('#show2').cycle('shuffle');Check out all the effects that can be used to transition slides: blindX, blindY, blindZ, cover, curtainX, curtainY, fade, fadeZoom, growX, growY, scrollUp, scrollDown, scrollLeft, scrollRight, scrollHorz, scrollVert, shuffle, slideX, slideY, toss, turnUp, turnDown, turnLeft, turnRight, uncover, wipe, and zoom.
Several transitions can be combined in a comma-separated list if you can’t choose just one. Or, use the string ‘all’ to see all the slide transition effects in a random manner.
Alternatively, you can use an options object to set the fx option among others. The code below specifies fade, zoom and curtainY effects to bring the slides in and out of the container. Each slide will be brought in slowly (800 ms) and taken out quickly (400 ms) taking a total of 3 seconds for each complete transition. This is the code for the slideshow (#show3) at the top of this post.
$('#show3').cycle({
fx: 'fade,zoom,curtainY',
speedIn: 800,
speedOut: 400,
slideExpr: 'img'
timeout: 3000,
nowrap: true
});The parameter slideExpr is given a string value of ‘img’ in order to produce a slideshow without long blank pauses in between slides when using WordPress. WordPress and other content management systems may introduce extraneous markup when preparing webpages. The markup may be incorrectly interpreted by different browsers used to view slideshows created with Cycle, so it’s become important to specify the elements that are supposed to be cycled in the slideshow. Thus, the addition of slideExpr: ‘img’ as an optional parameter is necessary for image slideshows in WordPress.
The slideshow just above will be shown only one time and end with the last slide because the nowrap option is set to true. This might be a good thing to remember for leaving a textual message on the screen with your last slide instead of having the slideshow run indefinitely.
If you get stuck or need a little help with figuring out how to work the Cycle plugin, visit the jQuery Forum.