Hi,

I've set up a javascript gallery on my site which uses thumbnails and larger images so that images popup in a div and can be navigated with next and previous buttons. Theres another part of my page where I want to have images pop up in the same way but not have a gallery with navigation. The problem is the gallery code uses the div id to find the list element that holds the gallery. It works by moving things offscreen to the left to hide elements. The code also only works for just one list on the page so if I have different lists it only works for the first one. Heres the code:

Code:
fakegal={

	// IDs
	thumbsListID:'gallery',
	largeContainerID:'photo',
	// CSS classes
	closeClass:'close',
	nextClass:'next',
	prevClass:'prev',
	hideClass:'hide',
	closeLabel:'close',
	// labels
	showClass:'show',
	prevContent:'<img src="img/prev.png" alt="previous photo" />',
	nextContent:'<img src="img/next.png" alt="next photo" />',

	init:function(){
		if(!document.getElementById || !document.createTextNode){return;}
		fakegal.tlist=document.getElementById(fakegal.thumbsListID);
		if(!fakegal.tlist){return;}
		var thumbsLinks=fakegal.tlist.getElementsByTagName('a');
		fakegal.all=thumbsLinks.length;
		for(var i=0;i<thumbsLinks.length;i++){
			DOMhelp.addEvent(thumbsLinks[i],'click',fakegal.showPic,false);
			thumbsLinks[i].onclick=DOMhelp.safariClickFix;
			thumbsLinks[i].i=i;
		}
		fakegal.createContainer();
	},
	showPic:function(e){
		var t=DOMhelp.getTarget(e);	
		if(t.nodeName.toLowerCase()!='a'){
			t=t.parentNode;
		}
		fakegal.current=t.i;
		var largePic=t.getAttribute('href');
		fakegal.setPic(largePic);
		DOMhelp.cancelClick(e);
	},
	setPic:function(pic){
		var a;
		var picLink=fakegal.c.getElementsByTagName('a')[1];
		picLink.innerHTML='';
		if(typeof pic=='string'){
			fakegal.c.className=fakegal.showClass;
			var i=document.createElement('img');
			i.setAttribute('src',pic);
			picLink.appendChild(i);
		} else {
			fakegal.c.className='';
		}
		a=fakegal.current==0?'add':'remove';
		DOMhelp.cssjs(a,fakegal.prev,fakegal.hideClass);
		a=fakegal.current==fakegal.all-1?'add':'remove'
		DOMhelp.cssjs(a,fakegal.next,fakegal.hideClass);
	},
	navPic:function(e){
		var t=DOMhelp.getTarget(e);	
		if(t.nodeName.toLowerCase()!='a'){
			t=t.parentNode;
		}
		var c=fakegal.current;
		if(t==fakegal.prev){
			c-=1;
		} else {
			c+=1;
		}
		fakegal.current=c;
		var pic=fakegal.tlist.getElementsByTagName('a')[c];
		fakegal.setPic(pic.getAttribute('href'));
		DOMhelp.cancelClick(e);
	},
	createContainer:function(){
		fakegal.c=document.createElement('div');
		fakegal.c.id=fakegal.largeContainerID;

		var p=document.createElement('p');
		var cl=DOMhelp.createLink('#',fakegal.closeLabel);
		cl.className=fakegal.closeClass;
		p.appendChild(cl);
		DOMhelp.addEvent(cl,'click',fakegal.setPic,false);
		cl.onclick=DOMhelp.safariClickFix;
		fakegal.c.appendChild(p);

		var il=DOMhelp.createLink('#','');
		DOMhelp.addEvent(il,'click',fakegal.setPic,false);
		il.onclick=DOMhelp.safariClickFix;
		fakegal.c.appendChild(il);

		fakegal.next=DOMhelp.createLink('#','');
		fakegal.next.innerHTML=fakegal.nextContent;
		fakegal.next.className=fakegal.nextClass;
		DOMhelp.addEvent(fakegal.next,'click',fakegal.navPic,false);
		fakegal.next.onclick=DOMhelp.safariClickFix;
		fakegal.c.appendChild(fakegal.next);

		fakegal.prev=DOMhelp.createLink('#','');
		fakegal.prev.innerHTML=fakegal.prevContent;
		fakegal.prev.className=fakegal.prevClass;
		DOMhelp.addEvent(fakegal.prev,'click',fakegal.navPic,false);
		fakegal.prev.onclick=DOMhelp.safariClickFix;
		fakegal.c.appendChild(fakegal.prev);

		fakegal.tlist.parentNode.appendChild(fakegal.c);
	}
}
DOMhelp.addEvent(window,'load',fakegal.init,false);
There are some functions contained in DOMhelp. I tried to take the whole function and put it in a loop which checks for multiple list elements which need to be popped up but this didn't work, I think because the way the function is being initialized. Is there a way to take this gallery code and apply it to multiple images on just one page but so just one image pops up at a time and theres no navigational gallery? I'm not very good at figuring out how to initialize javascript.