$(window).load(function(){  
    var spotlight = {  
         // the opacity of the "transparent" images - change it if you like  
        opacity : 0.2,  
  
        /*the vars below are for width and height of the images so we can make 
        the <li> same size */  
        imgWidth : $('.spotlightWrapper ul li').find('img').width(),  
        imgHeight : $('.spotlightWrapper ul li').find('img').height()   
  
    };  
  
    //set the width and height of the list items same as the images  
    $('.spotlightWrapper ul li').css({ 'width' : spotlight.imgWidth, 'height' : spotlight.imgHeight });  
  
    //when mouse over the list item...  
    $('.spotlightWrapper ul li').hover(function(){  
  
        //...find the image inside of it and add active class to it and change opacity to 1 (no transparency)  
        $(this).find('img').addClass('active').css({ 'opacity' : 1});  
  
        //get the other list items and change the opacity of the images inside it to the one we have set in the spotlight array  
        $(this).siblings('li').find('img').css({'opacity' : spotlight.opacity}) ;  
  
        //when mouse leave...  
    }, function(){  
  
        //... find the image inside of the list item we just left and remove the active class  
        $(this).find('img').removeClass('active');  
  
    });  
  
    //when mouse leaves the unordered list...  
    $('.spotlightWrapper ul').bind('mouseleave',function(){  
        //find the images and change the opacity to 1 (fully visible)  
        $(this).find('img').css('opacity', 1);  
    });  
  
});