How to build a simple image rotator with JQuery

1 of 1

by JQ Adams

Created on: July 22, 2009 Last Updated: July 25, 2009

I was recently working on a new website for an adult fellowship group at my church and one of the tasks I had was to create an image rotator that had various bible verses on it that would transition every few seconds. Since the site was Joomla-based, I initially searched for a free plugin that would do the trick. I did find one that would do the trick (Flash Rotator Module by JoomlaShack), but it was $19.95. I decided I would keep looking and find a free solution.

Eventually I stumbled upon JQuery Cycle. It's a free JQuery tool that lets you do an image rotator with a lot of unique transitions. I opted for a basic fade, since that's what the previous version of the site was using. There's also shuffle, zoom, rotation, and scrolling effects.

Here are the steps to recreate a basic image-slideshow using JQuery Cycle:

(1) Reference the JQuery Library and the JQuery Cycle Libraries in your <HEAD>.

(You'll need the JQuery library as well as the JQuery Cycle library on your web-server, make sure to update your references)

(2) Make a DIV with your images in it where you want the rotator to appear on your page:

Feel free to use as many images as you want in this. You can also change the height and the width, but it's probably a good idea that they all have the same height and width. You can also use ALT and TITLE tags since they're plane-jane HTML image objects.

(3) Use a $document.ready() function to load the JQuery Cycle rotator effects

make sure that the class of the DIV lines up with the class being referenced in the $document.ready() function. You can also replace the fade fx with a number of other transitions and change the speed as you desire. The 5000 represents 5000 miliseconds or 5 seconds.

Overall, I'm very impressed with JQuery Cycle as an image-rotator solution. The library it self is only 28KB when it's compressed, and if you don't include all of the transitions, you can shave a few kilobytes off that number. There are other libraries that you can make use of that do similar things, such as GalleryView and jLbox

Learn more about this author, JQ Adams.
Click here to send this author comments or questions.

Below are the top articles rated and ranked by Helium members on:

How to build a simple image rotator with JQuery

1 of 1

by JQ Adams

I was recently working on a new website for an adult fellowship group at my church and one of the tasks I had was to create