PDA

View Full Version : JavaScript Gallery



YourDirector
07-14-2011, 11:54 AM
Hey all,

Effectively what I want is a table displaying 20 thumbnails and above the table to be a large image. When a user clicks a thumbnail I want a relative image to be displayed above.

Now obviously I can just set this to reload the page and load the relative image in its space but I was wondering if there was a way of doing this without having to reload the whole page each time. I also want to avoid Iframes as I want this to be as cross-compatible as possible.

Thanks all.

bullant
07-14-2011, 12:01 PM
One option is to put an onclick event handler on each thumbnail that passes the src of the thumbnail <img> to a function.

The function then sets the src of the enlargement <img> to the src that is passed to the function.

Sciliano
07-14-2011, 12:40 PM
YourDirector:

See, the two cross-browser demos here:

http://www.dynamicdrive.com/forums/showpost.php?p=230957&postcount=1

bullant
07-14-2011, 01:09 PM
that link only goes to a post with more links.

I've already had warnings from my Trend Micro from links posted in forums like this.

jmrker
07-15-2011, 12:01 AM
Change the "baseURL" and filenames in the "imgList" array to match your images.


<!DOCTYPE HTML>
<html>
<head>
<title> Untitled </title>
<script type="text/javascript">
// For: http://www.codingforums.com/showthread.php?t=231925

var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
var imgList = [
'11.jpg','12.jpg','13.jpg','14.jpg','15.jpg',
'21.jpg','22.jpg','23.jpg','24.jpg','25.jpg',
'31.jpg','32.jpg','33.jpg','34.jpg','35.jpg',
'41.jpg','42.jpg','43.jpg','44.jpg','45.jpg' // No comma after last entry
];
// If you have BOTH actual image and thumbnail images, could be named '11.jpg' and '_11.jpg'
// where the images with leading '_' would be the thumbnail list, you could change below at the '//'
// and remove the 'height' and 'width' designation in the HTML section for the thumbnail tags

function showMain(Info) {
document.getElementById('mainImg').src = baseURL+imgList[Info];
}
window.onload = function() {
document.getElementById('mainImg').src = baseURL+imgList[0];
for (var i=0; i<imgList.length; i++) {
document.getElementById('img'+i).src = baseURL+imgList[i];
// document.getElementById('img'+i).src = baseURL+'_'+imgList[i];
}
}

</script>
<style type="text/css">

</style>

</head>
<body>
<center>
<img src="" id="mainImg" height="200" width="175">
<p>

<script type="text/javascript">
var str = '';
for (var i=0; i<imgList.length; i++) {
str += '<img src="" id="img'+i+'" height="50" width="35" onclick="showMain(\''+i+'\')">';
// str += '<img src="" id="img'+i+'" onclick="showMain(\''+i+'\')">'; // if thumbnail images available
str += ((i % 10) == 9) ? '<br>' : ''; // optional
}
document.write(str);
</script>
</center>

</body>
</html>

Note the other optional changes you can make in the comments of the script.

Post back if you have questions.

Good Luck!