Producing an Image Gallery by Hand

Introduction
In this article I show you how to write code for an image gallery. An image gallery is just a collection of images. Usually these images are small. When you click one you see an enlarged form of it.

You need basic knowledge in HTML, CSS, JavaScript and DOM to understand this article.

Note: If you cannot see the code or if you think anything is missing in this article (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

Some CSS and JavaScript Principles
One image can be displayed on the same web page by more than one image tags. What matters to display a particular image is the value (URL) of the source attribute. You can use JavaScript (and DOM) to change this value for an image tag. An image tag can have many attributes and values. If you change only the value, of the source attribute of the image tag, the image the tag is displaying will change. However, the new image will have the same CSS properties (size, for example) as the previous image.

Example
There are different designs for an image gallery. I will use a simple example here. Afterward, you can modify the code to suit your commercial project. In this example there are five small images in a web page. When you click a small image, its enlarged form appears higher up in the page. The five images are in a row.

Layout
Whenever the elements of your web page are in the form of a grid, row or column, you can use the HTML Table element. So for this example, you need two tables. The first one higher up in the web page has one row and three cells. The first cell may have some text. The second cell has the enlarged image, and the third cell may have some text. The second table has one row but with five cells for the five small images. All the small images are of the same size. There is only one big image, which is the enlarged image. This is the HTML code for the table elements:

Some text can go here./>Some text can go here.

src="img2.jpg" class="small" onclick="enlarge(event)"/>

All the cells of the second table have a width of 120px. The images will be downloaded at their normal sizes (by default), but CSS will be used to make their widths 120px for the second table. For the first table the width of the first cell is 100px, the width of the second cell, which shows the enlarged image is 400px, that for the third cell is 100px. Always avoid giving your HTML elements, height values. When you give an HTML element (including an image) a width value the browser always gives the corresponding or appropriate height.

As the web page is loaded, the image in the first cell of the second table appears as an enlarge image in the center (second) cell of the first table. This is why the source attribute of the image tag in the first cell of the second table is the same as that of the center cell of the first table. This does not mean that the first image or any of the images is downloaded twice. The first image and each of the other images is downloaded once. During a session, when a browser downloads an image it caches it, when that image is needed again, it gets it from its cache. If the image is no longer in its cache for some reason, that is when it downloads it again.

Strategy
For the five images, one image is downloaded for each image. The dimensions for the images in the second table are small, so the images appear small in the second table. None of these images at the server should be smaller (in pixels) than the large size we want for the first table. If this rule is not respected, there will be a lost of resolution for the enlarged image.

Each of the images for the small table is given a width of 120px by CSS. The width of the image of the center cell for the first table is given by CSS as 400px. This is the size of the enlarged image. Remember, avoid giving a height to an image, the browser will always do that for you.

All images, including these five images have the source attribute in their tags. The value of the source attribute is of course the URL of the image. The CSS class for all the five image tags of the second table is "small". The CSS class for the image of the center cell of the first table is "large". It is this class, "large" that has the value of 400px for the image in the center cell of the first table.

The center cell of the first table is made to always display the enlarged image. The image tag in this cell has the class attribute with the value, "large". In fact, that is the only image tag that has the class, "large". You enlarge any of the five images by simply replacing the value of the source attribute of this image tag.

Each image tag in the second table has an onclick attribute. When you click any of these images (tags), its onlick event is triggered. It calls a JavaScript function sending the event object as argument. The function uses this event object to identify the element that was clicked; then it gets the value (URL) of the source attribute of the tag clicked and assigns it to the source attribute of the image tag in the second cell of the first table. As a result the image in this center cell changes. The CSS class, "large" is not changed. So the new image maintains the previous large size.

The code
I have given and explained the code for the two tables above. Let us look at what is in the style sheet and JavaScript. This is what we have:

img.small {width:120px}
img.large {width:400px}

function enlarge(event)
{
document.getElementById('I1').src = event.target.src;
}

All the image tags of the second table are of the CSS class, "small". This gives us the first CSS rule in the style sheet. The image tag of the enlarged image is of the CSS class "large". Only this image tag is of this class. This gives us the second CSS rule in the style sheet.

The JavaScript has just one function with one statement. This function is called when any of the image tags for the small images is clicked. The argument of the function is the event object. The expression, "event.target" returns a reference to the image tag that triggered the event (was clicked). So the expression, "event.target.src" returns the URL of the image tag that was clicked. This URL is assigned to the source attribute of the image tag for the enlarged image. So the small image that was clicked, appears in the second cell of the first table. You then have two copies of the image: a big one and a small one.

Large Gallery
From what I have explained, if you had a large gallery, then you would have a number of pages like this for the whole gallery. For now, just imagine that you had 15 images (this does not mean 15 is big), then following the above design, you would have 3 web pages, each with 5 images. Two of the pages will have a hyperlink that leads to the next page.

Note: for an image gallery you can have more than 15 images on one page. I have used 5 per page above, just for illustration.

Browsers
The above code works with Mozilla Firefox 2, Netscape 8, Opera 9 and Safari 3. It does not work with Internet Explorer 6.

Downloading Images
Images take long to download. Users do not like this long time especially when they are dealing with a large gallery. There is a new technology called Active Client Pages. I am one of the innovators of this technology. With this technology the user may notice the slowness in the downloading of only the first few images. The rest of the images appear as soon as the user needs them. Keep reading my blog to know how this is done.

The complete code and images for the above image gallery can be downloaded from

http://www.cool-mathematics.com/downloads/gallery.zip

When you download, save everything in one directory, then execute by double-clicking the HTML file.

Chrys