Thumbnails linked to a full image on same page

[swaaye]

I want to set up product image viewing in a way that you have a sidebar to the left with thumbnails (a table column for example) which when clicked opens into a larger image on the same page (column next to the thumbs).

You can see what I've done so far using an iframe here. <SNIP>

But, I can tell that iframes are not the way to go because I can not center the larger image in the cell. So I did some searching and found one person mentioning DIVs as the way to do this.

Could someone give me an idea of how to use DIVs for this? Or some other "right" way? :)

[edited by: BlobFisk at 10:00 pm (utc) on April 5, 2005]
[edit reason] No URLs please! See TOS [webmasterworld.com] [/edit]

[tedster]

Hello swaaye, and welcome to the forums.

Iframes are probably better here if you haved several products on a page. If you use divs then all the large images need to download on the first request for the page - could take forever. If you use iframes, the large images only download when the user clicks on the related thumbnail.

You will probably find better control over the rendering if you place each large image in an html document, rather than loading the image file into the iframe on its own.

Another possibility would be to use a javascript pop-up window to load the large image.

[eljaykay]

Hi -
One of my all-time favorite css tricks is using a div to load different images...here's a convoluted explanation using one I did awhile back but better one can be found along with the .js file used:

/* setting up the main.css styles */
#head{
width:100%; height:120px; margin:3% auto 0 auto; padding-top:10px;
background:transparent url("images/intro-head.gif") no-repeat top center;}

#photo{
width:100%; height:459px; margin:0 auto;
background:transparent url("images/sparrows-feeder2.jpg") no-repeat top center;}

#text{
width:100%; height:155px; margin:2% auto 0 auto;
background:transparent url("images/intro-txt.gif") no-repeat top center;}

/*a "loaded page" example - mio rocky */
#head{
width:100%; height:140px; margin:2% auto 0 auto; padding-top:10px;
background:transparent url("images/miorocks-head.gif") no-repeat top center;}

#photo{
width:525px; height:280px; margin:0 auto;
background:transparent url("images/mio-rocks.jpg") no-repeat top center;}

#text{
width:100%; height:78px; margin:2% auto;
background:transparent url("images/miorocks-txt.gif") no-repeat top center;}

<!--
- - loading .css files in head - -
<link rel="stylesheet" type="text/css" href="file.css" media="all">
<link rel="stylesheet" type="text/css" href="intro.css" media="all"
title="intro">
<link rel="stylesheet" type="text/css" href="miorocky.css"
media="all" title="miorocky">
...etc.

- - and the js link - -
<script type="text/javascript" src="styleswitcher.js">
</script>

- - the actual styleswitcher.js from A List Apart - -

- - i had the links on an image map - -
<area shape="rect" coords="8,167,140,182" alt="mio rocky" href="#"
title="mio rocky" onclick="setActiveStyleSheet('miorocky'); return false;">
-->

Mine loaded actual pages that looked like i-frames; that was fun. In your case the thumbnails could be links to .css files that change the main content div to show only the large pic and an explanation, or whatever you need.

Good luck - share your solution, eh?,
El