Question

So I have a gallery , that I need to have the main image fade in and then crossfade once clicked. The class for the main image is set to ‘active’ once clicked:

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++) {
        li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
        li[i].title = li[i].getElementsByTagName('img')[0].alt;
        gal.addEvent(li[i],'click',function() {
            var im = document.getElementById('jgal').getElementsByTagName('li');
            for (j=0; j<im.length; j++) {
            im[j].className = '';
            }

            this.className = 'active';



    }

Ive tried here to add

this.fadeIn(‘fast’);

after the class is set, but that doesnt work. Any ideas?

Thanks

Answer 1

Solved using this workaround:

$(this).hide();
$(this).fadeIn(“slow”);
this.className = ‘active’;