Multiple image rotate

11/04/2009 8:11 am | #1 edz_2392925

Hi, I am using Dreamweaver CS3 and I wanted to create a rotating image set using Javascript.

I found a good tutorial that adapts the Swap Image behaviour to achieve what I wanted:

article.cfm?cid=651FF

It works perfectly; however, I now want to add another seperate rotating image set into the same page.

Is there an easy way to do this with the code already created? or should I use a different method alltogether?

11/04/2009 4:53 pm | #2 Jason ByrnesWebAssist

this tutorial cannot be easily updated for 2 serrate sets of random images on the same page.

You will have to use a different method.

I was not able to find one to accommodate two random images on the same page doing a quick google search though.

11/05/2009 8:22 am | #4 Ray BorduinWebAssist

Here is a little script I wrote that will do the trick... It does more than rotate because it fades in and out, but you can always set the number of steps to 1 and the hide gap to 0 to get a straight image swap.
You can build up an array of the images and preload them like I do in the head, then use that array as the images to rotate.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />
<title>Untitled Document</title>
<script>
function fade(ImgID,ImgArray,StartAt, Steps, StartPos, Direction, Gap, ShowGap, HideGap){
    Steps=(Steps<1 || Steps>100)?15:Math.round(Steps);
    Gap=(Gap<1)?75:Math.round(Gap);
    ShowGap=(ShowGap<1)?75:Math.round(ShowGap);
    HideGap=(HideGap<1)?75:Math.round(HideGap);
    if(StartAt==ImgArray.length){
		StartAt=0;
	}
   var ImgObj = document.getElementById(ImgID);
   ImgObj.src=ImgArray[StartAt];
   m=Math.round(StartPos/Steps*100);
  ImgObj.style.filter="alpha(opacity="+m+")";
  ImgObj.style.MozOpacity=m/100;
  ImgObj.style.Opacity=m/100;
  StartPos+=(Direction=="in")?1:(-1);
  if(StartPos==Steps+1){
	StartPos-=2;
	Direction="out";
	setTimeout("fade('"+ImgID+"',Array('"+String(ImgArray).replace(/,/g,"','")+"'),"+StartAt+","+Steps+","+StartPos+",'"+Direction+"',"+Gap+","+ShowGap+","+HideGap+")",ShowGap);
	}
    else if(StartPos<=0){
		StartPos =0;
		Direction="in";
		StartAt++;
		setTimeout("fade('"+ImgID+"',Array('"+String(ImgArray).replace(/,/g,"','")+"'),"+StartAt+","+Steps+","+StartPos+",'"+Direction+"',"+Gap+","+ShowGap+","+HideGap+")",HideGap);
	}
    else {
		setTimeout("fade('"+ImgID+"',Array('"+String(ImgArray).replace(/,/g,"','")+"'),"+StartAt+","+Steps+","+StartPos+",'"+Direction+"',"+Gap+","+ShowGap+","+HideGap+")",Gap);
	}
}


// create image array
var img_array=new Array();
img_array[0]="image/page_00.jpg";
img_array[1]="image/page_01.jpg";
img_array[2]="image/page_02.jpg";
img_array[3]="image/page_03.jpg";
img_array[4]="image/page_04.jpg";
img_array[5]="image/page_05.jpg";

// preload images
var myimages = new Array();
for (x=0; x<img_array.length; x++){
  myimages[x] = new Image();
  myimages[x].src = img_array[x];
}


// set arguments
var imageID = "fader";
var steps=1;			// How many steps would you like for fading?. Max is 100, min is 1.
var gap=75;			// How long would you like the delay between each frame (in 1/1000 ths of a second)? Min is 1, max should be no more than 10000 (10 seconds).
var show_img_gap=3000;		// How long would you like to show the image for before it starts to fade out again.
var hide_img_gap=0;		// How long would you like to hide the image for before it starts to fade in again.
n=steps;
img_num=0;
fading="out";


var secondimageID = "secondfader";
secondimg_num=3;

</script>


</head>

<body onload="setTimeout('fade(imageID,img_array,img_num,steps,n,fading,gap,show_img_gap,hide_img_gap)',show_img_gap); setTimeout('fade(secondimageID,img_array,secondimg_num,steps,n,fading,gap,show_img_gap,hide_img_gap)',show_img_gap)">

<img id="fader" src="image/page_00.jpg" />


<img id="secondfader" src="image/page_02.jpg" />

</body>
</html>

Did this help? Tips are appreciated...

4/23/2013 9:56 am | #6 anonymous

Image fade in & out

Hi Ray,

I copy and pasted the script into Dreamweaver CS3, however the images display like a slideshow with no fade in or out features. Perhaps I am not setting the // set arguments correctly?

var imageID = "fader";
var steps=1; // How many steps would you like for fading?. Max is 100, min is 1.
var gap=1; // How long would you like the delay between each frame (in 1/1000 ths of a second)? Min is 1, max should be no more than 10000 (10 seconds).
var show_img_gap=7000; // How long would you like to show the image for before it starts to fade out again.
var hide_img_gap=0; // How long would you like to hide the image for before it starts to fade in again.
n=steps;
img_num=0;
fading="out";

Please let me know,

Thanks!

5/08/2013 11:11 am | #8 anonymous

Loading time

Hi there,

Thanks for the information on the frame delay.

I have another problem, when I set the

var show_img_gap=6000

it takes 6 seconds to load the first image, if I set it to

var show_img_gap=1000

it takes one second to load the first image.

Is there a way to load the image immediately? I tried reducing the images to 50-60 KB - it did not make a difference.
I would like to have the images display for 6 secs before they change.

5/08/2013 11:48 am | #9 Jason ByrnesWebAssist

what ever you set the gap to will be the load time. the gap is the frame delay, how long it takes to load the frame. that frame delay applies to initial load as well. If you want to display the images instantly, use a low gap value like 1.

the show_img_gap is the time between loading a new frame.

first the gap occurs to load the frame. then the show_img_gap occurs to pause before firing the gap again to load the new frame.

6/04/2013 12:53 am | #10 anonymous

Wow, nice discussion.I am working on an app with image rotation function inserted.And I got image rotate source code on GOOGLE, does it can be connected with Dreamweaver CS3 ?

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

Multiple image rotate

11/04/2009 8:11 am | #1 edz_2392925