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 javascript 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 javascript function that will swap images in your gallery. Here's an example of this code:
|
<a href="javascript:Swap(1)"><img src="/img_articles/10894/one.jpg" border="0"></a>
<a href="javascript:Swap(2)"><img src="/img_articles/10894/two.jpg" border="0"></a> <a href="javascript:Swap(3)"><img src="/img_articles/10894/three.jpg" border="0"></a> |
The Swap() function should be seen just under the preloader 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 fullsize image every time it is called. This fullsize image has a name="slide" attribute to refer to it from the Swap() function:
| <img name="slide" src="/img_articles/10894/big_1.jpg" width="300" height="300"> |
More Web Programming: 
