This jQuery plugin will transition between images with a nice fade In/Out. It only requires a couple of lines of CSS and a regular jQuery Plugin call. You have full control on the number of images, the delay and a lot more. It can play backwards once it reaches the end, or it will start all over again from image 1.

You do not need to have all the images inside your HTML!

The plugin reads the path of the 1st image and then loads the next numbered image under the same path. Your images will need to be named numerically in sequence, as in: 1.jpg, 2.jpg, etc...

Lastly, the extension will need to be the same as the 1st image.


Declare the width and height of the main container. this should be the width and height of your images. The class .imagin8 is a selector so use anything you like, just make sure it has a position of relative.
.imagin8 { position : relative; width : auto; height : auto; } .imagin8 img { position : absolute!important; }


The HTML is very simple.
<div id="one" class="imagin8"> <img src="images/imagin8/your-folder/1.jpg" alt=" " /> </div>

The Options

All the options are optional. But you might want to change images to the number of images you have.
Option Default value Description
delay 2000 The delay between image transitions
fadedelay 1000 The duration of the fade
images 1 The total number of images in your folder
playbackwards false Change to true if you want to play backwards when the animation is done

The Call

There are 8 images in the folder so we call:
$("div.imagin8").imagin8({ images : 8 });