View Full Version : JavaScript Gallery

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.

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.

07-14-2011, 11:40 AM

See, the two cross-browser demos here:


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.

07-14-2011, 11:01 PM
Change the "baseURL" and filenames in the "imgList" array to match your images.

<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 = [
'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];

<style type="text/css">


<img src="" id="mainImg" height="200" width="175">

<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


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

Post back if you have questions.

Good Luck!