“Gallery with fade effect”

A simple image gallery with a fade effect.

JavaScript

$(function(){

// first we create a function that will swap the images

var replaceImg=function(href){
    var img=$('#gallery #pic img').eq(0),nImg=document.createElement('img')
    $('#gallery #pic').append($(nImg).css('opacity',0))
    nImg.onload=function(){$(this).animate({opacity:1},'fast');img.remove()}
    nImg.src=href
}

// now the function that will proccess mouse click action on the preview image

$('#gallery #thumbs li a').click(function(){
    $('#gallery #thumbs .current').removeClass('current')
    replaceImg($(this).attr('href'))
    $(this).addClass('current')
    return false
})

// the code below is for prev/next buttons if they are required

$('#gallery a[rel="next"],#gallery #pic img').live('click',function(){
    var curr,indx=0,len=$('#gallery #thumbs ul li a').length
    $('#gallery #thumbs ul li a').each(function(){if(this.className.indexOf('current')!=-1){curr=indx}else{indx++}})
    $('#gallery #thumbs ul li a.current').removeClass('current')
    $('#gallery #thumbs ul li a').eq(((curr+1)

HTML
Below you can see general HTML script representation:


    



    

        

            





            





            





        
        prev
        next
    



CSS

#gallery #pic{
    position:relative;
    height:px; /*the height of the big image*/
}

#gallery #pic img{
    position:absolute;
}