Forum Moderators: open
I'm trying to create a simple image gallery with thumbs images and one bigger image where the thumbanils shows. But I've got an issue I'd like to solve, I've tryed to solve this in many ways but I've not succeed so far. Well, the problem is a quite simple and everyone would expect that will be happening :).
Anyway when you click from first picture to second one you sill see the first (previous) one on the place until the second one is fully loaded, bud I'd like to avoid this and put there kind of preloader instead of having there previous picture. Can anyone propose something simple to solve this issue? THX :)
the code (very simple version with no CSS)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang='sk' lang='sk' >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Images preview</title>
<script type="text/javascript" language="javascript1.2">
//preloading images
function preload_img(){
var x = 0;
myimage=new Image()
var images=new Array()
images[0]=["images/projekt_pict/project3/s_01.jpg"];
images[1]=["images/projekt_pict/project3/s_02.jpg"];
images[2]=["images/projekt_pict/project3/s_03.jpg"];
for (x=0; x<images.length; x++){
myimage.src=images[x]
}
}
//FUNCTION THAT MAKE THIS WORKING
function show(n){
document.getElementById("pict").src=n;
}
</script>
</head>
<body onload="preload_img();">
<!-- THUMBNAILS -->
<div class="stretcher">
<a class="thumb" href="#"><img src="images/projekt_thumb/project3/s_01.jpg" width="50" height="36" onClick="show('images/projekt_pict/project3/s_01.jpg');" style=" margin-bottom:2px; cursor:pointer; " alt=""/></a>
<a class="thumb" href="#"><img src="images/projekt_thumb/project3/s_02.jpg" width="50" height="36" onClick="show('images/projekt_pict/project3/s_02.jpg');" style=" margin-bottom:2px; cursor:pointer; "alt=""/></a>
<a class="thumb" href="#"><img src="images/projekt_thumb/project3/s_03.jpg" width="50" height="36" onClick="show('images/projekt_pict/project3/s_03.jpg');" style=" margin-bottom:2px; cursor:pointer; "alt="" /></a>
</div>
<!-- PREVIEW IMAGE -->
<div id="image" >
<img src="images/projekt_pict/project3/v_01.jpg" class="image" id="pict" >
</div>
</body>
</html>
