How to create a simple jquery image rotator

In this tutorial I’m going to show you how to create a simple jquery image rotator. Yes, there are quite a lot of image rotators that exists out there if you try and Google it. Those image rotators are either using html5 or jQuery for the effects that you see when the rotator moves from one image to another. But this time I’m going to show you the most basic way of creating an image rotator by using php and jquery.

 

Requirements

  • jQuery
  • Wampserver
  • A couple of images

 

Image array

At the top portion of your page, be sure to include the jQuery file.

<script src="jq.js"></script>

Next, specify a directory to be scanned. You may want to create a specified folder only for images:

$dir  = 'images';

Here’s what my directory looks like, just to give you an idea on how you should arrange the files:

image

Next, use the scandir() function in php. It requires a string argument which specifies the directory that you want to be scanned, in this case we want the images folder to be scanned for the image files that are inside it. The scandir() function returns an array of the list of files in the directory which you specified as an argument.

$images = scandir($dir);

Next, declare another array called $true_images. This is where we will store the real array of image file names. Because the $images array stores non-image values. Try using print_r($images) so that you’ll see what I mean.

$true_images = array();

Then do a foreach loop, to loop through all the items in the $images array. This time we use a function called is_file() which requires a string argument that stores the directory together with the image file name. This effectively removes the non-file values in the $image array and assign it into the $true_images array. Note that we didn’t specify any keys during the assignment of array items. Its because php does this automatically.

foreach($images as $k=>$v){
	if(is_file('images/'.$v)){
		$true_images[] = $v;
	}
}

 

Image Rotator

Next is the image rotator script.  Go ahead and type those <script> tags. Also specify that we only want to execute the script once the page is fully loaded in the browser.

<script>
$(function(){ //scripts inside this are only executed after page has been fully loaded

});
</script>

Next, assign the $true_images array into a javascript array. We used the php implode() function. To convert the $true_images array into a string separated with commas. So that it can be treated as a javascript array.

var image_array = ["<?php echo implode('","', $true_images); ?>"];

Declare the index and last_index. The index is the value that we are going to increment, it’s the key to changing the images. Were basically going to reset it when it reaches the last_index. Which means that this image rotator is not going to be displaying random images. Its only going to display the first image in the array up to the last and then go back again.

var index = 0;
var last_index = image_array.length;

Next, build a javascript function called image_rotator(). What it does is to change the source attribute of the image tag with the id of imgcontainer. It changes the image displayed by making use of the index. The index will be incremented by 1 every time the image_rotator() function is called. And reset back its value to 0 once the last_index has been reached.

function image_rotator(){
			
	$('#imgcontainer').attr('src', 'images/' + image_array[index]);
		index = index + 1;
				
		if(index == last_index){
		index = 0;
		}
}

To make all of this work out, you need to call the image_rotator() function and use the setInterval() to execute it every 2500ms or whatever interval you would like to specify.

setInterval(image_rotator, 2500);

And here’s the html that is manipulated by our image rotator.

<div id="images">
	<img src="images/1.jpg" id="imgcontainer" width="400px" height="500"/>
</div>

 

Conclusion

Okay, that’s it for this tutorial. You’ve learned how to create a simple image rotator using jQuery and php. You also learned a couple of php functions which you can use to scan for files in a specific directory. Thanks for reading!

One thought on “How to create a simple jquery image rotator

  1. excellent post.. very useful for me.. i have a small problem how to enhance this script to rotate with fading.. help me.. thanks..

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s