Random Fading Rotator with jQuery

This article is going to cover the basics in having a set list of elements fade through each other in rotation, but in a random order, so that your users aren’t always seeing the same items first and all the elements get a fair run.

A quick demo of what this article will build can be seen here:
http://blog.subooa.com/example/randomfadingrotator/images.html

First of all, setup a list of elements on your page something like below:

?View Code HTML
1
2
3
4
5
6
7
8
9
10
11

 
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"><!--mce:0--></script>
		<script src="rfr.js" type="text/javascript"><!--mce:1--></script>
<div id="rotating_items">
<div class="rotating_item">
				<img src="first_image.jpg" alt="" /></div>
<div class="rotating_item">
				<img src="second_image.jpg" alt="" /></div>
<div class="rotating_item">
				<img src="third_image.jpg" alt="" /></div>
</div>

Viewing the above code will show you a simple list of images in an unordered list, nothing fancy at all, so to get the items in the right place and remove the default styling we need to generate the css file (which as you may have noticed we are going to call rfr.css)

?View Code CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

body {
	font-family: "Trebuchet MS", "Geneva CY", Verdana;
	font-size: 12px;
	color: #414141;
}
 
h3{
	font-size: 18px;
	margin: 20px 0px;
}
 
#rotating_items{
	position: relative;
}
	#rotating_items h3{
		margin: 0px;
	}
 
	#rotating_items div.rotating_item{
		position: absolute;
	}

Again, there’s nothing overly complicated in this set of css classes, all that is happening is that each of the elements is being told to display on top of each other, so refreshing your page now you will see only one image. The other images are tucked in behind it, ready to be rotated through.

Now comes the fun part, the javascript. Again, you may have noticed that this javascript file we are going to call rfr.js

As noted earlier, we’re going to pick an element at random from the list available to fade in while the current image fades out.

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

jQuery(document).ready(function(){
	showing = jQuery('#rotating_items div.rotating_item:first'); // Initiate the 'showing' variable as the first rotating_item
	showing.siblings('div').hide(); // Hide all other rotating_items
	setInterval("show_next_rotating_item(showing)", 5000); // Set the rotate time to 5 seconds
});
 
// Below is the code that picks an item at random to display
jQuery.jQueryRandom = 0;
jQuery.extend(jQuery.expr[":"],
{
    random: function(a, i, m, r) {
        if (i == 0) {
            jQuery.jQueryRandom = Math.floor(Math.random() * r.length);
        };
        return i == jQuery.jQueryRandom;
    }
}); 
 
// The below function repeatedly gets called, to do the rotating
function show_next_rotating_item(t){
	jQuery(t).fadeOut('slow');
 
	var next_rotating_item = jQuery(t).siblings('.rotating_item:random');
	if(!next_rotating_item.attr('class')){
		next_rotating_item = jQuery('#rotating_items div.rotating_item:first');
	}
	next_rotating_item.fadeIn('slow');
 
	showing = next_rotating_item;
}

The main things to notice here are the ‘random’ extension of jQuery, and the use of the randoms selector when using the ‘siblings’ function call. This allows is to pick a random sibling element of the element that is currently being displayed.

This can be used with pretty much anything, including content based divs. The example here:
http://blog.subooa.com/example/randomfadingrotator/testimonials.html
Shows a set of testimonials that rotate at random, the added bonus here if you view the javascript source for this version, is that the entire element becomes a hot spot for the link, so the use can click anywhere on the item. It also has some extra code in there to allow you to track the clicks as an event in Google if you so wish.

Related posts:

  1. Creating a Dropdown Menu with jQuery and CSS
  2. Ajax in Joomla with jQuery
  3. Adding Rounded Corners Easily with Javascript

13 Responses to “Random Fading Rotator with jQuery”

  1. Brandon says:
    August 7, 2009 at 11:05 am

    Amazing affect.

    How would I go about using it twice on one page.

    I have 2 different div’s I’d like to fade in and out. They are both on different areas of the page and have different content.

    Thanks,

    B

  2. Brian says:
    August 28, 2009 at 8:10 am

    Thanks, but doesn’t seem to like IE6 and IE7. I’ve got several transparent gifs that I had to have loop and randomize, but upon refresh of the browser, the gifs seem to load all at the same time on top of each other, which looks like a mess

  3. jQuery, Ajax, javascript web 2.0, | GUI Developer says:
    September 1, 2009 at 6:48 am

    [...] to allow you to track the clicks as an event in Google if you so wish. Full Reference Source: http://blog.subooa.com/development/ajax_and_javascript/random-fading-rotator-with-jquery/ [...]

  4. jhoysi says:
    September 9, 2009 at 1:49 am

    I’m having the same issue as Brian. In addition, when I have it in a column, because everything is absolutely positioned to be on top of each other, the column collapses when the rotate happens, causing my sidebar information to move on top of it as well.

    Have you looked further into this?

  5. Garrett Guess says:
    October 13, 2009 at 9:26 am

    Are there new links to the examples? The current links are dead.

  6. Chris Duell says:
    October 17, 2009 at 6:29 pm

    Sorry about that, the link was busted from the site move, they should be OK now.

  7. Mitch Shanley says:
    December 3, 2009 at 7:37 am

    http://blog.subooa.com/example/randomfadingrotator/testimonials.html

    link does not work

  8. Chris Duell says:
    December 7, 2009 at 8:12 pm

    Sorry, fixed up… should be sweet now

  9. dansav says:
    April 9, 2010 at 6:15 am

    Thanks for this. Its very useful. I was trying to figure out how to get the images to not be random, is there a way to this and still keep the ability to add items to the html enclosed in the rotating item div tags?

  10. M Brnnan says:
    May 4, 2010 at 3:53 pm

    Just curious…I’m trying never to work with tables ever again and using divs, but I can’t seem to add the right CSS code to center this image sequence on my page! Thoughts?

  11. Kiran says:
    May 13, 2010 at 5:18 pm

    Hey chris Duell first its superb jquery lib you done.. but as you said random and rotate .. i guess its just fade rotate there is no random..!! like if i refresh it start from 1st!

  12. Chris Duell says:
    July 28, 2010 at 2:28 pm

    Try using margin: 0px auto

  13. Chris Duell says:
    July 28, 2010 at 2:29 pm

    There’s another plugin you might be able use use for this called jCycle I think

Leave a Reply

Back to Top