Fast Operating Image Gallery for All Browsers

Introduction
With many web image galleries, when you are looking at a set of images and you click a button to see another set, the new set takes time to arrive and settle. In many of these web sites when you attempt to enlarge an image it would take time before you see the enlarged image. In this article, I show you how to produce the new set of images fast and how to enlarge the images fast. All this is thanks to the CSS "display:none" property/value pair, the use of the image source attribute and the new technology called Active Client Pages.

You need basic knowledge in HTML, CSS and JavaScript in order to understand this article. The principles of this article work with Opera 9 and may be the latest versions of new browsers.

Note: If you cannot see the code or if you think anything is missing (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.

The Current Problem
Images generally take time to download. If the new set of images or the enlarged image has to come from the server, while the user is viewing the gallery, then time would be taken for the images to arrive at the client computer. That is the problem; the time for the image to move from the server to the client browser.

Solution
The solution lies with the new technology called Active Client Pages. Active Client Pages is a technology where the next information to be displayed at the browser, is processed at the browser. The data for this next information has to be downloaded in advance, likely with the first information (web page) downloaded. So, if you have 60 images for your gallery to be displayed on a particular page, you know that the user will start looking at the first 5 or so; you download the first 5 with the web page. While the user is looking at the first 5, the rest are being downloaded at the background. By the time the user wants the rest or next set of images, they are already at the browser. The time wasted to download the next set (or rest) of the images would not be wasted.

A Project
I use a project for illustration. You can modify the project for your commercial purposes. In this project, there are three sets of images: each set consists of 5 images. This gives a total of 15 images for the gallery. In practice, you can have more than 15 images and more than 5 images per set. However, for our pedagogic purpose here, we have just 15, in sets of 5.

All the images will be displayed on one web page. Only one image can be enlarged at any one time. One set of 5 images is always displayed; each of these 5 images is displayed in a small size, in a row. When you click any of these 5 images, you see the enlarged version in an area above the row.

The first set of images is downloaded with the web page. The next two sets are downloaded by image tags at the bottom of the web page. For consistency, the image tags for the first set will also be listed with these tags at the bottom of the web page. Now, when an image source value (URL) occurs more than once in a web page, the web browser does not really download it more than once. The browser simply downloads the image once and caches it. When next the image (resource) is needed again in the page, it gets it from the cache. Some browsers (especially old versions), may not do this, but many browsers in use today, do this.

You should see the first set of images when the page opens. The first set of images take the normal time to download, so if the Internet line is slow, you (the user) might notice some time delay as the first set of images arrive. After this you will notice no more delays, because as you are busy looking at the first set and enlarging its images, one-by-one, the other two sets are being downloaded by the image tags at the bottom of the page. There are 15 image tags at the button of the page. Each of these tags has the CSS display property/value pair,

"display:none"

The images come and remain at the bottom of the page. They are not displayed and they do not occupy space, because of the "display:none" property/value pairs. Whenever each is needed, the value of its source attribute is copied to replace the value of an image source attribute that is already displayed. So, the download time from the server will be omitted, and the user will notice a fast display of all the images after the first set has arrived.

Enlarging an Image
As said above, each set of images displays five images in a row. When you click one of the images, you see its enlarged form above it. As part of the design, when the first set of images arrives at the browser, you see the first image (left-most in the row) enlarged.

The enlarged image simply has larger dimensions than the images in the row (that are not enlarged). These larger dimensions are given by CSS. When you click any small image, the value (URL) of the source attribute of the larger image is replaced by that of the smaller image. When the replacement takes place, you see the image clicked enlarged (higher up). For any enlarged image, you have the same URL for the image tag of the enlarged image as for the image tag of the corresponding small image. It is the source attribute of an image tag that determines what the image tag displays as the image.

Resolution
The enlarged image, in pixels, should not be larger than any of the images at the server. If you do not respect this rule, there will be lost of resolution of one or more of the enlarged image.

Let us go on to implement the project.

Implementing the Project
The code is in 3 parts. The first part is the style sheet in the HTML HEAD element. The next part is the JavaScript. The third part is the content of the BODY element; this content has the HTML elements of interest: the object element, the table elements, the image elements and the button element.

Code for BODY Content
We look at the content of the BODY element first, since the style sheet and the JavaScript depend on it. This is it:

Some text can go here.Some text can go here.

Next Set

You have the HTML Table for the enlarged image, the HTML Table for the small images and the button. Then you have the image tags, where each has the CSS property/value pair: "display:none". The Table for the enlarged image has one row and three cells; the cell at the center holds the enlarged image. It is the style sheet that primarily determines the size of an image (both the enlarged and small images).

The second Table has one row and 5 cells; each holds a small image. It is the style sheet that primarily determines the size of an image. After this table, you have an HTML button in the code. It has an onclick event that calls the function, nextSet(). This JavaScript function copies the next set of images whose URLs are in an array, into the image tags of the second table. For convenience, the 15 URLs are in a JavaScript array. So the 15 URLs are in two main places; the JavaScript array and in the tags at the bottom of the BODY element.

The Style Sheet
This is the simple style sheet:

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

The first statement in the style sheet deals with the small images that have the class, small. The second statement deals with the one enlarged image. This image has the class, large. The declaration block of the first statement has only the width value for the small images. The declaration block for the large image also has only the width value of the large image. Whenever, you give the width value to an HTML element the browser gives the corresponding or appropriate height. Avoid giving height values to HTML elements; this complicates browser presentation with browsers.

The JavaScript
This is the script:

var arr = new Array;

arr[0] = "img0.jpg";
arr[1] = "img1.jpg";
arr[2] = "img2.jpg";
arr[3] = "img3.jpg";
arr[4] = "img4.jpg";
arr[5] = "img5.jpg";
arr[6] = "img6.jpg";
arr[7] = "img7.jpg";
arr[8] = "img8.jpg";
arr[9] = "img9.jpg";
arr[10] = "img10.jpg";
arr[11] = "img11.jpg";
arr[12] = "img12.jpg";
arr[13] = "img13.jpg";
arr[14] = "img14.jpg";

function enlarge(ID)
{
document.getElementById('I0').src = document.getElementById(ID).src;
}

var nextIndex = 5;

function nextSet()
{
document.getElementById('IS0').src = arr[nextIndex + 0];
document.getElementById('IS1').src = arr[nextIndex + 1];
document.getElementById('IS2').src = arr[nextIndex + 2];
document.getElementById('IS3').src = arr[nextIndex + 3];
document.getElementById('IS4').src = arr[nextIndex + 4];

//Make enlarged image the first in the set.
document.getElementById('I0').src = arr[nextIndex+0];

nextIndex = nextIndex + 5

if (nextIndex == 15)
{
nextIndex = 0;
document.getElementById('B1').innerHTML = "First Set"
}
else
document.getElementById('B1').innerHTML = "Next Set"
}

There are three code segments in the script. The first is the array. The second is a function that enlarges any of the small images. The third displays the next set of five images.

Details of Functions
The function enlarge(ID) displays the enlarged image for the small image that has been clicked. It simply copies the value of the source attribute of the image clicked, to the value of the source attribute of the image tag in the second cell of the first table. When this copy is made, the image in the second cell takes the dimensions specified by the style sheet. The onclick event of the image tag clicked, calls this function with its ID.

Now, to the nextSet() function: This function displays the next set of 5 small images. The first set is displayed with the page downloaded. After this, the index for the array that begins the next set of image URLs is 5 (index counting begins from zero). This is why you have the global variable and initialization,

var nextIndex = 5;

When the button is clicked, the first code segment of the nextSet() function copies the next set of the image URLs from the array into the second table image tags. The HTML image tags of the second table are not changed. It is the value of their source attributes that are changed.

After this code segment, the next statement makes an enlarged copy of the new first image of the second table. After that the nextIndex variable is increased by 5, since we have images in sets of 5. The last code segment tests if nextIndex is 15. If it is 15, then the sets have to be displayed from the beginning. The code inside the "if" and "else" block should be self-explanatory.

The complete code with 15 images can be downloaded from
http://www.cool-mathematics.com/downloads/fastGallery2.zip

Conclusion
The principles outlined, should work with all browsers. So, a secret for fast operation of an image gallery is to use Active Client Pages technology with the downloaded images in none-display mode.

Chrys