How can I create an image gallery in a common HTML site?
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
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:
The Swap() function should be seen just under the pre-loader code. It will accept a parameter.
Here is an example of this function:
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:
How to create
an image gallery in HTML site demo movie
<img name="slide" src="big_1.jpg" width="300" height="300">