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
got
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
