Photo Gallery Help CSS/Java Script

programming web dev
1

Hello I am trying to put together a photo gallery for a friend. we are using this template http://www.stunicholls.com/gallery/photo_click.html. The problem is when you click on the thumbnail to view the larger image the thumbnail disappears and is blank. My friend finds that confusing. How can we have the thumbnail image remain visible?


java:
clickMenu = function(menu) {
var getEls = document.getElementById(menu).getElementsByTagName(“LI”);
var getAgn = getEls;

for (var i=0; i<getEls.length; i++) {
        getEls*.onclick=function() {
            for (var x=0; x<getAgn.length; x++) {
            getAgn[x].className=getAgn[x].className.replace("click", "");
            }
            this.className+=" click";
            }
        }
    }

CSS

#gallery {width:750px; height:360px; position:relative; border:1px solid #ddd; background:#f8f8f8;}
#gallery ul {list-style:none; padding:5px; margin:0; width:195px; float:right; height:219px; overflow:auto;}
#gallery ul li {display:inline; width:50px; height:50px; float:left; margin:0 4px 4px 0; border:1px solid #444; cursor:pointer;}
#gallery ul li img {display:block; width:50px; height:50px;}
#gallery ul li span {display:none; position:absolute; left:547px; top:235px; width:200px;font-family:verdana, arial, sans-serif; color:#06a; font-size:11px; line-height:15px; text-align:justify;}
#gallery ul li span b {color:#444;}

/* required for IE5.x and IE6 to display the start image size correctly */
#gallery ul li.click i img.default {margin:5px auto 0 auto; width:320px; height:240px; border:1px solid #fff;}

#gallery ul li.off {display:none;}

#gallery ul li.click {border-color:#fc0; background:#f8f8f8; cursor:default;}

#gallery ul li.click i {position:absolute; left:0; top:0; width:545px; height:355px;}

#gallery ul li.click i img {margin:5px auto 0 auto; width:auto; height:auto; border:1px solid #fff;}

#gallery ul li.click span {display:block;}