Show the images in table help

**azphotoguy** · 12-30-2006, 01:58 AM

New to this forum and want to see if I can get some help.

I am building a photo portfolio site. Using Dreamweaver. I have two different tables.
The first one has thumbnail images.
The second is where I need help.
It is a 400x400 square table - I want the larger image of the thumbnail to appear in this table when the thumbnail is clicked.
Does anyone know how to do this???

Thanks in advance for any help.

**1stbite** · 12-30-2006, 05:01 PM

easiest way is with javaScript...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Gallery</title>
<script type="text/javascript">

function displayImg(imgPath) {
    document.getElementById('test_frame').src = imgPath;
}
</script>
</head>

<body>
<table width="400" border="0">
  <tr>
    <td><a href="javascript:displayImg('image_1_lrg.jpg');"><img src="image_1_sml.jpg" width="50" height="50" border="0" /></a></td>
    <td><a href="javascript:displayImg('image_2_lrg.jpg');"><img src="image_2_sml.jpg" width="50" height="50" border="0" /></a></td>
    <td><a href="javascript:displayImg('image_3_lrg.jpg');"><img src="image_3_sml.jpg" width="50" height="50" border="0" /></a></td>
  </tr>
</table>
<table width="400" border="0">
  <tr>
    <td>
	<iframe id="test_frame" src="image_1_lrg.jpg" name="lrg_view" width="400" height="400" align="top" scrolling="no" frameborder="0"></iframe>
	</td>
  </tr>
</table>
</body>
</html>

you will be relying on the fact your visitors will need javascript enabled on there browser though.

can also be done with flash, putting your thumbs in a flash file that update the iFrame, but then you will need to rely on your visitors having flash.

or you can use server side code like asp, php or java to create a dynamic page that updates the content depending on a variable in the url when a link is clicked.

**azphotoguy** · 12-30-2006, 05:54 PM

Thank you very much for the response!! I will try to make sense of all this and make it work. I'll post a link when I get it all worked out.

**1stbite** · 12-30-2006, 09:07 PM

No probs.

Heres a more detailed break down for you.

First part is nothing of interest, just standard xhtml mark-up for any xhtml webpage:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Gallery</title>

Next part is the javascript function that changes the content of your second table, actually it changes the content of an iframe which is inside the table and the table could just as easily be discarded unless there a reason for it to be there, layout etc?

when the function is called by a link it basically finds the element with the id name 'test_frame' and changes the src attribute of that element with the file passed with the link to the function (imgPath)

Code:

<script type="text/javascript">

function displayImg(imgPath) {
    document.getElementById('test_frame').src = imgPath;
}
</script>

Then some more basic xhtml markup:

Code:

</head>

<body>
<table width="400" border="0">
  <tr>

Then its the thumbnail links, each link initiates the javascript function on click which sends a text string of the file you which to load into the second table (iframe or element with id 'test_frame'):

just change the file name in each link and you should be ok.

Code:

<td><a href="javascript:displayImg('image_1_lrg.jpg');"><img src="image_1_sml.jpg" width="50" height="50" border="0" /></a></td>
    <td><a href="javascript:displayImg('image_2_lrg.jpg');"><img src="image_2_sml.jpg" width="50" height="50" border="0" /></a></td>
    <td><a href="javascript:displayImg('image_3_lrg.jpg');"><img src="image_3_sml.jpg" width="50" height="50" border="0" /></a></td>

more standard xhtml:

Code:

</tr>
</table>
<table width="400" border="0">
  <tr>
    <td>

Now for the second table, here i inserted an iframe which will load in external files, in this case images, it could just as easily load other xhtml files.

the important parts are to give the iframe an id which is also referenced in the javascript function (id="test_frame") and to set any default file you wish to use to load (src="image_1_lrg.jpg") the rest of the attributes you can either add/remove edit as you see fit for your project.

Code:

<iframe id="test_frame" src="image_1_lrg.jpg" name="lrg_view" width="400" height="400" align="top" scrolling="no" frameborder="0"></iframe>

the rest of the code is more basic xhtml...

hope that helps clear things a little more and not the reverse

**azphotoguy** · 12-31-2006, 02:51 AM

It all seems to be working quite well - Thank you once again!!
Is there a way to change the color of the iframe? My page background is a light grey, and the iframe is staying white. That is the only piece that I have not figured out. Your help has been very appreciated.

**1stbite** · 12-31-2006, 12:49 PM

ok re-think required:

replace:

Code:

<script type="text/javascript">
function displayImg(imgPath) {
    document.getElementById('test_frame').src = imgPath;
}
</script>

with:

Code:

<script type="text/javascript">
function displayImg(imgPath) {
    document.getElementById('display_large').src = imgPath;
}
</script>

AND

replace:

Code:

<tr>
    <td><a href="javascript:displayImg('image_1_lrg.jpg');"><img src="image_1_sml.jpg" width="50" height="50" border="0" /></a></td>
    <td><a href="javascript:displayImg('image_2_lrg.jpg');"><img src="image_2_sml.jpg" width="50" height="50" border="0" /></a></td>
    <td><a href="javascript:displayImg('image_3_lrg.jpg');"><img src="image_3_sml.jpg" width="50" height="50" border="0" /></a></td>
</tr>

with:

Code:

<tr>
    <td>
        <img id="display_large" src="image_3_lrg.jpg" alt="" />
    </td>
</tr>

that simple replaces the iFrame with a standard image element, then all we doing now is changing the image element src attribute just like we were doing with the iFrame, only this time you can now style your table with a background colour.

**azphotoguy** · 12-31-2006, 01:05 PM

Here is what I have so far, let me know what you think please.

http://www.youneekphoto.com/Image%20Page.asp

**1stbite** · 12-31-2006, 05:39 PM

nice, and more importantly it works

also you got some neat photos on there, i specially like the bridge, leaf droplets and the laughing horse

Thread: Show the images in table help

Thread Tools

Display

Show the images in table help

Posting Permissions