(+84) 463.28.7979

“Gallery with fade effect”


JavaScript

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

1
<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(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'))
})
})
Below you can see general HTML script representation:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div id="gallery">
<div id="pic">
<img alt="" src="path_to_big_pic1">
</div>
<div id="thumbs">
<ul>
<li class="first">
<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 class="last">
<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

1
2
3
4
5
6
7
8
#gallery #pic{
position:relative;
height:px; /*the height of the big image*/
}
#gallery #pic img{
position:absolute;
}

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>