WordPress 2.5の新機能 ギャラリー[gallery]を使って画像一覧表示するという記事でWordPress 2.5からの新機能である[gallery]の使い方を説明したが、このgalleryを使ってフォトログや写真アルバムサイトを構築するにはいまいち役不足だったので、[gallery]を拡張してプラグイン化してみた。その名も、Lightbox Galleryというプラグインである。

Lightbox Gallery [ English here ]
必須条件
WordPress 2.5以上
特徴
Lightbox Galleryは、[gallery]の機能を拡張し、Lightboxで画像・写真を表示できるように変更するプラグインである。Lightbox Galleryの主な特徴は以下のとおり。
- Lightboxで画像・写真を表示
- Tooltip(ツールチップ)で画像のキャプションを表示
- 写真の一覧表示はローディングっぽく遅延表示
- 写真の付随情報(機種・絞り値など)を表示
ヒストリー
- 2008.05.08 Lightbox Gallery 0.2.1 公開
- 2008.05.08 Lightbox Gallery 0.2 公開
- ショートコードの[gallery]を使わずにlightboxで画像を表示する(rel="lightbox")のサポート
- 2008.04.22 Lightbox Gallery 0.1 公開
ダウンロード
Lightbox Galleryプラグインのダウンロードは下記のリンクをクリックしてください。
または
インストール
-
Lightbox Galleryプラグインをインストールするには、上記の圧縮ファイルを解凍し、lightbox-gallery.jsの2行目のパスをご利用の環境に合わせて設定する。
- lightbox-galleryディレクトリをそのままwp-content/pluginsディレクトリにアップロードし、Lightbox Galleryを有効化する。
使用方法
Lightbox Galleryを使用方法は、WordPress 2.5以降に搭載されているギャラリーと基本的には同じである。写真を複数登録し、[gallery]タグを投稿欄に挿入するだけである。写真のキャプションは、マウスが画像の上にくるとtooltip(ツールチップ)として表示され、写真の説明はLightboxが表示される際に表示される。
上級設定
[gallery]のショートコードのオプションは全て使用できる。詳しいオプションについては、WordPress 2.5の新機能 ギャラリー[gallery]を使って画像一覧表示するを参照してほしい。ここでは、標準のオプションに加えて、Lightbox Galleryで付け加えたオプションを説明する。
- lightboxsize
lightboxsizeに指定した大きさでLightboxを表示する。デフォルトではmedium になっているが、full に指定することも可能。
CODE:
-
[gallery lightboxsize="full"]
- meta
metaは写真の付随情報を表示するかどうかを指定する。デフォルトではfalseになっており、表示されない。表示したい場合はtrueを指定する。写真の付随情報は、カメラの機種、絞り値、焦点距離、シャッタースピード、撮影日時をLightboxに表示する。
- class
classはgalleryのクラス属性を追加する。デフォルトではgallery1になっている。
CODE:
-
[gallery class="gallery2"]
[実例] Lightbox Galleryプラグインを使用した写真アルバム(フォトログ)サイト
このLightbox Galleryプラグインを使用し、テーマもカスタマイズしたサイトを作成した。記憶の記録@GENTOKIというサイトで、筆者が実際に撮った写真を掲載している写真アルバム(フォトログ)サイトである。

記憶の記録@GENTOKI
もし需要があるようならテーマファイルも公開したいと思う。要望はコメント欄やお問い合わせから。その他、不具合やご質問・感想等があれば何なりとおっしゃってほしい。
Lightbox Gallery
This plugin changes the view of galleries to the lightbox.
Requirement
WordPress 2.5
Features
- Lightbox display of Gallery
- Tooltip view of caption of images
- Displays the associated metadata with images
Download
OR
Install
- Edit the `lightbox-gallery.js` and check the path of line 2 according to your settings.
- Copy the `lightbox-gallery` directory into your `wp-content/plugins` directory
- Activate the plugin through the 'Plugins' menu in WordPress
- That's it! :)
History
- 2008.05.08 Lightbox Gallery 0.2.1 Release
- Adds a class attribute into [gallery].
- 2008.05.08 Lightbox Gallery 0.2 Release
- Supports rel="lightbox" to make regular images appear in a lightbox.
- 2008.04.22 Lightbox Gallery 0.1 Release
How to use
How to use this plugin is basically the same as the way to add [gallery] which has been adopted by over WordPress 2.5. Lightbox Gallery plugin automatically converted the default view of gallery into the lightbox view. Photo captions are displayed as tooltips. Photo descriptions are displayed when the lightbox pops up.
Frequently Asked Questions
How can I make regular images appear in a lightbox without [gallery] shortcode?
Just add rel="lightbox" into "a" tag. Here is a sample.
<a href="image.jpg" rel="lightbox" title="this is a caption">
<img src="thumbnail.jpg" alt="" />
</a>
How can I handle multiple galleries in one page as saparate ones?
You need to do two steps. If you would like to handle galleries separately, add different class names into [gallery] and add codes as many as class names into `lightbox-gallery.js`.
- Edit `lightbox-gallery.js` and add some codes. Look at the comment of the file.
- Add a class attribute into [gallery]. ex) [gallery class="gallery2"]
Advanced settings
There are three additional options to extend the shorttag [gallery].
- lightboxsize
The image size when the lightbox pops up. The default is medium, but you can change to full.
CODE:
-
[gallery lightboxsize="full"]
- meta
Defines whether the exif information is displayed. The default is false. If you want to show the photo info, set true. The exif shown on the lightbox includes camera body, aperture, focal length, shutter speed, and created timestamp.
- class
Adds a class of the gallery. The default is 'gallery1'.
CODE:
-
[gallery class="gallery2"]
Demo
See Record of memory @ GENTOKI.
It's my photo album site.
Thanks.