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="JavaScript">
<!--
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.jpg"
//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="backimg();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]

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","lee.jpg"]

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

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

 

[Stephen Chalmers]

(e-mail address removed) wrote:


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

function stepimg(){
if(x==images.length)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.

 

[Mick White]

Mick White wrote

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

function stepimg(){
if(x==images.length)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.
--

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

 

[J. J. Cale]

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="JavaScript">
<!--
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.jpg"
//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="backimg();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]

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

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

function stepimg(){

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

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

What is the value of x in the subscript?

 

[Mick White]

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

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

function stepimg(){

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

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

What is the value of x in the subscript?

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

Would be better...
Mick

 

[Grant Wagner]

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

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

function stepimg(){

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

document.image1.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","lee.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.nextImage =
images.nextImage || 0];
images.nextImage = (images.nextImage + 1) % images.length;
}

 

[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.nextImage =
images.nextImage || 0];
images.nextImage = (images.nextImage + 1) % images.length;
}

Elegant...
Thanks.
Mick