Below is all the code needed for this simple picture zoom animation.

Source file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.
org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta name="Author" content="Bruce Myles" />
<link href="css/jquery_picture_zoom.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>

<script>
var counter=1;
var picture_width=300;
var picture_height=225;
var picture_center_top =  picture_height/2;
var picture_center_left = picture_width/2;
$(document).ready(function() {
   // do stuff when DOM is ready

   $('#zoom_image_1').css("top",picture_center_top);
   $('#zoom_image_1').css("left",picture_center_left);
   $('#zoom_image_2').css("top",picture_center_top);
   $('#zoom_image_2').css("left",picture_center_left);
   $('#zoom_image_3').css("top",picture_center_top);
   $('#zoom_image_3').css("left",picture_center_left);
   $('#zoom_image_4').css("top",picture_center_top);
   $('#zoom_image_4').css("left",picture_center_left);
   $('#zoom_image_5').css("top",picture_center_top);
   $('#zoom_image_5').css("left",picture_center_left);
   animate_banner();
 });
 
function animate_banner()
{	
	if(counter==1)
	{		
		counter=0;
		//I want the image coming into view to be on top during the transition, so I set image 5 to the 
		bottom

		$('#zoom_image_5').css("z-index","0");
		$('#zoom_image_5').animate({width:0,top:picture_center_top,left:picture_center_left},6000);
		$('#zoom_image_1').animate({width:300,top:0,left:0},6000, function () {counter=2;animate_banner();}
    )
	}
	if(counter==2)
	{
		counter=0;
		$('#zoom_image_1').animate({width:0,top:picture_center_top,left:picture_center_left},6000);
		$('#zoom_image_2').animate({width:300,top:0,left:0},6000, function () {counter=3;animate_banner();}
    )
	}
	if(counter==3)
	{
		counter=0;
		$('#zoom_image_2').animate({width:0,top:picture_center_top,left:picture_center_left},6000);
		$('#zoom_image_3').animate({width:300,top:0,left:0},6000, function () {counter=4;animate_banner();}
    )
	}
	if(counter==4)
	{
		counter=0;
		$('#zoom_image_3').animate({width:0,top:picture_center_top,left:picture_center_left},6000);
		$('#zoom_image_4').animate({width:300,top:0,left:0},6000, function () {counter=5;animate_banner();}
    )
	}
	if(counter==5)
	{
		counter=0;
		//I want the image coming into view to be on top during the transition, so I set image 5 to the 
		top

		$('#zoom_image_5').css("z-index","2");
		$('#zoom_image_4').animate({width:0,top:picture_center_top,left:picture_center_left},6000);
		$('#zoom_image_5').animate({width:300,top:0,left:0},6000, function () {counter=1;animate_banner();}
    )
	}
}
</script>
</head>

<body>
<div class="zoom_fade_image">
    <img id="zoom_image_1" class="zoom_image" src="images/ps3/1.jpg" />
    <img id="zoom_image_2" class="zoom_image" src="images/ps3/2.jpg" />
    <img id="zoom_image_3" class="zoom_image" src="images/ps3/3.jpg" />
    <img id="zoom_image_4" class="zoom_image" src="images/ps3/4.jpg" />
    <img id="zoom_image_5" class="zoom_image" src="images/ps3/5.jpg" /> 
</div>
 
</body>
</html>










  MylesWebDesign.co.uk   ©2010