«
»

Javascript Image Morph

I’ve been working on an image gallery and needed a way to do nice fade/morphs between a list of images for a slideshow. I used prototype and scriptalicious. Here is how I did it:

See the Demo Here

Download Entire Source of Example

Javascript to do the work:

//preload the images and load them into an array
imageArray = new Array(); 
 
var image01 = new Image();
image01.src = 'photo_01.jpg';
imageArray[imageArray.length] = image01;
 
var image02 = new Image();
image02.src = 'photo_02.jpg';
imageArray[imageArray.length] = image02;
 
var image03 = new Image();
image03.src = 'photo_03.jpg';
imageArray[imageArray.length] = image03;
 
var image04 = new Image();
image04.src = 'photo_04.jpg';
imageArray[imageArray.length] = image04;
 
var image05 = new Image();
image05.src = 'photo_05.jpg';
imageArray[imageArray.length] = image05;
 
// imageIndex is going to be the index of the next image to display.  
// images 0 and 1 are already loaded into the html
var imageIndex = 1;
 
function switchImage() {
	// place the next image to be displayed to the front
	$('imageFront').src = imageArray[imageIndex].src;
 
	// make the image in front appear, when it is done swap it with the image in the back
	new Effect.Appear('imageFront', {
		afterFinish: function() { 
			// make the image in the back the same src as the image in the front
			$('imageBehind').src = $('imageFront').src;
			
			//hide the image in the front
			$('imageFront').style.display = 'none';
			
			// increment the index
			imageIndex++;
			// if we have indexed past the end of the array, go back to zero
			if (imageIndex == imageArray.length) { 
				imageIndex = 0;
			}
		}
	});
}

Within the HTML, the only tricky thing here is that you need to position the two IMG tags so they are on top of each other. For my purpose absolute positioning was okay. It may take alittle more work for relative positioning.

<html>
<head>
	<script type="text/javascript" src="js/prototype.js"></script>
	<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
	<script language="javascript">
             /* code from above goes here */
	</script>
</head>
<body onload="setInterval('switchImage()', 3000);">
	<img id="imageBehind" src="photo_01.jpg" style="position:absolute; top:0; left:0;" />
	<img id="imageFront" src="photo_02.jpg" style="position:absolute; top:0; left:0; display:none;" />
</body>
</html>

** update. thanks to Star for letting me know that the morph blinked in Firefox 2.0. I fixed the post and the example so it doesn’t do that anymore. **

Share and Enjoy:
  • Digg
  • del.icio.us
  • Reddit
  • StumbleUpon
  • Technorati
  • Slashdot
  • Tumblr
  • Twitter

This entry was posted on Sunday, November 16th, 2008 at 5:00 pm and is filed under web. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

4 Responses to “Javascript Image Morph”

  1. Mike Says:
    January 5th, 2009 at 5:43 am

    Hey, thanks for sharing this. Where do I get the 2 JS files? You need that on the web server for the script to work right?

    Thanks again!

  2. Tea Says:
    January 5th, 2009 at 11:17 am

    Good Question Mike,
    You need a few other js files as well, all part of the script.aculo.us framework. You can download it Here

    Also, I updated the post so you can download the full source of my example, which includes these javascript files. I would suggest using the official ones though since they may be more up to date.

  3. Mike Says:
    January 5th, 2009 at 8:39 pm

    Got it Tea! Thanks so much. Tried it on a test page. Couldn’t get it to work =(

  4. Mike Says:
    January 5th, 2009 at 8:43 pm

    Oops…forgot to post the link to the page:

    http://zophie.site90.net/test.php

Leave a Reply