Log in

View Full Version : Need help with image gallery


divinedesign21
08-07-2005, 06:35 PM
I'm new here so I hope this question is posted in the right place.

I am working on a website and I want to create an image gallery like the one at www.susanstripling.com

where you mouse over an image and it appears at the right side of the page in a larger version.

How is this done? Is it done easily in Dreamweaver also?

Thanks.
Twey
08-07-2005, 07:09 PM
The example in question was done with Flash. You can do this in DHTML as well, however:


<style type="text/css">
div.previews img {
width: 50px;
height: 50px;
padding: 5px;
}
</style>
<script type="text/javascript">
function preview(image) {
document.getElementById("fullsize").src = image.src;
}
</script>
</head>
<body>
<img id="fullsize" src="blank.jpg"/>
<div class="previews">
<img src="pic1.png" onmouseover="preview(this);"/>
<img src="pic2.png" onmouseover="preview(this);"/>
</div>
jscheuer1
08-08-2005, 01:44 PM
I kind of went a little nuts on this one and came up with a DOM scripted demo (http://www.freewebs.com/jscheuer1/thumb_full_container_fw.htm). I couldn't get the positioning the way I wanted without using an iframe but, I haven't given up on that yet. Right click inside the gray area and view source (IE) or this frame - view frame source (Mozilla). It is highly configurable and that might lead to some confusion but, each choice is commented and if you only change one thing at a time, it should be clear what each means.
jscheuer1
08-10-2005, 04:48 PM
Here is an even better demo (http://www.freewebs.com/jscheuer1/thumb_full_dom_6_ie5.htm) it displays right on the page where you are using it like a block level element (division, table, etc.). The best part is that much of the configuration is now automatic. Requires at least a Transitional non URL DOCTYPE for best appearance.