Fast Operating Image Gallery for All browsers

Google+ Pinterest LinkedIn Tumblr +

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:

<object archive=”img0.jpg img1.jpg img2.jpg img2.jpg img4.jpg img5.jpg &lt;br /&gt;img6.jpg img7.jpg img8.jpg img9.jpg img10.jpg img11.jpg img12.jpg img13.jpg &lt;br /&gt;img14.jpg” id=”O1″>

Some text can go here.
src=”img0.jpg” id=”I0″ Some text can go
here.

img0.jpg

class=”small” onclick=”enlarge(‘IS1’)”
src=”img2.jpg” onclick=”enlarge(‘IS2’)”
id=”IS3″ src=”img3.jpg”

</object>

Share.

About Author

Leave A Reply