Gallery Swapper

Free code to build a small thumb gallery.

[inveni0]

I just thought I would do my part around here! I just developed this gallery for a client. You all can use it if you'd like. With drop shadows and other effects on the thumbnails and large image, this actually looks really nice.

Place this in the header:

<SCRIPT LANGUAGE="JavaScript">
function changeImage(imageNum)
{
 var holdersrc = document.images['thumb'+imageNum].src;
document.images['thumb'+imageNum].src = mainImage.src;
mainImage.src = holdersrc;
 
}
</script>
<style type="text/css">
.thumbNail {
cursor:pointer;
}
</style>

Now, in the Body, you can use this:

<table border="0">
<tr>
<td width="335" height="254" align="center" valign="middle">
<img src="/images/image1.jpg" name="mainimage" width="320" height="240" hspace="0" vspace="0" id="mainImage">
</td>
<td width="126" align="center" valign="middle">
<table width="115" height="89" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle"><img src="/images/image2.jpg" name="thumb2" border="0" height="75" width="100" onClick="changeImage('2')" class="thumbNail">
</td>
</tr>
</table>
</td>
</tr>
</table>

Basically, I use nested tables to control my background and borders. You can do the same with CSS. Essentially, you have a main image load at the start. Additional Images should be loaded into thumbnails. The function changeImage(ImageNum) within the onClick event should reflect that IMG tag's name value.

There may be better ways, and this can be customized even more. I just thought this was a good starting point for people just learning javascript for photo viewing.

[Fotiman]

Let me offer a suggestion on how this could be improved upon. Note, some of these suggestions may not have been the original focus of this thread, but I think they're important to point out.

1. Use this script tag instead:
<script type="text/javascript">

Reason: The tag and it's attributes should be all lowercase in case you want to include this in an XHTML document. Also, the language attribute is invalid.

2. Change your changeImage method to accept 2 parameters, the images to swap.

Reason: You are currently passing in a string value and concatinating that to a hard coded string to determine the name of the first image. But what if your naming convention changes and you rename your images to something else? Your method will be broken. So instead, change this to pass in the images to swap, so that you can extract the src from those images directly without having to concatinate any strings (thus eliminating the room for human error). Also, rather than have the "main" image hard coded, pass that in as well. This will allow you to use this function for more than just this one particular case. And in that case, you might rename the function to swapImages.

3. Add some error checking to your method.

Reason: It's always good practice to provide some error checking.

4. Extend your method to also include alt and title attributes, and swap those as well.

Reason: alt, for accessibility. Title if you want a tooltip.

5. Replace your presentational attributes with CSS equivalents.

Reason: Nice separation of content, presentation, and behaviors.

6. Replace your table based layout with more semantic markup. Your thumbnail images are really a list of images. So use <ul> to surround your images, and then use CSS to style them the way you'd like. There are many examples of this available on the web today.

Reason: Nice separation of content, presentation, and behaviors.

7. Rather than define your event handlers inline, use unobtrusive JavaScript to attach the handlers to your images.

Reason: Nice separation of content, presentation, and behaviors.

[DrDoc]

Thanks for sharing, inveni0! :)

[inveni0]

Thanks for your input, Fotiman. I am going to start working on a more 'transplantable' version of this because I have three other clients wanting an upgrade on their current galleries. I'll post the progress, keeping in mind your suggestions.

[inveni0]

I've started cleaning this up. I'm at a stopping point for today, though, so I thought I'd post it to get mid-clean assistance.

It's a bit hard to see where I'm going with this right now, but I'd appreciate any feedback I can get since I'm now trying to improve it. The actual swap code has not yet gone under any renovations. I'm posting it because, even at this stage, it is still functional.

<script type="text/javascript">
// Set Main Image Start URL
var mainImageURL = 'images/10a64d293f545b1615143ac6b6c2e0491.jpg';
// Set Thumbnail Start URLs
//if using PHP to populate the number of images, place this
//section within its own SCRIPT tags as a PHP echo
var thumb1URL = 'images/21333513527e079a26d85dd36a56d6ae1.jpg';
var thumb2URL = 'images/10a64d293f545b1615143ac6b6c2e0493.jpg';
var thumb3URL = 'images/14b4b61da9ed82b8241cf5787df890482.jpg';
//DO NOT EDIT HERE
//this code populates the ThumbNail and Main images
//you may wish to edit this if using php to control the number of thumbnails
function loadImages()
{
document.mainimage.src = mainImageURL;
document.thumb1.src = thumb1URL;
document.thumb2.src = thumb2URL;
document.thumb3.src = thumb3URL;
}
//DO NOT EDIT HERE
//this code swaps the images from thumbnail to main
function swapImage(imageName)
{
var temporarySRC = document.images[imageName].src;
document.images[imageName].src = mainimage.src;
mainimage.src = temporarySRC;
}
</script>