473,320 Members | 1,947 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

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

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

Jul 23 '05 #1
8 7138
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","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>
Jul 23 '05 #2
Mick White <mw***********@rochester.rr.com> wrote in message
news:IX*****************@twister.nyroc.rr.com...
ma*****@hotmail.com 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.
--
Stephen Chalmers


Jul 23 '05 #3
Stephen Chalmers wrote:
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
Jul 23 '05 #4

<ma*****@hotmail.com> wrote in message
news:11**********************@f14g2000cwb.googlegr oups.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="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
Jul 23 '05 #5


Mick White <mw***********@rochester.rr.com> wrote in message
news:gf****************@twister.nyroc.rr.com...>
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?

--
Stephen Chalmers


Jul 23 '05 #6
Stephen Chalmers wrote:
Mick White <mw***********@rochester.rr.com> wrote in message
news:gf****************@twister.nyroc.rr.com...>
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
Jul 23 '05 #7
"Mick White" <mw***********@rochester.rr.com> wrote in message
news:Pp*****************@twister.nyroc.rr.com...
Stephen Chalmers wrote:
Mick White <mw***********@rochester.rr.com> wrote in message
news:gf****************@twister.nyroc.rr.com...>
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;
}

--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq

Jul 23 '05 #8
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
Jul 23 '05 #9

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
by: TrvlOrm | last post by:
HI There, I have been struggling with JavaScript code for days now, and this is my last resort! Please help... I am trying to create a JavaScript slide show with links for Next Slide,...
7
by: 7mary4 | last post by:
I am working on a kiosk for a museum, we will be using firefox as the browser, with windows, and a touch screen. We'd like to create a slide show of a small portfolio when the visitors click...
3
by: B Maxey | last post by:
I am storing images in a database and need a way to browse those files. I can load the files into an image list or whatever the control needs, but I need a control. It doesn't seem that any of...
4
by: Doug van Vianen | last post by:
Hi, I have the following coding on a web page. It causes two pictures (pic1.jpg and pic2.jpg) to show, one above the other and then when one clicks on the top picture is squeezes to the left...
22
by: bevoldjling | last post by:
Hi ! I need some help in putting together a website for our family gathering. Although I'm still pretty "green", I don't think what I need requires terribly advanced skills ...except for one...
4
by: Mike Chen | last post by:
Dear all, I made a c# program for my friend's wedding. It slides all photos in specified folder automatically. To roll the pictures smoothly I firstly scan and store all pictures in RAM and push...
3
by: Beamer | last post by:
Hi I am trying to build a roating slide effect in javascript. Basically, I have a list like below <ul id="slideShowCnt"> <li id="slide0"><img .../></li> <li id="slide0"><img .../></li> <li...
3
by: krzysztof.murkowski | last post by:
Hi, I have problem with JavaScript for gallery of images. From the overview page with thumbnails, after a click on the small picture, the subpage 'slide_show.html' is called, with a number of...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.