click the picture, and bigger oh much bigger :)

Hi

i got this code from www.htmlgoodies.com that will make a slide show, but i would like to know how i can change this so when the user clicks on the picture, it will open the bigger version that i have in a new window.

thanks for the help

here is the code that i have

Code:

---


<SCRIPT LANGUAGE="JavaScript">

var num=1
img1 = new Image ()
img1.src = "information.gif"
img2 = new Image ()
img2.src = "interference.gif"
img3 = new Image ()
img3.src = "message.gif"
img4 = new Image ()
img4.src = "nervous.gif"

text1 = "Text for Picture One"
text2 = "Text for Picture Two"
text3 = "Text for Picture Three"
text4 = "Text for Picture Four"

function slideshowUp()
{
num=num+1
if (num==5)
{num=1}
document.mypic.src=eval("img"+num+".src")
document.joe.burns.value=eval("text"+num)
}

function slideshowBack()
{
num=num-1
if (num==0)
{num=4}
document.mypic.src=eval("img"+num+".src")
document.joe.burns.value=eval("text"+num)
}

</SCRIPT>

<!-- The Image and Form Codes are Below -->

<CENTER>
<IMG SRC="information.gif" NAME="mypic" BORDER=0 HEIGHT="100" WIDTH="100">
<p>

<FORM NAME="joe">
<INPUT TYPE="text" WIDTH="100" NAME="burns" VALUE="Text For Picture One">
</FORM>

<A HREF="JavaScript:slideshowBack()"> Back</A>

<A HREF="JavaScript:slideshowUp()"> Next</A>

---

Cheers

this line

<IMG SRC="information.gif" NAME="mypic" BORDER=0 HEIGHT="100" WIDTH="100">

change it to

Code:

---

<a href="infobig.gif" target="new-window"><IMG SRC="information.gif" NAME="mypic" BORDER=0 HEIGHT="100" WIDTH="100"></a>

---

other than that I don't see where else to do it. did you take this code from when you were running it or is this the actuall code. I would think that the <img src="information.gif"> would be a variable. so it would matter what picture it is.

cheers mate :)

oh and yes the name of the picture doesn't matter:)

Thanks once again for your help

one little problem, is that i would like it when you click on the picture that it opens the current one that you are looking at in a bigger view, all i can seem to make it do is open up one file bigger even if it is a different pic.

sorry if i was unclear

thanks :)

right i have worked out what i have to do, but i have no idea on how to do it.

right i need to create a new function that will find out what the currnet image is, from the information in the script and then the Href will be

Code:

---


<a href="JavaScript:Name of function()">..........

---

so what will the function look like, ?? :confused:

cheer for any help here

Quote:

---

Originally posted by zmerlinz
one little problem, is that i would like it when you click on the picture that it opens the current one that you are looking at in a bigger view, all i can seem to make it do is open up one file bigger even if it is a different pic.

sorry if i was unclear

thanks :)

---

ok I am a little confused. you want it to be able to have a link on the picture you are viewing and when you double click it it will open up a new window and that picture will be twice as big? that is what the link I showed you would do. but in order for it to work you have to have a bigger picture of the same one you clicked on. or since you are sizing it in the script I would make that picture the big one and resize it down to the 100x100 and then when you click on it it would open up in the new window. so what ever variable you use for the pic then that would be the same variable you would use in the href.

the only problem with that way is that when you resize a picture down from the original with 100x100 it may make it look grainy

sorry, i was a little unclear,

the pictures that i have are 640x480 when they are viewed in the slide show they are reduced to 320x240 (half the size), and what i want is if you are looking at picture 1, and you click on picture one you will see it full size in a new window, and if you look at picture 2, and click on it, it will open picture 2 at full size in a new window. all i seem able to do is open the same picture, ie. picture 1, even if i am viewing a different picture, this is not what i want, i want to be able to view what ever picture i am viewing in full size in a new window if i click on it.

sorry i was not clear :)

thanks for you help

so just make them the same variable.

Code:

---

<a href="variable" target="new-window"><IMG SRC="variable" NAME="mypic" BORDER=0 HEIGHT="100" WIDTH="100"></a>

---

See that i what i thought, but what ever i put in the href it will only open that file, but the img src is 01.jpg and that changes each time, i think that it changes by using one of the functions, so i was trying to make one of the functions so i could use this to change the href.

here is the code that i have got, so you can see what i mean, you will have to add some pictures in the same directory called
01.jpg
02.jpg
03.jpg
04.jpg
05.jpg

hope this clears things up,

cheers

Can't anyone help me ??

please :( :eek: