There’s this script that makes a simple image gallery out of an unordered list of images:
[CODE]
<script type=”text/javascript”>
var gal = {
init : function() {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
if (document.getElementById(‘gallery’)) document.getElementById(‘gallery’).id = ‘jgal’;
var li = document.getElementById(‘jgal’).getElementsByTagName(‘li’);
li[0].className = ‘active’;
for (i=0; i<li.length; i++) {
var url = li[i].getElementsByTagName(‘img’)[0].src;
var url_array = url.split(‘/’);
var j = url_array.length – 1;
var thumb_path = ‘tnimages/’;
li[i].style.backgroundImage = ‘url(‘ + thumb_path + url_array[j] + ‘)’;
li[i].title = li[i].getElementsByTagName(‘img’)[0].alt;
gal.addEvent(li[i],’click’,function() {
var im = document.getElementById(‘jgal’).getElementsByTagName(‘li’);
for (k=0; k<im.length; k++) {
im[k].className = ”;
}
this.className = ‘active’;
});
}
},
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();
});
</script>
demo is here: [url]http://monc.se/kitchen/stew/gallery/
My question is how would I go about adding an image description that appears below(or next to, or whatever) the active image? You don’t have to solve this for me, a good hint or two is fine.