Printable View
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.
easiest way is with javaScript...
you will be relying on the fact your visitors will need javascript enabled on there browser though.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>
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.
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.
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:
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?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>
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)
Then some more basic xhtml markup:Code:<script type="text/javascript">
function displayImg(imgPath) {
document.getElementById('test_frame').src = imgPath;
}
</script>
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'):Code:</head>
<body>
<table width="400" border="0">
<tr>
just change the file name in each link and you should be ok.
more standard xhtml: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>
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.Code:</tr>
</table>
<table width="400" border="0">
<tr>
<td>
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.
the rest of the code is more basic xhtml...Code:<iframe id="test_frame" src="image_1_lrg.jpg" name="lrg_view" width="400" height="400" align="top" scrolling="no" frameborder="0"></iframe>
hope that helps clear things a little more and not the reverse :p
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.
ok re-think required:
replace:
with:Code:<script type="text/javascript">
function displayImg(imgPath) {
document.getElementById('test_frame').src = imgPath;
}
</script>
ANDCode:<script type="text/javascript">
function displayImg(imgPath) {
document.getElementById('display_large').src = imgPath;
}
</script>
replace:
with: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>
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.Code:<tr>
<td>
<img id="display_large" src="image_3_lrg.jpg" alt="" />
</td>
</tr>
Here is what I have so far, let me know what you think please.
http://www.youneekphoto.com/Image%20Page.asp
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 :D