クールな画像ギャラリーjavascript「jQuery Gallery」

画像ギャラリーのjavascriptは数あれどここまで凝ったものはなかったのではないでしょうか。
Image Gallery using jQuery, Interface & Reflectionsは、メニュー、サムネイル、リフレクションなど実にさまざまな処理を施します。
その分スクリプトが多くなっていますが。。。
jQueryGallery

使用方法
Image Gallery using jQuery, Interface & Reflectionsからgallery.zipをダウンロードすると必要なファイルが全て手に入ります。
<script type="text/javascript" src="http://yourdomain/js/jquery/jquery.js"></script>
<script type="text/javascript" src="http://yourdomain/js/jquery/jquery.offset.js"></script>
<script type="text/javascript" src="http://yourdomain/js/jquery/interface/iutil.js"></script>
<script type="text/javascript" src="http://yourdomain/js/jquery/interface/ifx.js"></script>
<script type="text/javascript" src="http://yourdomain/js/jquery/interface/ifxslide.js"></script>
<script type="text/javascript" src="http://yourdomain/js/jquery/interface/ifxblind.js"></script>
<script type="text/javascript" src="http://yourdomain/js/jquery.gallery.js"></script>
<script type="text/javascript" src="http://yourdomain/js/reflection/reflection.js"></script>
<script type="text/javascript">
Reflection.defaultHeight = .25;
Reflection.defaultOpacity = .35;
</script>
<script type="text/javascript" src="http://yourdomain/js/images.js"></script>
<script type="text/javascript" src="http://yourdomain/js/menu.js"></script>
<link rel="stylesheet" type="text/css" href="http://yourdomain/css/gallery.css" media="screen,projection">


さらにHTMLでは以下のように記入します(ファイルに含まれているindex.htmlをアップロードしても変わりません)。
<div id="wrapper">
<div id="title">
<h1>タイトル</h1>
</div>
<div id="mainNav" class="clearfix">
<small>サブタイトル</small>
<ul>
<li class="nav" title="collection 1">
<span>ギャラリータイトル</span>
<ul>
<li class="subnav"><a href="#" title="gallery 1">Gallery 1</a></li>
<li class="subnav"><a href="#" title="gallery 2">Gallery 2</a></li>
<li class="subnav last"><a href="#" title="gallery 3">Gallery 3</a></li>
</ul>
</li>
</ul>
</div>
<div id="gallery-1" class="gallery">
<div class="image_holder">
<img src="http://static.flickr.com/93/249234197_ff39233c18.jpg" alt="" onload="Reflection.add(this);">
</div>
</div>
<script type="text/javascript">
init_menu($('#gallery-1').gallery());
</script>
</div>


最後に表示したい画像をimages.js内で指定します。
var images = {
'collection 1' : {
'gallery 1' : [
'画像URI',
'画像URI',
'画像URI',
],
'gallery 2' : [
'画像URI',
'画像URI',
'画像URI',
]
}
};

クールな画像ギャラリーjavascript「jQuery Gallery」解説
クールな画像ギャラリーjavascript「jQuery Gallery」サンプル

sponsors

「クールな画像ギャラリーjavascript「jQuery Gallery」」をシェアする

記事作成:
記事URL:

TOP > > > クールな画像ギャラリーjavascript「jQuery Gallery」