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

このエントリーを含むはてなブックマーク はてなブックマークを見る｜ この記事をクリップ！ コメントを見る ｜Yahoo!ブックマークに登録 ｜ このエントリーをdel.icio.usに追加する ｜このページを行き先登録 ｜このページをniftyクリップに登録 ｜このページをBuzzurlに登録

画像ギャラリーの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」サンプル

2007年09月17日

前の記事：華麗なタブメニューjavascript「Fancy Sliding Tab Menu」
次の記事：入力項目の確認とヒントを同時に行うjavascript「ValidationHints」

関連記事

コメント投稿











クールな画像ギャラリーjavascript「jQuery Gallery」に関するコメントはまだありません。
ご遠慮なくコメントしてください。

この記事へのトラックバック:

過去の記事

rss

ページトップに戻る