Hi guys,
I’d appreciate some help with this JavaScript code that I’ve found online and that I’m trying to tweak in order to fulfill my specific needs. What I like about it is that the thumbnail gets created automatically by using the actual big picture as a background image. The problem I’m having at the moment is with activating the new big image. I get to the point where I reset visibility for all and can’t figure our how to make the new one visible. It’s straightforward for the thumbnail because it uses the word this, but I can’t use “i” to control which big image becomes visible because “i” has already run to the end (=6).
Sorry I’m definitely no JS wizard! Please see my comment surrounded by hashes to figure out where I’m stuck.
Thanks in advance for your help guys! 
<!-- BEGIN SCRIPT -->
<!--[if lt IE 6]><style media="screen,projection" type="text/css">#gallery { display: block; }</style><![endif]-->
<script type="text/javascript">
/* Start CDATA to pass validation and hide script from old browsers */
/* <![CDATA[ */
/* Use display: none on gallery list to avoid showing the whole lot before JS kicks in. Could use a preloader here */
document.write("<style type='text/css'> #gallery { display: none; } </style>");
var gal = {
init : function() {
//Check if basic support exists
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
//Assign a new id to the gallery <UL>. There are two ULs in the page: id='gallery' and id='thumbs'
if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
//Store the list elements of both lists in two arrays
var li = document.getElementById('thumbs').getElementsByTagName('li');
var libig = document.getElementById('jgal').getElementsByTagName('li');
// Make both the first thumb and the first big image active. This is styled in the CSS (thumb has border and opacity, big image gets display: block)
li[0].className = 'active';
libig[0].className = 'active';
//Enter the loop to create the thumbnails
for (i=0; i<li.length; i++) {
// Create the thumbnail image (in the CSS the style gives width, height, background position, border, etc.)
li[i].style.backgroundImage = 'url(' + libig[i].getElementsByTagName('img')[0].src + ')';
li[i].style.backgroundRepeat = 'no-repeat';
//Add the click event
gal.addEvent(li[i], 'click', function() {
//Create a coupel of arrays to store the lists elements (small and big images)
var im = document.getElementById('thumbs').getElementsByTagName('li');
var bigim = document.getElementById('jgal').getElementsByTagName('li');
//Enter the loop to remove all active stauses
for (j=0; j<im.length; j++) {
// First remove all active from all thumbs
im[j].className = '';
// Plus, make the big image active as well
bigim[j].className = '';
}
// Then make the clicked thumbnail active
this.className = 'active';
//########################################################
//HOW TO ALSO ACTIVATE THE DIFFERENT BIG IMAGE?? I'M STUCK HERE! :)
//########################################################
});
}
},
addEvent : function(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent("on"+type, obj[type+fn]);
}
}
}
gal.addEvent (window, 'load', function(){gal.init();} );
/* End CDATA to pass validation and hide script from old browsers */
/* ]]> */
</script>
<!-- END SCRIPT -->
This is the HTML:
<ul id="thumbs">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul id="gallery">
<li><img src="images/gallery1/foto1.jpg" alt="Gallery 1 - Photo 1" /></li>
<li><img src="images/gallery1/foto2.jpg" alt="Gallery 1 - Photo 2" /></li>
<li><img src="images/gallery1/foto3.jpg" alt="Gallery 1 - Photo 3" /></li>
<li><img src="images/gallery1/foto4.jpg" alt="Gallery 1 - Photo 4" /></li>
<li><img src="images/gallery1/foto5.jpg" alt="Gallery 1 - Photo 5" /></li>
<li><img src="images/gallery1/foto6.jpg" alt="Gallery 1 - Photo 6" /></li>
</ul>
And these are the relevant syles, nothing fancy really:
/* Gallery pages */
#thumbs {
list-style: none;
width: 120px;
}
#thumbs li {
opacity: .5;
float: left;
display: block;
width: 40px;
height: 40px;
background-position: 50% 50%; /* It generates the thumbnail image*/
cursor: pointer;
border: 3px solid #fff;
margin: 0px 4px 14px 10px;
}
/*Active img*/
#jgal li.active img {
display: block;
}
/*Image hover effect*/
#thumbs li.active, #thumbs li:hover {
outline-color: #bbb;
opacity: .99 /* safari bug */
}
/* JS images styles : thumbnails and full size images */
#jgal {
list-style: none;
width: 120px;
}
/*Central img styles */
#jgal li img {
position: absolute;
top: 0px;
right: 0px;
display: none;
margin: 0;
padding: 0;
}