Javascript: Fade transition between images.

This is another simple javascript that will give a transistion effect when the user clicks "next" between images. It's a neat effect, which adds a little more to the standard image display.

The example has 6 static image links, and one default start image.

Javascript Example:

Place the following javascript between the <head></head> tags of your web page. Change the NumberOfImages variable to the number of images you are using. Change the [img] variable to reflect the location and image name. [img]0 will be your first image. If you have 10 images, you will end up wih [img]9 as the last variable with the image reference.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
 var NumberOfImages = 6
 var img = new Array(NumberOfImages)
 img[0] = "images/image1.jpg"
 img[1] = "images/image2.jpg"
 img[2] = "images/image3.jpg"
 img[3] = "images/image4.jpg"
 img[4] = "images/image5.jpg"
 img[5] = "images/image6.jpg"
 var imgNumber = 0
 function NextImage()
 	{
		imgNumber++
		if (imgNumber == NumberOfImages)
		imgNumber = 0
		document.images["MyImages"].src = img[imgNumber]
		$('#myimag').fadeOut( function() {
		$('#myimag').fadeIn();
		});
		}
		function PreviousImage()
		{
			imgNumber--
			if (imgNumber < 0)
				imgNumber = NumberOfImages - 1
			document.images["MyImages"].src = img[imgNumber]
							$('#myimag').fadeOut( function() {
				$('#myimag').fadeIn();
		});
		}
		
</script>

HTML Example:

Below is the <html> example that will display the image(s) and link to navigate "next' or "previous". Note, the <img src> tag with the beginning or default image.

<IMG SRC="images/startimage.jpg" NAME="MyImages" width="300" height="300" id="myimag">
<br>
<a href="javascript:PreviousImage()">Previous</a>
<a href="javascript:NextImage()">Next</a>

Summary

You could use Coldfusion and make this javascript a more dynamic display. Rather than a list of static images, you could dynamically list through a directory, or query a database. It's a neat and simple little javascript.

More by this Author

  • Tips For How to Stain Concrete Floors
    1

    You don't always have to tile, carpet, or hardwood your floors. The new thing is to just stain the concrete that's already there. It's a lot of work, but if done properly, your home will look gorgeous. If you're...

  • How to Get Rid of Mice In and Around The House?
    5

    Until this year, the only time that I've had mice or rats in the house were when my daughter had pet mice and rats, and one of those times we did have one loose in the house. (Science fair project got loose.) Anyway,...

  • How to Build Wooden Roof Trusses
    21

    You may refer to a truss as the rafter, but it's basically the skeleton of the roof, carrying the weight of the frame and supporting the walls of the building. Trusses are very important to preventing the walls from...


Click to Rate This Article
working