I have been looking around for a very simple image gallery where i could have thumbnails below a main image to no real avail, so i went ahead and wrote my own. In my eyes it is cool as it allows for one image tag to define both the thumbnail and fullsize image.
<!-- Main Image --><img src="path/to/starting/image.jpg" id="image-main">
<!-- Thumbnail Image(s) Just two here shown for example -->
<img src="path/to/thumbnail-1.jpg" alt="path/to/fullsize-1.jpg" onclick="imageSwap(event);">
<img src="path/to/thumbnail-2.jpg" alt="path/to/fullsize-2.jpg" onclick="imageSwap(event);">
<!-- The Javascript --><script type="text/javascript">
function imageSwap(event) {
var fullSize = event.currentTarget.getAttribute("alt");
var largeImageContainer = document.getElementById('image-main');
largeImageContainer.src=fullSize;
}
</script>
You could also create a second argument for the "image-main" container to make that dynamic too.
Matthew A Price
^