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

サンプル

Javascriptサンプルページ一覧

skuare.net