Closed Thread Icon

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 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 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 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 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 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 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++) {
&nbsp;&nbsp;&nbsp;&nbsp;maxImages[i] = new Image();
&nbsp;&nbsp;&nbsp;&nbsp;maxImages[i].src = "image_" + i + ".gif";
}

// the main function
function maxSlideShow()&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;document.images["maxImg"].src = maxImages[arguments[0]].src;
&nbsp;&nbsp;&nbsp;&nbsp;if (arguments[0] == imagesNum) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setTimeout("maxSlideShow(1);", 1000);
&nbsp;&nbsp;&nbsp;&nbsp;} else {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setTimeout("maxSlideShow(" + (arguments[0]+1) + ");", 1000);
&nbsp;&nbsp;&nbsp;&nbsp;}
}

// -->
</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 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.

« BackwardsOnwards »

Show Forum Drop Down Menu