“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:

<div id="gallery">
    <div id="pic">
<img alt="" src="path_to_big_pic1">
</div>
    <div id="thumbs">
        <ul>
            <li>
<a class="current" href="path_to_big_pic1">
<img alt="" src="path_to_thumb_pic1">
</a>
</li>
            <li>
<a href="path_to_big_pic2">
<img alt="" src="path_to_thumb_pic2">
</a>
</li>
            <li>
<a href="path_to_big_pic3">
<img alt="" src="path_to_thumb_pic3">
</a>
</li>
        </ul>
        <a href="#" rel="prev">prev</a>
        <a href="#" rel="next">next</a>
    </div>
</div>

CSS

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

#gallery #pic img{
    position:absolute;
}