1.

Solve : Placing image on same page as thumbnail?

Answer»

I am trying to place a larger image from a tumbnail on the same page as the thumnail but to the right of where the thumbnail is located when the user CLICKS on the tumbnail.  I am putting below the code that I have set up.  As you can see I have the area that I want the photo to appear with the first image as a default.  I don't want to use frames.  Is this a very involved process involving javascript?  I don't know javascript.

SOME PHOTOS OF THE BAND

Click on thumbnail to view full size image



Below are the thumbnails:

[/url][/url]
[/url][/url]


Below is where I would love the photos to appear INSTEAD of new page:




Any help or suggestions would be appreciated.

Desperate!!!!!!! Quote

I am trying to place a larger image from a tumbnail on the same page as the thumnail but to the right of where the thumbnail is located when the user clicks on the tumbnail.  
Why do this?  What's the point of using thumbnails if you're going to put the full sized image on the same page and to the right of the thumbnail?  
Yes, it would take javascript to make the "rightside" table expand when you click on the thumbnail. I can't remember the exact code but this WEBSITE will help. Be careful, I would also put a link to the full size images ONTO the thumbnail - some people browse without javascript on!

Also one thing I noticed, your using local addresses (e.g. on your computer) for the images. Fair enough if your only going to view the page on your own machine but if you want to go online you will need to change those addresses.Do all full size images appear in the same location on the page, regardless of which thumbnail you click on?  Is that the gist of this?  A kind of slide show?Thanks for your responses.

Steelegbr: what is the site you are referring to?  I intend to change links but rite now I am testing on my local machine.

Soybean: yes all images will appear in same location regardless of thumbnail chosen.  This is just a sameple of images; they could be potentially many more.  http://www.w3schools.com/js/default.asp

I should have made the link more obvious. (Try clicking on the WORD "this" in my previous post).I believe this Newegg.com page with images of a product illustrates what you want to do: Canon
 A540 Silver 6.0MP Digital Camera 4X Optical Zoom - Retail
.  That page is opened by clicking on the product image on this page: http://www.newegg.com/Product/Product.asp?Item=N82E16830120041

You might view the source code there and study it to figure out how it works.  



Discussion

No Comment Found