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.
Help!
I cannot get this to work. Where to I put the function in the head or in the body of the page?
Would appreciate any input.
Me either! Darn
Does this work with Joomla?
Actually the Flash Rotator Module IS free… you just have to register. There are 2 versions on their site.
There are also plenty of other slideshow modules for Joomla… RokSlideShow, ISS, etc all have the same capabilities unless you want to do some of the more advanced stuff.
In the header
Thanks for the script. It worked for me after I changed the single and double quotation marks from smart quotes (curvy) to regular (straight). You might want to see if you can display them as straight quotation marks on this site.
Hi, Here are the basic image rotators slide-show http://www.raghibsuleman.com/jquery-image-rotator…
Thanks for this, its nice and simple. Just forgot to add the cycle library first time but after that it works really easily.