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 in seeing your gallery. Here is a simple java script code that can be used for preloading your images:
<script type=”text/javascript”>
var slides = new Array(6); // the number in brackets defines how many images your gallery has
var j=0;
for(var i=1; i<=6; i++){
slides[i] = new Image();
slides[i].src = “images/big_” + i + “.jpg”; }
function Swap(number){
document.slide.src = slides[number].src;}
</script>
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>
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:
See also:
I love your writing style genuinely enjoying this website .