help with creating an image cycler

#1 July 20th, 2005, 12:29 PM

I'm doing an image cycler but can't figure out why it keeps getting hung up
on the third pic in the array? Here is what I have:

----------------------------------------------------------------------------
---------------------------------

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function pic_cycler () {
var pics = new Array
("pic1.jpg","pic2.jpg","pic3.jpg","pic4.jpg","pic5 .jpg");
var cycled_pic = document.getElementById("subject");
var pic_number = 0;
setInterval(cycle, 1000);

function cycle(){
if (pic_number < 4) {
pic_number = pic_number + 1;
cycled_pic.src = pics[pic_number];
}
else {
pic_number = 0;
}
}
}
</script>
</head>
<body>
<img id="subject" src="pic1.jpg" width="118" height="90"
onLoad="pic_cycler();">
</body>
</html>

----------------------------------------------------------------------------
---------------------------------

Help would be appeciated--thanks/

#2 July 20th, 2005, 12:29 PM

TheKeith said:[color=blue]
>
>I'm doing an image cycler but can't figure out why it keeps getting hung up
>on the third pic in the array? Here is what I have:
>[/color]

What do you mean by "getting hung up on the third pic"?
Does that image not display?
Once displayed, does that image never change?
Are there any error messages?

Do you intentionally never show pic1.jpg after the first time?

#3 July 20th, 2005, 12:29 PM

"Lee" <REM0VElbspamtrap@cox.net> wrote in message
news:bns6r901ohq@drn.newsguy.com...[color=blue]
> TheKeith said:[color=green]
> >
> >I'm doing an image cycler but can't figure out why it keeps getting hung[/color][/color]
up[color=blue][color=green]
> >on the third pic in the array? Here is what I have:
> >[/color]
>
> What do you mean by "getting hung up on the third pic"?
> Does that image not display?
> Once displayed, does that image never change?
> Are there any error messages?
>
> Do you intentionally never show pic1.jpg after the first time?[/color]

There are no error messages but when it reaches pic3.jpg, it just stays on
it--never goes to the next one; there's kind of a flicker when it reaches
pic3 as well. I see your point about never displaying pic1 after the first
time. I modified the script to look like this:

----------------------------------------------------------------------------
------------
<script type="text/javascript">
function pic_cycler () {
var pics = new Array
("pic1.jpg","pic2.jpg","pic3.jpg","pic4.jpg","pic5 .jpg");
var cycled_pic = document.getElementById("subject");
var pic_number = 0;
setInterval(cycle, 1000);

function cycle(){
if (pic_number < 4) {
pic_number = pic_number + 1;
}
else {
pic_number = 0;
}
cycled_pic.src = pics[pic_number];
}
}
</script>
----------------------------------------------------------------------------
------------

I assume it solves the problem of the script never returning to pic1, but I
wouldn't know, as it still gets hung up on pic3.

#4 July 20th, 2005, 12:29 PM

[color=blue]
> I assume it solves the problem of the script never returning to pic1, but[/color]
I[color=blue]
> wouldn't know, as it still gets hung up on pic3.[/color]

I just realizes it works in opera, but is also kind of messed up in mozilla.
I don't understand why this isn't running smoothly. I've been staring at the
script for the last half-hour, but I'm just stumped.

#5 July 20th, 2005, 12:29 PM

On Thu, 30 Oct 2003 19:19:06 -0500
"TheKeith" <no@spam.com> wrote:
<snip>[color=blue]
> I just realizes it works in opera, but is also kind of messed up in
> mozilla. I don't understand why this isn't running smoothly. I've been
> staring at the script for the last half-hour, but I'm just stumped.[/color]

Hi, Keith.

I don't know, but I suspect that it's because you are trying to change
images with the use of .src. I have no idea how different browsers cache
loaded images nor what happens when you only have one <img> to hold each
..jpg in turn. There may also be a timeing problem because you are
trying to load each image within the timer. I recommend that you try
preloading all images into your program before attempting to animate
them. I may have misunderstood what you are trying to do, but here is
how I would have done it. This works in Opera 7.21 and Netscape 7.1.
YMMV :-)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 strict//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

function pic_cycler () {

var names = [
'pic0',
'pic1',
'pic2',
'pic3',
'pic4'
];

loadImage = function(name) {
var img = document.createElement('img');
img.name = name;
img.id = name;
img.style.position = 'absolute';
img.style.left = '100px';
img.style.top = '100px';
img.style.width = '118px';
img.style.height = '90px';
img.style.visibility = 'hidden';
img.src = name +'.jpg';
document.body.appendChild(img);
return img;
};

var cycle = function() {
images[i].style.visibility = 'hidden';
i = (i + 1) % images.length;
images[i].style.visibility = 'visible';
};

var images = new Array;
for(n = 0; n < names.length; n++) {
images.push(loadImage(names[n]));
};

i = 0;
images[i].style.visibility = 'visible';
var interval_ID = setInterval(cycle, 1000);

};
</script>
</head>
<body onLoad = 'pic_cycler()'>
</body>
</html>

--
Life is an offensive, directed against the repetitious mechanism of the
Universe.
--Alfred North Whitehead (1861-1947)

#6 July 20th, 2005, 12:30 PM

"TheKeith" <no@spam.com> wrote in message
news:UYmdnWvXUZ7vNzyiRVn-hg@giganews.com...[color=blue]
>I just realizes it works in opera, but is also kind of messed up
>in mozilla. I don't understand why this isn't running smoothly.
>I've been staring at the script for the last half-hour, but I'm
>just stumped.[/color]

An observation; you have placed an onload handler on the IMG element in
the HTML that calls the pic_cycler function and sets off the images
swapping by having the cycler function called by setInterval. However,
when the SRC of the IMG element is changed and a new image loads isn't
that going to re-trigger the onload handler and re-call pic_cycler,
setting off another setInterval to call cycler at one second intervals?
And isn't that going to happen every time you load a new image by
setting the SRC of the IMG element?. Meaning an ever increasing number
of setInterval timers calling an ever increasing number of instances of
the cycle function and all of them trying to set the image to their own
idea of the current point in the image sequence.

"kind of messed up in mozilla" is probably the least you should expect.
Try setting:-

cycled_pic.onload = null;

- in the pic_cycler function to ensure that the onload handler is only
called when the first image is loaded.

Richard.

#7 July 20th, 2005, 12:30 PM

"Richard Cornford" <Richard@litotes.demon.co.uk> wrote in message
news:bnup60$587$1$8300dec7@news.demon.co.uk...[color=blue]
> "TheKeith" <no@spam.com> wrote in message
> news:UYmdnWvXUZ7vNzyiRVn-hg@giganews.com...[color=green]
> >I just realizes it works in opera, but is also kind of messed up
> >in mozilla. I don't understand why this isn't running smoothly.
> >I've been staring at the script for the last half-hour, but I'm
> >just stumped.[/color]
>
> An observation; you have placed an onload handler on the IMG element in
> the HTML that calls the pic_cycler function and sets off the images
> swapping by having the cycler function called by setInterval. However,
> when the SRC of the IMG element is changed and a new image loads isn't
> that going to re-trigger the onload handler and re-call pic_cycler,
> setting off another setInterval to call cycler at one second intervals?
> And isn't that going to happen every time you load a new image by
> setting the SRC of the IMG element?. Meaning an ever increasing number
> of setInterval timers calling an ever increasing number of instances of
> the cycle function and all of them trying to set the image to their own
> idea of the current point in the image sequence.
>
> "kind of messed up in mozilla" is probably the least you should expect.
> Try setting:-
>
> cycled_pic.onload = null;
>
> - in the pic_cycler function to ensure that the onload handler is only
> called when the first image is loaded.[/color]

YOU'RE RIGHT!!! That solved it. Instead of doing the
'cycled_pic.onload=null;', I just put the onload in the body tag. Problem
solved. Since I'm still learning js, so I don't like putting stuff in my
scripts that I don't understand. What exactly does 'cycled_pic.onload=null;'
mean. I know its intended effect, but exactly what is it doing and where is
it supposed to be placed? Thanks.

#8 July 20th, 2005, 12:31 PM

"TheKeith" <no@spam.com> wrote in message
news:qJidnRNKNs3hjT6iRVn-iA@giganews.com...
<snip>[color=blue]
>... . What exactly does 'cycled_pic.onload=null;' mean.
>I know its intended effect, but exactly what is it doing[/color]

It means - assign the value - null - to the - onload - property of the
object referred to by the cycled_pic local variable. cycled_pic has been
assigned a reference to the IMG element with the getElementById call.
That IMG element has had a function object created for it (based on the
code provided in the string value of your - onLoad - attribute in the
HTML) by the browser and a reference to that function object has been
assigned to the - onload - (all lowercase) property of the IMG element
so that the browser can call it as a method of the IMG element in
response to load events.

The statement replaces the reference to the load event handling function
with the - null - value and so prevents the browser from calling that
function in response to load events.
[color=blue]
>and where is it supposed to be placed? Thanks.[/color]

It would need to be used after a reference to the IMG element had been
assigned to the local variable and before the end of the function body.
It would probably make most sense to remove the reference to the load
handling function as soon as the reference to the element became
available.

Richard.

#9 July 20th, 2005, 12:31 PM

"Richard Cornford" <richard@litotes.demon.co.uk> wrote in message
news:bo1j40$ojs$1@hercules.btinternet.com...[color=blue]
> "TheKeith" <no@spam.com> wrote in message
> news:qJidnRNKNs3hjT6iRVn-iA@giganews.com...
> <snip>[color=green]
> >... . What exactly does 'cycled_pic.onload=null;' mean.
> >I know its intended effect, but exactly what is it doing[/color]
>
> It means - assign the value - null - to the - onload - property of the
> object referred to by the cycled_pic local variable. cycled_pic has been
> assigned a reference to the IMG element with the getElementById call.
> That IMG element has had a function object created for it (based on the
> code provided in the string value of your - onLoad - attribute in the
> HTML) by the browser and a reference to that function object has been
> assigned to the - onload - (all lowercase) property of the IMG element
> so that the browser can call it as a method of the IMG element in
> response to load events.
>
> The statement replaces the reference to the load event handling function
> with the - null - value and so prevents the browser from calling that
> function in response to load events.
>[color=green]
> >and where is it supposed to be placed? Thanks.[/color]
>
> It would need to be used after a reference to the IMG element had been
> assigned to the local variable and before the end of the function body.
> It would probably make most sense to remove the reference to the load
> handling function as soon as the reference to the element became
> available.
>
> Richard.[/color]

Got it. Thanks for the lesson Richard.

What is Bytes?

Popular Articles