2009年8月8日土曜日

[jQuery Gallery Plugin] 画像ギャラリー用のプラグイン作りました


世の中には画像ギャラリー/スライドショーを簡単に設置するためのjQuery用プラグインがたくさんあるので、今更自分でこんなもの作らなくても... と思いながらも、衝動的に作ってしまいました。

LibroSpotで利用させてもらっているプラグイン (GalleryView) はとてもすばらしいのですが、自分でカスタマイズしやすいものを使いたかったので。

デモページ
http://www.mudaimemo.com/p/gallery/

Google Code: jquery-gallery-plugin
http://code.google.com/p/jquery-gallery-plugin/

jQuery Plugins: jQuery Gallery Plugin - easy image gallery
http://plugins.jquery.com/project/jquery-gallery-plugin


準備:

Google Code と jQuery Pluginsのページにファイル一式をzipにまとめて置いてあります。
それをダウンロードするとJavascriptとCSSのファイルがありますので、
サーバー上のしかるべき場所にアップロードしてください。
アップロードしたファイルをインクルードするようHTML内に下のように記述すれば準備完了です。

<link href="jquery.gallery.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery.gallery.js"></script>

※ ファイルのパスは自分の環境に合わせてください。
※ プラグインのJavascriptをインクルードする前にjQuery(1.3.X系推奨)をインクルードする必要があります。



使い方:

Javascript
<script type="text/javascript" >
$(document).ready(function () {
$('#id_of_gallery').gallery({
height: '400px',
width: '500px'
});
});
</script>

指定できるオプションの一覧はこちらをご覧下さい

HTML
<div id="id_of_gallery" class="gallery">
<ul class="galleryBar">
<li><a href="picture1.jpg" title="demo #1."><img src="thumbnail1.jpg" title="image1" /></a></li>
<li><a href="picture2.jpg" title="demo #2."><img src="thumbnail2.jpg" title="image2" /></a></li>
<li><a href="picture3.jpg" title="demo #3."><img src="thumbnail3.jpg" title="image4" /></a></li>
</ul>
</div>

aタグtitle属性がギャラリーのタイトルになります。
imgタグtitle属性がギャラリーの説明文になります。


※ HTMLの構造は上記の構造が前提となっています。 (DIV > UL > LI > A > IMG) これを崩すと正しく動作しないのでご注意ください。

※ こちらで用意しているCSSファイルは上記のclass名(gallery, galleryBar)を前提にしています。class名を変更する場合は、CSSファイルの記述もあわせて変更してください。

0 件のコメント: