jQueryでギャラリーを実現するGalleryboxプラグイン

jQueryでギャラリーを実現するGalleryboxプラグイン

Posted at December 16,2010 2:22 AM
Tag:[Gallerybox, jQuery]

jQueryでギャラリーを実現するGalleryboxプラグインを紹介します。

このプラグインを利用すれば、サムネイル画像をクリックすることでメインの画像をフェードイン・フェードアウトで入れ替えてくれます。またオプション設定により、メイン画像とlightboxの連携、あるいは画像タイトルやタイトルリンクも切り替えてくれます。

動作は以下の配布ページで確認できます。

Gallerybox
Galleryboxプラグイン

以下、インストールと利用方法を説明します。

1.プラグインのダウンロード・インストール

Galleryboxのページにある「jquery.gallerybox_0.0.1.js(バージョンは2010年12月現在)」のリンクを右クリックして、プラグインファイルをダウンロードします。保存時にファイル名はjquery.gallerybox.jsとします。

2.(X)HTMLマークアップ

このプラグインでは次の(X)HTMLマークアップが必要です。

  • メイン画像を括る要素のid属性値(必須):gallery_main
  • サムネイルを括る要素のid属性値(必須):gallery_thumbnail
  • メイン画像のタイトル(オプション):任意のclass属性名

次のようなマークアップになります。

<h1 class="title">foo</h1>
<div id="gallery_main">
  <a class="lightbox" href="http://.../images/foo.jpg"><img src="http://.../images/foo_thumbnail.jpg" alt="foo" title="view slideshow" /></a>
</div>
<div id="gallery_thumbnail">
  <ul>
    <li class="start"><a href="http://.../a.html" title="a"><img src="http://.../images/a_thumbnail.jpg" class="asset-img-thumb" alt="a" title="Change to a" /></a></li>
    <li><a href="http://.../b.html" title="b"><img src="http://.../images/b_thumbnail.jpg" class="asset-img-thumb" alt="b" title="Change to b" /></a></li>
    <li><a href="http://.../c.html" title="c"><img src="http://.../images/c_thumbnail.jpg" class="asset-img-thumb" alt="c" title="Change to c" /></a></li>
  </ul>
</div>

3.プラグインの設定

(X)HTMLマークアップに次の内容を追加します。jQueryはscript要素で事前に読み込んでください。

<script type="text/javascript" src="http://user-domain/jquery.gallerybox.js"></script>
<script type="text/javascript">
$(function() {
    $('#box').gallerybox();
});
//]]>
</script>

「#box」の部分は、2項のマークアップを括っているid属性値やclass属性値など、なんでも大丈夫です。

4.JSONデータ

このプラグインでは、サムネイルをクリックしたときにメイン画像に拡大画像を表示するため、次のJSONデータが必要です。

var obj = {"item":[
    {"alt":"Wine",
     "title":"Wine",
     "url":"http://.../images/a_lightbox.jpg",
     "slideshow":1,
     "thumbnail":"http://.../images/a.jpg",
     "content":'<a class="lightbox" href="http://.../images/a_lightbox.jpg"><img src="http://.../images/a.jpg" alt="a" /></a>'},
    {"alt":"Coffee",
     "title":"Coffee",
     "url":"http://.../images/b_lightbox.jpg",
     "slideshow":1,
     "thumbnail":"http://.../images/b.jpg",
     "content":'<a class="lightbox" href="http://.../images/b_lightbox.jpg"><img src="http://.../images/b.jpg" alt="b" /></a>'},
]}

各キーの意味は次の通りです。かなり複雑になっているので次バージョン以降ですっきりすることを期待しています。

  • content:メインエリアに表示する内容
  • thumbnail:メインエリアに表示する画像のURL(urlと同じ内容でも構いません)
  • title:h1要素のタイトルに表示する文字列
  • link:h1要素のタイトルリンク
  • slideshow:lightboxを併用するときに「1」を設定
  • url:メイン画像から元画像(lightbox表示または直リンク)へリンクするときのURL

5.オプション

GalleryBox起動時に、次のオプションが設定可能です。

  • fade:メイン画像のフェードアウト時の秒数(ms)
  • fadeTo:メイン画像のフェードインの秒数(ms)
  • link:メイン画像のh1要素などのタイトルリンクの利用有無(0/1)
  • title:メイン画像のh1要素などのタイトルの利用有無(0/1)
  • title_class:メイン画像のh1要素などを使うときのclass属性値
  • lightbox:lightboxの利用有無(0/1)
  • lightboxURL:lightboxを利用するときのimageディレクトリまでのURL

設定例は次の通りです。

$('#box').gallerybox({
    fade: 600,
    fadeTo: 1200,
    lightbox:0,
    link:0,
    title:0,
    title_class:'.main-entry-header',
    lightboxURL:'http://user-domain/lightbox/'
});
関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)