help with creating an image cycler

TheKeith

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/

Jul 20 '05 #1

Follow Post Reply

3584

Lee

TheKeith said:

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:

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?

Jul 20 '05 #2

TheKeith

"Lee" <RE**************@cox.net> wrote in message
news:bn*********@drn.newsguy.com...

TheKeith said:

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

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?

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.

Jul 20 '05 #3

TheKeith

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.

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.

Jul 20 '05 #4

Albert Wagner

On Thu, 30 Oct 2003 19:19:06 -0500
"TheKeith" <no@spam.com> wrote:
<snip>

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.

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)

Jul 20 '05 #5

Richard Cornford

"TheKeith" <no@spam.com> wrote in message
news:UY********************@giganews.com...

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.

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.

Jul 20 '05 #6

TheKeith

"Richard Cornford" <Ri*****@litotes.demon.co.uk> wrote in message
news:bn*******************@news.demon.co.uk...

"TheKeith" <no@spam.com> wrote in message
news:UY********************@giganews.com...
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.

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.

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.

Jul 20 '05 #7

Richard Cornford

"TheKeith" <no@spam.com> wrote in message
news:qJ********************@giganews.com...
<snip>

... . What exactly does 'cycled_pic.onload=null;' mean.
I know its intended effect, but exactly what is it doing
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.
and where is it supposed to be placed? Thanks.

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.

Jul 20 '05 #8

TheKeith

"Richard Cornford" <ri*****@litotes.demon.co.uk> wrote in message
news:bo**********@hercules.btinternet.com...

"TheKeith" <no@spam.com> wrote in message
news:qJ********************@giganews.com...
<snip>
... . What exactly does 'cycled_pic.onload=null;' mean.
I know its intended effect, but exactly what is it doing

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.
and where is it supposed to be placed? Thanks.

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.

Got it. Thanks for the lesson Richard.

Jul 20 '05 #9

help with creating an image cycler

This discussion thread is closed

Similar topics