Creating an image gallery

Q: How can I create an image gallery in a common HTML site?

A: You can do it with the help of Java Script. First you should preload your images into a browser cache. By doing this you will eliminate any delays is seeing your gallery. Here is a simple java script code that can be used for preloading your images:

var slides = new Array(3); // the number in brackets defines how many images your gallery has


var j=0;

for(var i=1; i<=3; i++)

   slides[i] = new Image();

   slides[i].src = "images/big_" + i + ".jpg";


This code should be placed between the <head>...</head> and <body>...</body> blocks. Your images should be placed into the 'images' folder and named in the following format: big_1.jpg, big_2.jpg and so on.
Each of your thumbnails should be wrapped in <a>...</a> tags. The href attribute of the <a> tag should refer to the java script function that will swap images in your gallery. Here's an example of this code:

<a href="javascript:Swap(1)"><img src="one.jpg" border="0"></a>

<a href="javascript:Swap(2)"><img src="two.jpg" border="0"></a>

<a href="javascript:Swap(3)"><img src="three.jpg" border="0"></a>

The Swap() function should be seen just under the pre-loader code. It will accept a parameter. Here is an example of this function:

function Swap(number)


document.slide.src = slides[number].src;


This function changes the SRC attribute of a full size image every time it is called. This full size image has a name="slide" attribute to refer to it from the Swap() function:

<img name="slide" src="big_1.jpg" width="300" height="300">

See also:

How to create an image gallery in HTML site demo movie