www.tuljo.com

Wordpress, image rotator jQuery

This image rotator jQuery rotates images in several groups on random basis, this image rotator was used in Wordpress. Random image rotator script Wordpress image rotator jquery.

Sample of the random image rotator jQuery

HTML markup for random image rotator jQuery

<ul id="rotator">
	<li class="rotatorGroup">
		<div class="rotatorImage"><img alt="" src="wp-content/uploads/2011/05/image-b4.gif" /></div>
		<div class="rotatorImage"><img alt="" src="wp-content/uploads/2011/05/image-b5.gif" /></div>
		<div class="rotatorImage"><img alt="" src="wp-content/uploads/2011/05/image-b6.gif" /></div>
	</li>
	<li class="rotatorGroup">
		<div class="rotatorImage"><img alt="" src="wp-content/uploads/2011/05/image-a4.gif" /></div>
		<div class="rotatorImage"><img alt="" src="wp-content/uploads/2011/05/image-a5.gif" /></div>
		<div class="rotatorImage"><img alt="" src="wp-content/uploads/2011/05/image-a6.gif" /></div>
	</li>
	<li class="rotatorGroup">
		<div class="rotatorImage"><img alt="" src="wp-content/uploads/2011/05/image-c4.gif" /></div>
		<div class="rotatorImage"><img alt="" src="wp-content/uploads/2011/05/image-c5.gif" /></div>
		<div class="rotatorImage"><img alt="" src="wp-content/uploads/2011/05/image-c6.gif" /></div>
	</li>
</ul>

JavaScript / jQuery for random image rotator jQuery

<script type="text/javascript">
	$(function(){
		// time between image rotate
		var delay = 2000;
		// for each list item in
		// the rotator ul, generate
		// show a random list item
		$('#rotator > li').each(function(){
		// save images in an array
		var $imgArr = $(this).children();
		// show a random image
		$imgArr.eq(Math.floor(Math.random()*$imgArr.length)).show();
		});
		// run the changeImage function after every (delay) miliseconds
		setInterval(function(){
		changeImage();
		},delay);

		function changeImage(){
		// save list items in an array
		var $liArr = $('#rotator > li');
		// select a random list item
		var $currLi = $liArr.eq(Math.floor(Math.random()*$liArr.length));
		// get the currently visible image
		var $currImg = $('.rotatorImage:visible', $currLi);
		if ($currImg.next().length == 1) {
			var $next = $currImg.next();
		} else {
			var $next = $('.rotatorImage:first', $currLi);
		}
		$currImg.fadeOut(2000);
		$next.fadeIn(2000);
		}
	});
</script>

CSS for random image rotator jQuery

<style type="text/css">
	#rotator{
		float: left;
		width:100%;
	}
	.rotatorGroup{
		float: left;
		height:64px;
		list-style:none;
		position: relative;
		width:64px;
	}
	.rotatorImage{
		display: none;
		position: absolute;
	}
</style>

Source: http://forum.jquery.com/topic/getting-multiple-images-to-fade-in-and-out-randomly
Getting multiple images to fade in and out randomly by Kevin Boudloche.

2011.

Web Development - XHTML CSS JavaScript jQuery.