help with creating an image cycler

**Lee** · Jul 20 '05, 11:29 AM

Re: help with creating an image cycler

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?

**TheKeith** · Jul 20 '05, 11:29 AM

Re: help with creating an image cycler

"Lee" <REM0VElbspamtr ap@cox.net> wrote in message
news:bns6r901oh q@drn.newsguy.c om...[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","pi c2.jpg","pic3.j pg","pic4.jpg", "pic5.jpg") ;
var cycled_pic = document.getEle mentById("subje ct");
var pic_number = 0;
setInterval(cyc le, 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.

**TheKeith** · Jul 20 '05, 11:29 AM

Re: help with creating an image cycler

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

**Albert Wagner** · Jul 20 '05, 11:29 AM

Re: help with creating an image cycler

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>Untitl ed 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.create Element('img');
img.name = name;
img.id = name;
img.style.posit ion = 'absolute';
img.style.left = '100px';
img.style.top = '100px';
img.style.width = '118px';
img.style.heigh t = '90px';
img.style.visib ility = 'hidden';
img.src = name +'.jpg';
document.body.a ppendChild(img) ;
return img;
};

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

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

i = 0;
images[i].style.visibili ty = 'visible';
var interval_ID = setInterval(cyc le, 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)

**Richard Cornford** · Jul 20 '05, 11:30 AM

Re: help with creating an image cycler

"TheKeith" <no@spam.com> wrote in message
news:UYmdnWvXUZ 7vNzyiRVn-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.onlo ad = null;

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

Richard.

**TheKeith** · Jul 20 '05, 11:30 AM

Re: help with creating an image cycler

"Richard Cornford" <Richard@litote s.demon.co.uk> wrote in message
news:bnup60$587 $1$8300dec7@new s.demon.co.uk.. .[color=blue]
> "TheKeith" <no@spam.com> wrote in message
> news:UYmdnWvXUZ 7vNzyiRVn-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.onlo ad = 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.onl oad=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.onl oad=null;'
mean. I know its intended effect, but exactly what is it doing and where is
it supposed to be placed? Thanks.

**Richard Cornford** · Jul 20 '05, 11:31 AM

Re: help with creating an image cycler

"TheKeith" <no@spam.com> wrote in message
news:qJidnRNKNs 3hjT6iRVn-iA@giganews.com ...
<snip>[color=blue]
>... . What exactly does 'cycled_pic.onl oad=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.

**TheKeith** · Jul 20 '05, 11:31 AM

Re: help with creating an image cycler

"Richard Cornford" <richard@litote s.demon.co.uk> wrote in message
news:bo1j40$ojs $1@hercules.bti nternet.com...[color=blue]
> "TheKeith" <no@spam.com> wrote in message
> news:qJidnRNKNs 3hjT6iRVn-iA@giganews.com ...
> <snip>[color=green]
> >... . What exactly does 'cycled_pic.onl oad=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.

help with creating an image cycler

help with creating an image cycler

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment