skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

jQueryでappleぽい画像ギャラリーを作る via：A Beautiful Apple-style Slideshow Gallery With CSS & jQuery

｜ ｜ ｜ ｜ ｜ ｜ ｜

デザインの美しさと洗練された機能により人気のapple商品。
そんなappleぽいスライド型画像ギャラリーをjQueryで作成します。
via：A Beautiful Apple-style Slideshow Gallery With CSS & jQuery -- Tutorialzine

使用方法
とりあえずjQueryからjquery.jsをダウンロードしときましょう。
また、ギャラリー部分は下記のようなマークアップをします。
メイン画像と対応するサムネイルを置く形です。
<div id="main">
<div id="gallery">
<div id="slides">
<div class="slide"><img src="画像パス1" width="920" height="400" /></div>
<div class="slide"><img src="画像パス2" width="920" height="400" /></div>
<div class="slide"><img src="画像パス3" width="920" height="400" /></div>
<!-- 画像にはwidthとheightを指定します -->
</div>

<div id="menu">
<ul>
<li class="fbar"> </li> //区切り線用
<li class="menuItem"><a href=""><img src="サムネイル画像パス1" /></a></li>
<li class="menuItem"><a href=""><img src="サムネイル画像パス2" /></a></li>
<li class="menuItem"><a href=""><img src="サムネイル画像パス3" /></a></li>
</ul>
</div>
</div>
</div>

次にCSSを記述します。
特に難しい部分はないので、cssを見ていただくとして・・・
最後に、jQueryを記述すれば完成です。
$(document).ready(function(){
var totWidth=0;
var positions = new Array();

$('#slides .slide').each(function(i){
positions[i]= totWidth;
totWidth += $(this).width();

if(!$(this).width())
{
alert("Please, fill in width & height for all your images!");
return false;
}
});

$('#slides').width(totWidth);
$('#menu ul li a').click(function(e){
$('li.menuItem').removeClass('act').addClass('inact');
$(this).parent().addClass('act');

var pos = $(this).parent().prevAll('.menuItem').length;

$('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);

e.preventDefault();
});

$('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
});

jQueryでappleぽい画像ギャラリーを作る via：A Beautiful Apple-style Slideshow Gallery With CSS & jQueryサンプル

記事作成：2009年11月12日

前の記事：画像にキャプションなどを自動表示するJavaScript「Captions」
次の記事：フォームに入力したら削除マークを表示するJavaScript「Clearable Text Field」