Simple Javascript Image Gallery

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.
Post a comment
  1. Brian

    Hi, I've posted the "gallery" page at the above url which has your code. Maybe you can take a peek and let me know what I've done wrong? It seems so straight forward I feel like a dope! Thanks! Brian

    • Matthew Price

      Hi Brian I see it working... http://matthewaprice.com/image-gallery-working/ Can you tell me what browser, system info you are checking it on? Matt

  2. Brian Burns

    Body code seems to have been truncated: <!-- Main Image --> <!-- Thumbnail Image(s) --> &lt;/td

    • Matthew Price

      Hi Brian I will make a more detailed demo page with examples later tonight Hopefully this will help

  3. Brian Burns

    Hi, I am trying to get your image gallery code working with no luck. I like that it is so stream lined. Not sure what I am doing wrong, here is my page code: Javascript: function imageSwap(event) { var fullSize = event.currentTarget.getAttribute("alt"); var largeImageContainer = document.getElementById('image-main'); largeImageContainer.src=fullSize; } Then BODY: <!-- Main Image --> <!-- Thumbnail Image(s) --> &lt;/td The large image and the thumbnails appear but no action works. Can you help? Thanks! Brian

    • Matthew Price

      Hi Brian So the html code you pasted did not show up. you can wrap your html in a "&lt;code&gt;&lt;/code&gt;" block and try again Matt






Real Time Web Analytics ^