Monday, September 29, 2008

6 Simple steps to create a smooth light image rotator in Javascript

While building the new version of the website of the company am working in -eSpace technologies-
I came to a need to create an image rotator in javascript to rotate the images of us working in the company (you can check it for your self in the footer of www.espace.com.eg).

I simply used the scriptaculous library to add the fade-in fade-out effect on the pictures.But I had some major problems where the pictures enters in an infinite loop of continuous loading which seriously kills the website especially if the size of the pics is large.

So I came up with a solution in 6 simple steps to overcome those shortcomings as follows:

Step1:
Assemble all your photos you wanna rotate in a folder and number them from 1 to n (where n is total number of photos, in our example let it be 5) and name the folder any name ex."rotating_photos".

Step2
include the 2 files "prototype.js" and "scriptaculous.js" in your folder, and include their names in your HTML.
You can download them from http://script.aculo.us/downloads as a whole package.

Step3
In your HTML code replace:

<body>


by:

<body onload="photoGallery();">


The use of this line is to call the javascript function of rotating to initiate the rotating sequence.

Step4
Add this javascript lines to your HTML file or you can put it in a separate file and include it to your HTML file as you regularly do.
var turn = 0 ;
var r=2;

function hideAll(which)
{
if(which==1)
for(i=0 ;i<$('in_1').childNodes.length; i++)
$('in_1').childNodes[i].style.display = "none" ;
else
for(i=0 ;i<$('in_2').childNodes.length; i++)
$('in_2').childNodes[i].style.display = "none" ;
}
function photoGallery()
{
src = "rotating_photos/"+r+".jpg" ;
id = "pic_"+r ;

found=false;
for(i=0 ;i<$('in_2').childNodes.length; i++)
{
if($('in_2').childNodes[i].id==id)
{
found = true ;
break;
}
}
for(i=0 ;i<$('in_1').childNodes.length; i++)
{
if($('in_1').childNodes[i].id==id)
{
found = true ;
break;
}
}

if(turn==0){
if(found==false)
{
img = document.createElement("img");
img.src = src ;
img.id = id ;
$('in_2').appendChild(img);
hideAll(2) ;
$(id).show() ;
}
else{
hideAll(2) ;
$('in_2').appendChild( $(id) ) ;
$(id).show() ;
}
new Effect.Fade('in_1') ;
new Effect.Appear('in_2', { queue: 'end' }) ;
turn =1;
}
else{
if(found==false)
{
img = document.createElement("img");
img.src = src ;
img.id = id ;
$('in_1').appendChild(img);
hideAll(1) ;
$(id).show() ;
}
else{
hideAll(1) ;
$('in_1').appendChild( $(id) ) ;
$(id).show() ;
}
new Effect.Fade('in_2') ;
new Effect.Appear('in_1', { queue: 'end' }) ;
turn =0;
}

r+=1;
if(r>15) r=1;

var s=setTimeout("photoGallery()",3000);
}


Step5
<div id="photo-gallery">
<div id="in_1"><img src="rotating_photos/1.jpg" /></div>
<div id="in_2" style="display:none;"><img src="rotating_photos/2.jpg" /></div>
</div>


Step6
If you want to adjust the timing of rotating you can change the number 3000 in the last sentence in the function "photoGallery()" to be any number in milliseconds.