How to implement a photo gallery driven by clickable thumbnails, with next and previous links

For the purposes of this article, a photo gallery is considered to be a page where links on the page are used to control which image is displayed, so clicking on a link changes one of the images without moving to a new page. The script presented on this page differs from that presented for "How to implement a photo gallery", because it allows allows the image to be selected by clicking on a "next" or "previous" link.

The following example shows a picture of my eldest daughter Emily and lets you select from a limited range of other pictures of her:

So, how does this all work?

It is all built upon the logic for dynamically loading (or changing) file components at run time using JavaScript. For general background information on the techniques used in this article see "How to dynamically load any file component".

To achieve this effect five things are required:

1. An image placeholder - this is the image that is to be updated.
2. A text placeholder - for the caption that changes along with the image.
3. JavaScript to run the gallery.
4. A list of links to define what you want to display.
5. A previous and next link.

An image placeholder

This is a standard HTML image and is the image displayed before the page is first loaded. The only things to bare in mind are the height and width of the image must be pre-set and that the image must be given a unique id. As an example, this page uses the following HTML for its image:

<img border="1" src="emily01.jpg" id="EmilyGallery" width="201" height="201">

A text placeholder

A text placeholder is only required if you want to have a caption that changes with your image. The example illustrated here uses a caption, and if you do not require a caption then you can simply cut out that logic from the JavaScript given below.

The logic here uses a DIV tag to specify the location of the text placeholder and this should be primed with the caption or description appropriate to the initial image.

This page uses the following HTML to define a text placeholder:

<div id="EmilyGalleryCaption">Emily on a day out</div>

JavaScript to run the gallery

This page uses the following JavaScript, which you are free to copy:

<script type="text/javascript">
// Photo Gallery Load script.
// With image cross fade effect for those browsers that support it.
// Script copyright (C) 2004-2008 http://www.cryer.co.uk/.
// Script is free to use provided this copyright header is included.
var currentGalleryLink = new Array();
function LoadPicture(pictureName,imageFile,captionID,captionText)
{
	var picture=document.getElementById(pictureName);
	if (picture.filters)
	{
		picture.style.filter="blendTrans(duration=1)";
		picture.filters.blendTrans.Apply();
	}
	picture.src = imageFile;
	if (picture.filters)
	{
		picture.filters.blendTrans.Play();
	}
	document.getElementById(captionID).innerHTML=captionText;
	// Which link is currently selected?
	for (i=0; i < document.links.length;i++)
	{
	   	var l=document.links[i];
	   	var n=l.getAttributeNode('onclick');
		if (n)
		{
			var onclick = n.value;
	   		if ((onclick) &&
	   			(onclick.indexOf(pictureName) > 0) &&
	   			(onclick.indexOf(imageFile) > 0))
	   		{
			    currentGalleryLink[pictureName] = i;
			    break;
			}
		}
	}
}
function LoadPrev(pictureName)
{
	var current = currentGalleryLink[pictureName];
	if (current == null) current = document.links.length+1;
	var alt = null;
	for (i=document.links.length-1;i>=0;i--)
	{
		var link=document.links[i];
		var node = link.getAttributeNode('onclick');
		if (node)
		{
			var onclick = node.nodeValue;
			if ((onclick) &&
				(onclick.indexOf('LoadPicture') >= 0) &&
				(onclick.indexOf(pictureName) > 0))
			{
				if (i < current)
				{
					eval(onclick);
					return;
				} else if (alt == null)
					alt = onclick;
			}
		}
	}
	if (alt) eval(alt);
}
function LoadNext(pictureName)
{
	var current = currentGalleryLink[pictureName];
	if (current == null) {
		currentGalleryLink[pictureName]=-1;
		LoadNext(pictureName);
		current = currentGalleryLink[pictureName];
	}
	var alt = null;
	for (i=0;i<document.links.length;i++) {
		var link = document.links[i];
		var node = link.getAttributeNode('onclick');
		if (node)
		{
			var onclick = node.value;
			if ((onclick) &&
				(onclick.indexOf('LoadPicture') >= 0) &&
				(onclick.indexOf(pictureName) > 0))
			{
				if (i > current)
				{
					eval(onclick);
					return;
				} else if (alt == null)
					alt = onclick;
			}
		}
	}
	if (alt) {
		eval(alt);
	}
}
</script>

If this script were to be used in a number of pages then it might be best included in a separate script file instead of being embedded directly in a web page.

This script is made up of three functions:

1. LoadPicture
2. LoadPrev
3. LoadNext

If you just want to use these functions and do not want to know any more about them, then you can skip the next section and move straight on to "A list of links to define what you want to display".

1. LoadPicture

The LoadPicture function is responsible for displaying an image and for updating the caption. The function takes advantage of the cross fade effect that Internet Explorer uses. It degrades gracefully on other browsers (i.e. it works without needing to be changed, you just will not get the cross fade effect).

If you are not targeting IE or you do not like the fade effect then you can remove the cross fade effect by replacing:

if (document.all)
{
  document.getElementById(pictureName).style.filter="blendTrans(duration=1)";
  document.getElementById(pictureName).filters.blendTrans.Apply();
}
document.getElementById(pictureName).src = imageFile;
if (document.all)
{
  document.getElementById(pictureName).filters.blendTrans.Play();
}

with:

document.getElementById(pictureName).src = imageFile;

The parameters to this LoadPicture function are:

2. LoadPrev

The LoadPrev function provides the functionality to load the previous image. It takes a single argument:

It works by looking at all the links on the page and working out from this which links cause the image to be updated, and using the sequence of links on a page which is logically the previous. This approach means that it does not need to have any prior knowledge of which images are used - so the list of images in the gallery can be changed without having to revisit this function.

3. LoadNext

The LoadNext function provides the functionality to load the next image. Like LoadPrev it takes the name of the image placeholder as an argument, and works in the same way - except that it loads the next image rather than the previous.

A list of links to define what you want to display

To complete the gallery, you need to decide what links you wish to place on your page and what images and text you wish them to load.

Loading a fresh image and caption is made by calling the JavaScript LoadPicture function:

LoadPicture('EmilyGallery', 'emily04.jpg', 'EmilyGalleryCaption', 'Emily camping')

and this needs to be called from the onclick handler for each link. For example the HTML used to define the first link above is:

<a href="#_self" onclick="LoadPicture('EmilyGallery','emily01.jpg','EmilyGalleryCaption','Emily on a day out')"><img border="0" src="emily01.jpg" width="50" height="50"></a>

Note:

• This needs to be done for each link that you want to load a new picture.
• Because the name of the image and text placeholders is passed in to the call to LoadPicture, there is nothing to stop you from having more than one gallery on a page.

A Previous and Next Link

If you want to include a "Previous" and "Next" link (to select the previous and next image respectively), these need to call the JavaScript functions LoadPrev and LoadNext as appropriate.

Loading the next image is made by calling the JavaScript LoadPrev function:

LoadPrev('EmilyGallery')

and this needs to be called from the onclick handler for the link. For example, the HTML used at the top of this page for the "Previous" link is:

<a href="#_self" onclick="LoadPrev('EmilyGallery')">&lt;&lt; Previous</a>

The "Next" link is virtually identical, but uses "LoadNext" instead. For example, the HTML used at the top of this page for the "Next" link is:

<a href="#_self" onclick="LoadNext('EmilyGallery')">Next &gt;&gt;</a>