A photo gallery solution?

Forum Moderators: open

Message Too Old, No Replies

A photo gallery solution?

2dope

9:44 pm on Jun 4, 2004 (gmt 0)

On the left of the page I have thumbnails and when I hover over any of them I want the image to be displayed full-size in the center of said page. Anyone here know a decent Java Script I could use? Sorry for cross-posting (css forum), I tried to solve it with CSS but I'm not quite satisfied with results. Thanks

Bernard Marx

10:31 pm on Jun 4, 2004 (gmt 0)

It's not too tricky. This is the simplest one.

1. Put a transparent 1x1 gif inside the central element.
2. Unless the images are all the same size, don't give the

<img id="display" src="transp.gif">

any width or height.
3. Create a small function:

<script>
function showImage(src)
{
 document.getElementById("display").src = src
} 
</script>

4. Give your thumbnails event handlers:

<img src="dog_thumb.gif" onmouseover="showImage(images/dog.jpg)">

..and that's it.
If the images are quite large, I'd recommend using

[blue]onclick[/blue]

, not

[blue]onmouseover[/blue]

2dope

11:44 pm on Jun 4, 2004 (gmt 0)

weird, this doesn't work at all

Bernard Marx

11:51 pm on Jun 4, 2004 (gmt 0)

I'll just check all that...

Bernard Marx

12:11 am on Jun 5, 2004 (gmt 0)

It works fine for me. Here, I have used the same images for the thumbnails just to save time for me. There could be a browser that shows the images at the same size as the 1x1 gif whose src is changed.

<html><head><title>show images</title>
<script>
function showImage(src) { document.getElementById("display").src = src } 
</script>
</head>
<body>
 <img src="image00.gif" onmouseover="showImage('image00.gif')" width="50" height="50"><br>
 <img src="image01.gif" onmouseover="showImage('image01.gif')" width="50" height="50"><br>
 <img src="image02.gif" onmouseover="showImage('image02.gif')" width="50" height="50"><br>
 <img src="image03.gif" onmouseover="showImage('image03.gif')" width="50" height="50"><br>
 
 <div><img id="display" src="spacer.gif"></div>
</body>
</html>

Here is an alt version of the function that will explicitly resize the display image:

function showImage(src,width,height) 
{
var image = document.getElementById("display")
image.src = src
image.width = width
image.height = height
}

With function calls:

showImage('image00.gif',200,300)

2dope

12:21 am on Jun 5, 2004 (gmt 0)

yeah, I simply copied that previous code and didn't notice it was missing single quotes for images
it's all good now, thank you :)