Click on a thumbnail, and have the larger pic appear on the same page

Forum Moderators: open

Message Too Old, No Replies

Click on a thumbnail, and have the larger pic appear on the same page

no frames

LABachlr

5:25 pm on Mar 3, 2004 (gmt 0)

I want to have a webpage with no frames (want it indexed in google) that will have thumbnails of pictures on the right side, and have the larger picture appear on the left when it's thumbnail is clicked. And the larger picture won't change until you click on another thumbnail.

How do I do this? Do I need to have a script for this? If so, please post the script, or tell me where can I get it and what is it called. If not, please post the HTML coding. Thanks.

LABachlr

5:50 pm on Mar 3, 2004 (gmt 0)

Thanks, Lisa, but unfortunately, that will not work for this situation. The page will have a bunch of thumbnails in a table, and it wouldn't really work to have the picture enlarge within the table. But that's a cool trick. I'll keep it in my arsenal. Thanks.

Could I use iframes? I don't even know what iframes are or how to use them, but I have heard about them. Will they allow google index your site?

[edited by: tedster at 8:35 pm (utc) on Mar. 3, 2004]

LABachlr

5:53 pm on Mar 3, 2004 (gmt 0)

Or have the larger picture stay there until another thumbnail is clicked on.

[edited by: tedster at 8:34 pm (utc) on Mar. 3, 2004]

birdbrain

8:04 pm on Mar 3, 2004 (gmt 0)

Hi there LABachlr,

Here is an example for you to try, just
replace the images in red with your own...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>image viewer</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
body
{
background:#cccccc;
}
table
{
border:double 8px #000000;
padding:10px;
background:#ffffff;
}
td
{
border:solid 1px #000000;
padding:5px;
background:#ffffff;
}
img.thumbs
{
width:115px;height:115px;
}
img#imageview
{
width:500px;
height:375px;
}
div
{
width:650px;
height:426px;
position:absolute;
left:50%;
top:50%;
margin-left:-325px;
margin-top:-213px;
}
/*//]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function show(path,w,h)
{
document.getElementById('imageview').src = path
document.getElementById('imageview').style.width = w + 'px'
document.getElementById('imageview').style.height = h + 'px'
}
//]]>
</script>
</head>
<body>
<div>
<table ><tr>
<td rowspan="3"><img id="imageview" src="http://example.com/clear.JPG" alt=""/></td>
<td><img class="thumbs" onclick="show('http://example.com/image1.JPG',500,375)"
src="http://example.com/image1.jpg" alt="grap"/></td>
</tr><tr>
<td><img class="thumbs" onclick="show('http://example.com/image2.JPG',500,375)"
src="http:/example.com/image2.jpg" alt="isle" /></td>
</tr><tr>
<td><img class="thumbs" onclick="show('http://example.com/image3.JPG',500,375)"
src="http://example.com/image3.jpg" alt="shore" /></td>
</tr></table>
</div>
</body>
</html>

[edited by: tedster at 8:30 pm (utc) on Mar. 3, 2004]
Please note that this post has been edited
by the forum staff and to let you know that the
image entitled clear.JPG is a blank image
used to remove the red X that would have appeared
before the thumbnail was clicked ;)

LABachlr

3:29 am on Mar 4, 2004 (gmt 0)

Cool. Thanks a lot. I'll try it.