JavaScript slide show: Click the picture and go to next picture?

[marslee]

I know how to use buttons to go to the next and previous picture in
slide show, but i want to change it so when the user clicks the picture
instead of button, the script shows the next phicture.

How can i change it?
Any suggesstions?

Thanks!

<script language="JavaS cript">
<!--
var x = 1
images = new Array
images[1] = "images/AidaL.jpg"
images[2] = "images/mclaren10S.jpg"
images[3] = "images/lotus6S.jpg"
images[4] = "images/SENNAS.jpg"
images[5] = "images/arytonsennaS.jp g"
//add additional images here as required

function backimg(){
if (x != 1){
document.image1 .src = images[x-1]
x-- }
}
function fwdimg(){
if (x != 5){ //Change the 5 here to your total number
document.image1 .src = images[x+1]
x++ }
}
// -->
</script>

<IMG SRC="images/AidaL.jpg" name="image1" border=0><br>
<a href="" onClick="backim g();return false;"><img src=sback.gif
border=0 width=30 height=16></a>
<A href="" onClick="fwdimg (); return false;"><img src="ssfwd.gif"
border=0 width=30 height=16></a>
--------------------------------------------------------------------------------

[Mick White]

ma*****@hotmail .com wrote:

I know how to use buttons to go to the next and previous picture in
slide show, but i want to change it so when the user clicks the picture
instead of button, the script shows the next phicture.

How can i change it?
Any suggesstions?

You may need to preload images:

<script type="text/javascript">
x = -1;
images =["ann.jpg","dave .jpg","joe.jpg" ,"gary.jpg","le e.jpg"]

function stepimg(){
if(x==images.le ngth)x=-1;
document.image1 .src =images[x++];
}

</script>
<a href="#" onClick="stepim g()">
<img src="ann.jpg" name="image1" width="120" height="150" border=0>
</a>

[Stephen Chalmers]

Mick White <mw***********@ rochester.rr.co m> wrote in message
news:IX******** *********@twist er.nyroc.rr.com ...

ma*****@hotmail .com wrote:

<script type="text/javascript">
x = -1;
images =["ann.jpg","dave .jpg","joe.jpg" ,"gary.jpg","le e.jpg"]

function stepimg(){
if(x==images.le ngth)x=-1;
document.image1 .src =images[x++];
}

I don't want to be negative in this 'post', but perhaps you would you like
to revise that.
--
Stephen Chalmers

[Mick White]

Stephen Chalmers wrote:

Mick White wrote

<script type="text/javascript">
x = -1;
images =["ann.jpg","dave .jpg","joe.jpg" ,"gary.jpg","le e.jpg"]

function stepimg(){
if(x==images. length)x=-1;
document.imag e1.src =images[x++];
}

I don't want to be negative in this 'post', but perhaps you would you like
to revise that.
--

It should work, but I would preload the images.
Mick

[J. J. Cale]

<ma*****@hotmai l.com> wrote in message
news:11******** **************@ f14g2000cwb.goo glegroups.com.. .

I know how to use buttons to go to the next and previous picture in
slide show, but i want to change it so when the user clicks the picture
instead of button, the script shows the next phicture.

How can i change it?
Any suggesstions?

Thanks!

<script language="JavaS cript">
<!--
var x = 1
images = new Array
images[1] = "images/AidaL.jpg"
images[2] = "images/mclaren10S.jpg"
images[3] = "images/lotus6S.jpg"
images[4] = "images/SENNAS.jpg"
images[5] = "images/arytonsennaS.jp g"
//add additional images here as required

function backimg(){
if (x != 1){
document.image1 .src = images[x-1]
x-- }
}
function fwdimg(){
if (x != 5){ //Change the 5 here to your total number
document.image1 .src = images[x+1]
x++ }
}
// -->
</script>

<IMG SRC="images/AidaL.jpg" name="image1" border=0><br>
<a href="" onClick="backim g();return false;"><img src=sback.gif
border=0 width=30 height=16></a>
<A href="" onClick="fwdimg (); return false;"><img src="ssfwd.gif"
border=0 width=30 height=16></a>
-------------------------------------------------------------------------- ------

I would consider if this would be 'expected' behavior. If the user is used
to clicking a picture to enlarge it or select it this might be annoying.
Maybe use arrows or img controls to move forward or backwards. Like you
would see in most slide show and image viewers.
Jimbo

[Stephen Chalmers]

Mick White <mw***********@ rochester.rr.co m> wrote in message
news:gf******** ********@twiste r.nyroc.rr.com. ..>

It should work, but I would preload the images.
Mick x = -1;
images =["ann.jpg","dave .jpg","joe.jpg" ,"gary.jpg","le e.jpg"]

function stepimg(){

if(x==images. length)x=-1;

document.image 1.src =images[x++];
}

What is the value of x in the subscript?

--
Stephen Chalmers

[Mick White]

Stephen Chalmers wrote:

Mick White <mw***********@ rochester.rr.co m> wrote in message
news:gf******** ********@twiste r.nyroc.rr.com. ..>

It should work, but I would preload the images.
Mick

x = -1;
images =["ann.jpg","dave .jpg","joe.jpg" ,"gary.jpg","le e.jpg"]

function stepimg(){

if(x==images .length)x=-1;

document.imag e1.src =images[x++];
}

What is the value of x in the subscript?

document.image1 .src =images[++x];

Would be better...
Mick

[Grant Wagner]

"Mick White" <mw***********@ rochester.rr.co m> wrote in message
news:Pp******** *********@twist er.nyroc.rr.com ...

Stephen Chalmers wrote:

Mick White <mw***********@ rochester.rr.co m> wrote in message
news:gf******** ********@twiste r.nyroc.rr.com. ..>

It should work, but I would preload the images.
Mick

x = -1;
images =["ann.jpg","dave .jpg","joe.jpg" ,"gary.jpg","le e.jpg"]

function stepimg(){

if(x==image s.length)x=-1;

document.ima ge1.src =images[x++];
}

What is the value of x in the subscript?

document.image1 .src =images[++x];

Would be better...
Mick

Taking your modification to the existing source:

x = -1;
images = ["ann.jpg","dave .jpg","joe.jpg" ,"gary.jpg","le e.jpg"];
function stepimg()
{
if (x == images.length)
{
x = -1;
}

document.image1 .src = images[++x];
}

We now have a situation where a call to stepimg() will attempt to access
images[5], which returns undefined. You'd need to modify the condition
as: if (x == images.length - 1) in order to avoid this. I'm also not a
big fan of global variables to track the next image, I'd prefer the
images Array to "know" it's next position. So something like this would
be preferable (to me):

var images = ["ann.jpg", "dave.jpg", "joe.jpg", "gary.jpg", "lee.jpg"];
function stepimg()
{
document.images['image1'].src = images[images.nextImag e =
images.nextImag e || 0];
images.nextImag e = (images.nextIma ge + 1) % images.length;
}

--
Grant Wagner <gw*****@agrico reunited.com>
comp.lang.javas cript FAQ - http://jibbering.com/faq

[Mick White]

Grant Wagner wrote:
[snip]
So something like this would

be preferable (to me):

var images = ["ann.jpg", "dave.jpg", "joe.jpg", "gary.jpg", "lee.jpg"];
function stepimg()
{
document.images['image1'].src = images[images.nextImag e =
images.nextImag e || 0];
images.nextImag e = (images.nextIma ge + 1) % images.length;
}

Elegant...
Thanks.
Mick