フェードして切り替わる画像ギャラリーの作り方

フェード効果のついたシンプルな画像ギャラリーを作ります。

<script>タグのsrc属性でjQueryのフレームワークを読み込みます。

JavaScript

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

初期化スクリプトを<head>タグ内か、外部jsファイルの中に記述します。

$(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

以下はhtmlの記述の例です。

<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;
}

Comments are closed.