ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Technology»
  • Computers & Software»
  • Computer Science & Programming»
  • Programming Languages

Javascript: Fade transition between images.

Updated on September 11, 2012

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.

Comments

Submit a Comment

No comments yet.