How to implement a photo gallery
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 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?
To achieve this effect four things are required:
- An image placeholder - this is the image that is to be updated.
- A text placeholder - for the caption that changes along with the image.
- A list of links to define what you want to display.
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">
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>
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.
The parameters to this LoadGallery function are:
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.
LoadGallery('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="LoadGallery('EmilyGallery', 'emily04.jpg', 'EmilyGalleryCaption', 'Emily camping')">Emily camping</a>
- 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 LoadGallery, there is nothing to stop you from having more than one gallery on a page.
This article gives the framework for a picture gallery. There are many ways in which it could be extended, for example:
- Buttons instead of links (this is a style decision really)
- Thumbnail images instead of links - actually this is really a minor refinement because it simply involves using a thumbnail image where the link text would normally go. For example:
- Include a link with the caption, for example:
The first of the two links is represented by the following HTML:
<a href="#_self" onclick="LoadGallery('EmilyGallery3', 'emily01.jpg', 'EmilyGalleryCaption3', '<a href=\'emily01.jpg\'> Emily on a day out</a>')"> Emily on a day out</a>
The important point to note is that to embed a quote inside a string be sure to escape it - this simply means include a back slash ('\') before the quote. The backslash (or escaping to give it the correct name) tells the browser that the following quote is to be included as part of the string and does not indicate the end of the current string.
The two links above set the link in the caption to the full image. You would probably want this to open a new page.