Site address: lonecoast.com
I am trying to make a product display that uses thumbnail images on one side of the page and a large close up of the image when a thumbnail is clicked that will show a large version of the thumbnail. I found a site that explained the code for this, and I got it to work. The code is this:
<head>
<script type="text/javascript">
function changeIt(imageName,objName)
{
var obj = document.getElementById(objName);
var imgTag = "<img src='"+imageName+"' border='0' />";
obj.innerHTML = imgTag;
return;
}
</script>
</head>
<body>
<div id="image1">
<img src="product1.png">
</div>
<a id="one" href="#" onclick="changeIt('product1.png','image1');"> <src="product1thumbnail.png" /></a>
<a id="two" href="#" onclick="changeIt('product2.png','image1');"> <src="product 2thumbnail.png" /></a>
</body>
So, click image "product1thumbnail.png" and the other image switches to product1.png; click "product2thumbnail.png" and the other image changes to product2.png.
This works great. But now the next step is I want the enlarged view of the product to link to its respective site page. How do I make product1.png and product2.png clickable, so that product1.png links to product1.html and product2.png links to product2.html?
Full Version: Creating link in a web "slide show"?
Add the link to the markup that is injected, here:
You need another variable to hold the URL for the link that you can pass from the onclick as you do with the image URL.
CODE
var imgTag = "<img src='"+imageName+"' border='0' />";
You need another variable to hold the URL for the link that you can pass from the onclick as you do with the image URL.
Thanks for the response.
Could you show me an example of how to do this? I tried putting the link around the part you mentioned:
var imgTag = "<a href="product1.html"><img src='"+imageName+"' border='0' /></a>";
But then the main image wouldn't change when I clicked the thumbnails. I'm sure that's not what you meant when you said add the link to this section of markup. Could you explain what you did mean?
And where do you put the variable to hold the different URLs? (A single example of how this is supposed to look would be very helpful.) Where there is a different link for each different product picture, I realize you have to add something to say where you are linking to for each, but I don't know how to set this for each image or where it should go.
Sorry my HTML skills are so remedial.
Could you show me an example of how to do this? I tried putting the link around the part you mentioned:
var imgTag = "<a href="product1.html"><img src='"+imageName+"' border='0' /></a>";
But then the main image wouldn't change when I clicked the thumbnails. I'm sure that's not what you meant when you said add the link to this section of markup. Could you explain what you did mean?
And where do you put the variable to hold the different URLs? (A single example of how this is supposed to look would be very helpful.) Where there is a different link for each different product picture, I realize you have to add something to say where you are linking to for each, but I don't know how to set this for each image or where it should go.
Sorry my HTML skills are so remedial.
The quotes are messed up. I can't keep track of too many alternating single and double quotes either so I escape the HTML quotes instead.
CODE
var imgTag = '<a href=\"product1.htm\"><img src=\"' + imageName + '\" border=\"0\" /></a>';
There we go. That worked.
Ok, so the last part is how do I make it so that the page linked to changes when the product image changes? As it is, when I click a thumbnail to change the product image, all of the product images link to the same page. Do you list all of the pages you are linking to in the section we've been talking about:
var imgTag = '<a href=\"product1.html\" \"product2.html\" \"product3.html\"><img src=\"' + imageName + '\" border=\"0\" /></a>';
Not sure how to work the slashes and quotes exactly. And you must have to connect the id of the link to the id of the thumbnail that is clicked somehow. What does that look like?
I really appreciate all the help you've given me.
Ok, so the last part is how do I make it so that the page linked to changes when the product image changes? As it is, when I click a thumbnail to change the product image, all of the product images link to the same page. Do you list all of the pages you are linking to in the section we've been talking about:
var imgTag = '<a href=\"product1.html\" \"product2.html\" \"product3.html\"><img src=\"' + imageName + '\" border=\"0\" /></a>';
Not sure how to work the slashes and quotes exactly. And you must have to connect the id of the link to the id of the thumbnail that is clicked somehow. What does that look like?
I really appreciate all the help you've given me.
QUOTE(kelpman @ May 30 2012, 10:03 PM) 
Do you list all of the pages you are linking to in the section we've been talking about:
Nah. You could pass it to the function from the onclick, same as you do with the URL to the image. That is, you have to add different URLs for each thumbnail just as you have done with the URL to the image already. For example...
CODE
onclick="changeIt('product1.htm','retrot.png','image1');"
Then the function. Lets call the URL link there.
CODE
function changeIt(link,imageName,objName)
And lastly...
CODE
var imgTag = '<a href=\"' + link + '\"><img src=\"' + imageName + '\" border=\"0\" /></a>';
Hope I got that right now. Didn't test it.
CODE
Not sure how to work the slashes and quotes exactly.
You can do it your way, with alternating double and single quotes. Only I think that gets hairy pretty fast. If you escape the quotes that occur in the HTML, JavaScript treats them as any old character and they don't interfere with the script.
You don't need to change your double quotes to single ones, it's just the way I do it. I use double for HTML and single for JS. I think that helps with readability and keeps things separate. This way I always know if a quote is meant to be part of HTML or JS without counting them.
CODE
And you must have to connect the id of the link to the id of the thumbnail that is clicked somehow. What does that look like?
It should work as you have it.
She lives!
Thank you so much for all the help.
Thank you so much for all the help.
Great! You are welcome. 
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.