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
sponsors
使用方法
とりあえずjQueryからjquery.jsをダウンロードしときましょう。
また、ギャラリー部分は下記のようなマークアップをします。
メイン画像と対応するサムネイルを置く形です。
<div id="main">
<div id="gallery">
<div id="slides">
<div class="slide"><amp-img src="画像パス1" width="920" height="400" /></div>
<div class="slide"><amp-img src="画像パス2" width="920" height="400" /></div>
<div class="slide"><amp-img src="画像パス3" width="920" height="400" /></div>
<!-- 画像にはwidthとheightを指定します -->
</div>
<div id="menu">
<ul>
<li class="fbar"> </li> //区切り線用
<li class="menuItem"><a href=""><amp-img src="サムネイル画像パス1" /></a></li>
<li class="menuItem"><a href=""><amp-img src="サムネイル画像パス2" /></a></li>
<li class="menuItem"><a href=""><amp-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サンプル
sponsors
「jQueryでappleぽい画像ギャラリーを作る via:A Beautiful Apple-style Slideshow Gallery With CSS & jQuery」をシェアする
記事作成:2009年11月12日 10:01
記事URL:http://www.skuare.net/2009/11/jqueryapple_viaa_beautiful_app.html
TOP > javascript > 画像関連 > jQueryでappleぽい画像ギャラリーを作る via:A Beautiful Apple-style Slideshow Gallery With CSS & jQuery
前の記事:画像にキャプションなどを自動表示するJavaScript「Captions」
次の記事:フォームに入力したら削除マークを表示するJavaScript「Clearable Text Field」
あなたにはこちもお勧め!
jQuery プラグインまとめ!