JavaScript Gallery

YourDirector · 07-14-2011, 10: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, 11:01 AM

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, 11:40 AM

YourDirector:

See, the two cross-browser demos here:

http://www.dynamicdrive.com/forums/s...57&postcount=1

bullant · 07-14-2011, 12: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-14-2011, 11:01 PM

Change the "baseURL" and filenames in the "imgList" array to match your images.

Code:

<!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!