Preserved Topic: Single White Idiot Seeks Simple Image Loop $Pages that link to <a href="https://ozoneasylum.com/backlink?for=18137" title="Pages that link to Preserved Topic: Single White Idiot Seeks Simple Image Loop" rel="nofollow" >Preserved Topic: Single White Idiot Seeks Simple Image Loop\$

Author	Thread
Wes Paranoid (IV) Mad Scientist From: Inside THE BOX Insane since: May 2000	posted 07-27-2001 08:08 I realize I may have asked about this once before some time ago, but can't seem to come up with it again. All I want to do is swap a series of JPGs in a loop, just like an animated GIF, with a variable speed. I have come to the conclusion that I just don't get JavaScript and therefore, must rely on you coding gurus to help me out. Gracci, gracias, thank you.
GRUMBLE Paranoid (IV) Mad Scientist From: Omicron Persei 8 Insane since: Oct 2000	posted 07-27-2001 10:44 first of all, i think this wont be so smooth like a gif-animation. you'll need a function like this: function swap() { document.images.myimage.src=imgarray[i]; i++; document.setTimeout('swap()',500); } where imgarray[] is the array of your images and i is a global variable starting with 0. make sure that you preload all your images and onload the function in the body tag. hth, although im sure i have a little error somewhere cause it's been a long time since my last javascript.
kretsminky Maniac (V) Inmate From: A little lower... lower... ahhhhhh, thats the spot Insane since: Jun 2000	posted 07-27-2001 12:08 Here's one we write in a DHTML class that I teach that works pretty spiffily... Name your images 1.jpg, 2.jpg, 3.jpg... Your x<10 means that there are 9 images, change that as necessary. This script also assumes that you put all images into a folder named images. You could use any folder name here or no folder at all... code: var slides = new Array(); for(x=1;x<10;x++) { slides[x] = new Image(); slides[x].src = "images/" +x+ ".gif"; } function slideShow() { var i = Math.round(Math.random()*8) + 1; document.show.src = slides[i].src; setTimeout("slideShow();" , 1000); } Now, insert the first image into your page and include a name="show" in the <img> tag. Also, in your <body> tag put on onLoad="slideShow();". That one should work for ya.
Wes Paranoid (IV) Mad Scientist From: Inside THE BOX Insane since: May 2000	posted 07-28-2001 08:31 Hmm, this just seems to randomize my images. And, incidentally, will eventually give me an error if I use any number of images less than ten. http://www.bigwaste.com/test/animation.html
Wes Paranoid (IV) Mad Scientist From: Inside THE BOX Insane since: May 2000	posted 07-28-2001 09:34 Nevermind -- I think I found what I was looking for. But, thanks for the help, guys!
mr.maX Maniac (V) Mad Scientist From: Belgrade, Serbia Insane since: Sep 2000	posted 07-28-2001 09:42 If you still need it, I wrote a very simple image rotator... This should go in the <HEAD> section: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-- ; // Written by mr.maX, http://www.max.co.yu/ // number of images imagesNum = 5; // preload images var maxImages = new Array(); for (i = 1; i <= imagesNum; i++) {     maxImages[i] = new Image();     maxImages[i].src = "image_" + i + ".gif"; } // the main function function maxSlideShow()    {     document.images["maxImg"].src = maxImages[arguments[0]].src;     if (arguments[0] == imagesNum) {         setTimeout("maxSlideShow(1);", 1000);     } else {         setTimeout("maxSlideShow(" + (arguments[0]+1) + ");", 1000);     } } // --> </SCRIPT> This is how <BODY> tag should look: <BODY ONLOAD="maxSlideShow(1);"> And put this where you want images to appear: <IMG SRC="image_1.gif" NAME="maxImg" WIDTH="150" HEIGHT="150" BORDER="0"> Enjoy!
Wes Paranoid (IV) Mad Scientist From: Inside THE BOX Insane since: May 2000	posted 07-29-2001 03:31 Actually, that looks like it might be a little slimmer than what I found. I may give it a shot instead, thanks.

Preserved Topic: Single White Idiot Seeks Simple Image Loop\$

Author

Thread

Wes
Paranoid (IV) Mad Scientist

From: Inside THE BOX
Insane since: May 2000

posted 07-27-2001 08:08

I realize I may have asked about this once before some time ago, but can't seem to come up with it again.

All I want to do is swap a series of JPGs in a loop, just like an animated GIF, with a variable speed. I have come to the conclusion that I just don't get JavaScript and therefore, must rely on you coding gurus to help me out.

Gracci, gracias, thank you.

GRUMBLE
Paranoid (IV) Mad Scientist

From: Omicron Persei 8
Insane since: Oct 2000

posted 07-27-2001 10:44

first of all, i think this wont be so smooth like a gif-animation.

you'll need a function like this:

function swap() {
document.images.myimage.src=imgarray[i];
i++;
document.setTimeout('swap()',500);
}

where imgarray[] is the array of your images and i is a global variable starting with 0.
make sure that you preload all your images and onload the function in the body tag.

hth, although im sure i have a little error somewhere cause it's been a long time since my last javascript.

kretsminky
Maniac (V) Inmate

From: A little lower... lower... ahhhhhh, thats the spot
Insane since: Jun 2000

posted 07-27-2001 12:08

Here's one we write in a DHTML class that I teach that works pretty spiffily...

Name your images 1.jpg, 2.jpg, 3.jpg... Your x<10 means that there are 9 images, change that as necessary. This script also assumes that you put all images into a folder named images. You could use any folder name here or no folder at all...

code:

var slides = new Array();

for(x=1;x<10;x++)

   {

   slides[x] = new Image();

   slides[x].src = "images/" +x+ ".gif";

   }



function slideShow()

   {

   var i = Math.round(Math.random()*8) + 1;

   document.show.src = slides[i].src;

   setTimeout("slideShow();" , 1000);

   }

Now, insert the first image into your page and include a name="show" in the <img> tag. Also, in your <body> tag put on onLoad="slideShow();".

That one should work for ya.

Wes
Paranoid (IV) Mad Scientist

From: Inside THE BOX
Insane since: May 2000

posted 07-28-2001 08:31

Hmm, this just seems to randomize my images. And, incidentally, will eventually give me an error if I use any number of images less than ten.
http://www.bigwaste.com/test/animation.html

Wes
Paranoid (IV) Mad Scientist

From: Inside THE BOX
Insane since: May 2000

posted 07-28-2001 09:34

Nevermind -- I think I found what I was looking for. But, thanks for the help, guys!

mr.maX
Maniac (V) Mad Scientist

From: Belgrade, Serbia
Insane since: Sep 2000

posted 07-28-2001 09:42

If you still need it, I wrote a very simple image rotator...

This should go in the <HEAD> section:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">

</SCRIPT>

This is how <BODY> tag should look:

<BODY ONLOAD="maxSlideShow(1);">

And put this where you want images to appear:

<IMG SRC="image_1.gif" NAME="maxImg" WIDTH="150" HEIGHT="150" BORDER="0">

Enjoy!

Wes
Paranoid (IV) Mad Scientist

From: Inside THE BOX
Insane since: May 2000

posted 07-29-2001 03:31

Actually, that looks like it might be a little slimmer than what I found. I may give it a shot instead, thanks.