website code to show large and full size image on click

[sevenz24]

So i have my images set up like this : http://cgi.ebay.com/Tippmann-98-paintBall-Marker-Gun-Paint-Ball_W0QQitemZ250274334261QQihZ015QQcategoryZ47248 QQssPageNameZWDVWQQrdZ1QQcmdZViewItem

Scroll down to the bottom and you see several images, One large one and then several smaller ones, when you click on the smaller ones it places a larger version of that picture in place of where the other larger picture was, well i use this method on my website but what i want to do is make it so that when you click on the smaller image and it comes up in the larger image spot, you can click on the larger image also to make it into an even bigger supersized picture, but i cant simply link the large picture because it needs to change every time for each smaller picture, so what i need it some type of code that changes the background URL of the bigger image every time you click on the smaller image, while still letting it function properly. So i need someway of being able to do this. Like everytime you click the smaller image, a large one appears in the place of the large image and also somehow makes it so that when you click the large image it also takes you to a super sized image, either by way of URL or some other form.

Any help is greatly appreciated. Sorry for the long post but it is kind of hard for me to explain.

[acoder]

The src property of the image will contain the URL to the full-size image. Use that to show the full-size image onclick, e.g.

<img ... src="whatever.png" onclick="location.href=this.src;">

or

<a href="original.png" onclick="this.href=document.getElementById('largeImg').src;"><img id="largeImg" src="whatever.png"></a>

or you could change the href when you change the large image onclick of the small image.

[sevenz24]

Thank you very much for your reply, tho i am not sure how to insert your code into mine since i already have an onclick event in my code, this is the code i'm using currently for my picture setup:

 
<tr>           
<td height="399"><img src="http://dadetrader.com/Pics/PICT1591.JPG" name="productimages_" width="486" height="365" border="0" align="top"/></a></td>         
</tr>         
<tr>           
 
<td height="99" align="center" valign="top">
 
<a href=#productimages onclick="productimages_.src='http://dadetrader.com/pics/PICT1591.JPG'" onfocus="blur()"><img src="http://dadetrader.com/thumbnails/PICT1591.JPG" width="156" height="117" border="0"/></a>
 
<a href=#productimages onclick="productimages_.src='http://dadetrader.com/pics/PICT1592.JPG'" onfocus="blur()"><img src="http://dadetrader.com/thumbnails/PICT1592.JPG" width="156" height="117" border="0"/></a>
 
<a href=#productimages onclick="productimages_.src='http://dadetrader.com/pics/PICT1593.JPG'" onfocus="blur()"><img src="http://dadetrader.com/thumbnails/PICT1593.JPG" width="156" height="117" border="0"/</a><br></td>         
 
</tr>

(i spaced out the code so you can see it better)

Pretty much when i click on the 1591, 1592, 1593 small image links it then also shows up in the large image location, but what i want is after i do click on the small image link, and it does its magic, i also want the big image to now be clickable to show a supersized image, and obviously this has to change for each small image link i click. I was thinking the only way of doing this is by using some complicated javascript function or something to be able to use 2 onclick functions in 1 link/image or something like that, dont know.

[acoder]

Try replacing the large image with

<a href="http://dadetrader.com/Pics/PICT1591.JPG" onclick="this.href=document.getElementById('largeImg').src;"><img id="largeImg" src="http://dadetrader.com/Pics/PICT1591.JPG" ...></a>

[sevenz24]

ok so lets say my supersized image URL would be http://www.dadetrader.com/picsbg/pict1588.jpg, and ETC, how would i use that with this code?
also ultimately i am going to incorporate a popup window with the supersized image, so when you click the large image you get a popup with the supersized image.

[acoder]

The code would be the same or similar. The onclick changes the link href to the current source of the image (which will have been changed from clicking the small images).

To open a popup window, use window.open().

[sevenz24]

Hmm, this doesn't make much sense and is very confusing, nor does it solve the problem I'm asking at all, very unhelpful, oh well thanks anyway I will try another forum.

[acoder]

I can't see why you think that. If you follow what I've suggested, it should solve your problem. Have you tried incorporating the changes into your code? You've not shown me what you've attempted with the code given.

If there's a part of the code that you don't understand, I could explain it to you if you want. If JavaScript is the problem, perhaps you should be consulting a tutorial first. Sure, you may get someone doing all the work for you on another forum, but that wouldn't help much by way of learning. Hope that helps.

[sevenz24]

I can't see why you think that. If you follow what I've suggested, it should solve your problem. Have you tried incorporating the changes into your code? You've not shown me what you've attempted with the code given.

If there's a part of the code that you don't understand, I could explain it to you if you want. If JavaScript is the problem, perhaps you should be consulting a tutorial first. Sure, you may get someone doing all the work for you on another forum, but that wouldn't help much by way of learning. Hope that helps.

Yea I tried putting your code in, in many different ways, but it just doesnt work out the way I want it to.

I need the big picture to link me to http://www.dadetrader.com/picsbg/pict124.jpg (for example), changing that link everytime when clicking on the smaller picture, but it only links to the same picture opening up another page, which is what the smaller pictures are linked to.... but i cant change the smaller links because then it wouldnt change the large picture at all in the first place.

Also, Its much easier to learn when I do have the entire code, It lets me understand how it works and how I could change it and mend it next time to use it in another way for something different, instead of having no idea what your telling me or no idea of seeing how what your telling me could work... which right now im sure so far what you have showed me wont work the way I need it to, and the popup part is not a problem forget about that, if we could get it to actually link to the supersized image in the first place then that would be nice (which is the whole point).

[acoder]

OK, let's try again. In your code in post #3, replace line 2 with:

 
<td height="399"><a href="http://dadetrader.com/Pics/PICT1591.JPG" onclick="this.href=document.getElementById('largeImg').src;"><img id="largeImg" src="http://dadetrader.com/Pics/PICT1591.JPG" name="productimages_" width="486" height="365" border="0" align="top"/></a></td>

When the large image src property is changed, then the link href hasn't changed yet (though you could add that to each small image onclick, but let's try to keep things simple), so what the link onclick does is change the link href to point to whatever the current src of the large image is. Try it out and see what happens.

[sevenz24]

OK, let's try again. In your code in post #3, replace line 2 with:

 
<td height="399"><a href="http://dadetrader.com/Pics/PICT1591.JPG" onclick="this.href=document.getElementById('largeImg').src;"><img id="largeImg" src="http://dadetrader.com/Pics/PICT1591.JPG" name="productimages_" width="486" height="365" border="0" align="top"/></a></td>

When the large image src property is changed, then the link href hasn't changed yet (though you could add that to each small image onclick, but let's try to keep things simple), so what the link onclick does is change the link href to point to whatever the current src of the large image is. Try it out and see what happens.

Takes me to another page with the same picture.

Also, something a little more important if you could help me with, is i want to add a "Ask A Question" button or link to each page on my site that will have a product on it, i have a working form and form script that people can enter there name email and message and then is sent to my email, but i need a way to somehow make it so that it transmits something letting me know what page, product or URL the form was submitted, clicked from or anything just letting me know in anyway that could lead me back to the product.

[acoder]

Takes me to another page with the same picture.

I made an (incorrect, as it transpires) assumption based on what you gave that by super-sized you meant a full size image and that the small and large images were smaller versions of this full-sized image. To answer this question, I'm going to need more information, i.e. how are you connecting these super-size images with their smaller counterparts, e.g. for PICT1591.JPG, what's the super-size version, same for PICT1592.JPG, PICT1593.JPG, etc.

Also, something a little more important if you could help me with, is i want to add a "Ask A Question" button or link to each page on my site that will have a product on it, i have a working form and form script that people can enter there name email and message and then is sent to my email, but i need a way to somehow make it so that it transmits something letting me know what page, product or URL the form was submitted, clicked from or anything just letting me know in anyway that could lead me back to the product.

I've split off this question into another thread since it doesn't relate to the question asked in this thread.

[sevenz24]

I made an (incorrect, as it transpires) assumption based on what you gave that by super-sized you meant a full size image and that the small and large images were smaller versions of this full-sized image. To answer this question, I'm going to need more information, i.e. how are you connecting these super-size images with their smaller counterparts, e.g. for PICT1591.JPG, what's the super-size version, same for PICT1592.JPG, PICT1593.JPG, etc.

well the whole point of this thread is to find a way to do that, what i was trying to do it to somehow change the link of the "large image" everytime i click on the smaller ones leading me to the supersized image URL.

let me try and give you an example..
'
___________
|..................|
|..................|
|__________|



___ ___ ___
|___| |___| |___|

ok lets say the larger box is the large img, and the smaller boxes are the smaller box.... each time i click a small image, its image gets placed at the large images spot, now what im trying to do is make it so also when i click on it, it changes the URL of the large image, so that when i click it i can link it to a supersized version of the image, which obviously needs to change for each small image.

[acoder]

what i was trying to do it to somehow change the link of the "large image" everytime i click on the smaller ones leading me to the supersized image URL.

This was my question. What are these super-sized image URLs? You can map these images using arrays/objects, e.g.

var map = new Object;
map[largeSrc] = supersizeSrc; // replace these with strings...
 

then use this.href=map[document.getElementById('largeImg').src]