Javascript for Image Gallery [Archive]

leah2283

07-29-2006, 02:41 PM

Hello everyone...

I am currently working on a website for a photographer and I am looking for a javascript that I can use. Currently I have a set of 12 thumbnails the page and a larger display area for the full size images. What I would like browsers to be able to do is simply rollover the thumnail and then have the large image in the displat area. I was told this was possilble but can't seem to come accross a script.

My design also has a box that would go around the thumbnail when it is rolled over. Is this still possible.

Thanks A lot!
Leah

JUD

07-29-2006, 06:33 PM

You need something like this

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Image Gallery</title>
<script type="text/javascript">
// <![CDATA[
var img_array = new Array();

function preloadImages(){
var a = preloadImages.arguments;

for(var i = 0; i < a.length; i++){
img_array[i] = new Image();
img_array[i].src = "images/" + a[i];
}
}

preloadImages('at_the_arch.jpg','big_wave.jpg','blue_hills.jpg','fish.jpg','freestyle.jpg','overlook ing_rio.jpg','sunset.jpg','water_lillies.jpg','winter.jpg')

function swapImage(img){
document.getElementById("view_area").src = img;
}
// ]]>
</script>
</head>

<body>
<div id="thumbnails" style="float:left">
<script type="text/javascript">
// <![CDATA[
var images_per_row = 3;

for(var i = 0; i < img_array.length; i++){
if((i + 1) % images_per_row == 0) document.write('<img style="padding:5px" src="' + img_array[i].src + '" width="100" height="75" alt="" onmouseover="swapImage(this.src); this.style.border = \'1px solid red\'" onmouseout="this.style.border = \'0\'" /><br />');
else document.write('<img style="padding:5px" src="' + img_array[i].src + '" width="100" height="75" alt="" onmouseover="swapImage(this.src); this.style.border = \'1px solid red\'" onmouseout="this.style.border = \'0\'" />');
}
// ]]>
</script>
</div>
<div style="display:table-cell; width:600px; height:450px; border:1px solid black; padding:5px">
<img src="images/at_the_arch.jpg" id="view_area" alt="Image View Area" width="600" height="450" />
</div>
</body>
</html>

Click HERE (http://www.warp-nine.co.uk/temp) to see it working.