- Web templates
- E-commerce Templates
- CMS & Blog Templates
- Facebook Templates
- Website Builders
“Gallery with fade effect”
March 17, 2011
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; }