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. You can see the results of these efforts on http://www.sfcontext.com/
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>.
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script src=”jquery.cycle.all.js” type=”text/javascript”></script>
(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:
<div class=”pics”>
<img src=”/media/banners/1.jpg” width=”597″ height=”175″ />
<img src=”/media/banners/2.jpg” width=”597″ height=”175″ />
<img src=”/media/banners/3.jpg” width=”597″ height=”175″ />
<img src=”/media/banners/4.jpg” width=”597″ height=”175″ />
</div>
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
<script type=”text/javascript”>
$(document).ready(function() {
$(‘.pics’).cycle({
fx: ‘fade’,
speed: 5000
});
});
</script>
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.