“Gallery with fade effect”

A simple image gallery with a fade effect.

JavaScript

We should include jQuery framework by pointing src attribute in the script tag to those .js files.

<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>

Initialization script place either in the section or in some external .js file

$(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)<len)?curr+1:0).addClass('current')
    replaceImg($('#gallery #thumbs ul li a.current').attr('href'))
})
$('#gallery a[rel="prev"]').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).addClass('current')
    replaceImg($('#gallery #thumbs ul li a.current').attr('href'))
})
})

HTML

Below you can see general HTML script representation:

<img alt="" src="path_to_big_pic1">





<img alt="" src="path_to_thumb_pic1">




<img alt="" src="path_to_thumb_pic2">




<img alt="" src="path_to_thumb_pic3">




        prev
        next
    

CSS

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

#gallery #pic img{
    position:absolute;
}