Three image slide show scripts using jQuery
I wrote this post a while back. The content can still be relevant but the information I've linked to may not be available.
Clients often ask for an image slide show to ‘jazz up’ their websites. Most often this is because they have seen a similar effect on another website and it is perceived as ‘cool’ to be able to do this. I think you should use these only if they add something to the page but it seems that a slide show is a popular request. As a result, I try and keep a few slide show scripts bookmarked for future usage. Here are three that use the popular jQuery JavaScript library.
Related: Learning jQuery 1.3 by Karl Swedberg and Jonathan Chaffer.
s3Slider
The s3Slider jQuery plugin is similar to JonDesign’s Smooth Slideshow but uses jQuery. Here’s the demo page. I really like the semi-opaque title elements that slide in for each image. It looks quite classy in my opinion. There’s no Next and Previous buttons on this one and the script just cycles through the images with fade transitions without user intervention.
Simple Gallery
Simple Gallery is similar to the slide show that is sometimes used for the lead story on BBC News. I like the Next and Previous controls that appear when you move your mouse over the images. In addition, the images can be linked.
jQuery Cycle Plugin
The jQuery Cycle Plugin is an image slide show that seems to have every effect imaginable. There are many demos available that show different examples. I am not sure that I would use some of the effects myself because for many websites an image slide show should obey the ‘less is more’ principle in my view. But you may not share the same opinion so the jQuery Cycle Plugin may contain just the effect for you!
Other considerations
Firstly, there’s no point using a slide show if the images are not high quality. You may be proud of that neat photo you shot with your mobile ‘phone but it likely will not be as good as a professionally taken image. There are plenty of stock photography websites available that provide great images at cheap prices. Use them!
Finally, all these slide shows use JavaScript [of course!]. Some web visitors have JavaScript turned off. You may want to consider what happens with any slide show when JavaScript is disabled in your browser. The above examples react differently but sometimes there will be a blank space on your web page without JavaScript enabled. This may influence your decision whether to use an image slide show. However, when used appropriately, an image slide show can give your website something ‘extra’.
Note: Smooth Gallery simply shows each image when JavaScript is disabled. Of course, this may have other layout implications but at least the JavaScript-disabled visitor will see your images. Here’s another example where disabled JavaScript is taken into account. In this case, without JavaScript, only the first image is shown – that’s quite a good solution in my view.
Comments are OFF for this post.