WordPressを利用して、ブログではなくCMSとして企業サイト・企業ウェブサイト作成・商用ホームページ制作のテクニックを公開。WordPressの最新ニュースやプラグインの紹介、自作プラグインやテーマも開発中。
Lightbox Gallery plugin

Lightbox Gallery plugin

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

Lightbox Gallery プラグインタイトル
Lightbox Gallery [ English here ]

必須条件
WordPress 2.5以上

特徴
Lightbox Galleryは、の機能を拡張し、Lightboxで画像・写真を表示できるように変更するプラグインである。Lightbox Galleryの主な特徴は以下のとおり。

  • Lightboxで画像・写真を表示
  • Tooltip(ツールチップ)で画像のキャプションを表示
  • 写真の一覧表示はローディングっぽく遅延表示
  • 写真の付随情報(機種・絞り値など)を表示
  • ギャラリーの分割表示

ヒストリー

  • 2016.04.27 Lightbox Gallery 0.8.3 公開
    • コードクリーニング。
  • 2015.04.08 Lightbox Gallery 0.8.2 公開
    • 子テーマでの CSS 読込。
  • 2015.03.07 Lightbox Gallery 0.8.1 公開
    • 後方互換性:キャプション読込。
    • コードクリーニング。
  • 2015.02.17 Lightbox Gallery 0.8 公開
    • レスポンシブな出力対応。
    • ギャラリーコードの改善。
  • 2013.01.18 Lightbox Gallery 0.7.4 公開
    • バグフィックス:WordPress 3.5 対応。
  • 2012.07.14 Lightbox Gallery 0.7.3 公開
    • バグフィックス:rel="lightbox" での表示。
  • 2012.05.08 Lightbox Gallery 0.7.2 公開
    • バグフィックス:Lightbox の画像パス。
  • 2012.05.01 Lightbox Gallery 0.7.1 公開
    • GPLライセンス制限のため、デフォルトを Colorbox に変更。このサイトで配布しているファイルには、Lightbox のスクリプトが含まれますが、公式ディレクトリの配布には含まれていないため、Lightbox Gallery の設定画面よりスクリプトを取得する必要があります。
    • スロバキア語。
  • 2012.02.22 Lightbox Gallery 0.6.8 公開
    • GPLライセンス制限のため、highslide.js を削除。highslideを使用する場合は、設定画面に従ってファイルを設置してください。
    • バグフィックス: キーボードでの写真送り。
  • 2012.01.27 Lightbox Gallery 0.6.7 公開
    • バグフィックス: サブディレクトリにインストールしたWordPressでのボタン画像。
    • スウェーデン語。
  • 2012.01.12 Lightbox Gallery 0.6.6 公開
    • rel="lightbox" を自動的に投稿挿入時に追加するオプション。
    • コード整備。
    • バグフィックス: esc_attr() の追加。
    • クロアチア語、ヒンディー語、簡体字中国語。
  • 2011.03.25 Lightbox Gallery 0.6.5 公開
    • WordPressをサブディレクトリにインストールした場合に、自動でlightbox とhighslideのパスを設定。
    • チェコ語、ドイツ語、ルーマニア語
  • 2010.07.28 Lightbox Gallery 0.6.3 公開
    • jQuery lightBox plugin のライセンス変更。
    • ハンガリー語
  • 2009.12.21 Lightbox Gallery 0.6.2 公開
    • スクリプトをすべてのページで読み込むオプションの追加。
  • 2009.11.09 Lightbox Gallery 0.6.1 公開
    • バグフィックス:JavaScriptエラー。
  • 2009.11.08 Lightbox Gallery 0.6 公開
    • にclass属性を設定すると、ギャラリーが分割表示されます。
    • Highslide JSのサポート
    • JavaScriptのフッターロード
  • 2009.09.10 Lightbox Gallery 0.5 公開
    • jquery.lightbox.cssとjquery.tooltip.cssをlightbox-gallery.cssに統合
    • ベラルーシ語、ブラジルポルトガル語
  • 2009.07.28 Lightbox Gallery 0.4.7 公開
    • デフォルトのサムネイルサイズ、lightboxサイズの追加
  • 2009.07.23 Lightbox Gallery 0.4.6 公開
    • スペイン語、ポーランド語
    • バグフィックス:翻訳不完全部分
  • 2009.07.02 Lightbox Gallery 0.4.5 公開
    • オランダ語
  • 2009.06.03 Lightbox Gallery 0.4.4 公開
    • フランス語
  • 2009.05.25 Lightbox Gallery 0.4.3 公開
    • ロシア語
    • バグフィックス:JavaScript
  • 2009.05.15 Lightbox Gallery 0.4.2 公開
    • ページナビゲーションのバグ修正
  • 2009.05.14 Lightbox Gallery 0.4.1 公開
    • lightbox-gallery.jsをテーマディレクトリから読み込めるように。
    • イタリア語
  • 2009.04.27 Lightbox Gallery 0.4 公開
    • from, num属性の追加。ギャラリーの分割。
    • 管理画面で各種オプション設定。
  • 2008.09.30 Lightbox Gallery 0.3.1 公開
    • バグフィックス。
  • 2008.09.30 Lightbox Gallery 0.3 公開
    画像をゆっくり表示させている方は更新時にlightbox-gallery.jsの7行、8行目のコメント化を解除してください。

    • 1ページに表示する画像枚数が多くなった場合にLightboxが表示されない不具合を修正。特にSafari。
    • js、cssをギャラリーがあるページのみ読み込み。
  • 2008.09.05 Lightbox Gallery 0.2.6 公開
    • バグフィックス。
  • 2008.08.24 Lightbox Gallery 0.2.5 公開
    • バグフィックス。
  • 2008.08.21 Lightbox Gallery 0.2.4 公開
    • rel=”nofollow”に対応。画像の説明にリンクタグがあった場合のバグ修正。lightbox-gallery.cssのテーマ場所への設置対応。
  • 2008.07.16 Lightbox Gallery 0.2.3 公開
    • WordPress 2.5と2.6でorderbyの指定方法が異なる点を修正。
  • 2008.07.15 Lightbox Gallery 0.2.2 公開
    • WordPress 2.6のソースベースに変更。ISOを追加。
  • 2008.05.08 Lightbox Gallery 0.2.1 公開
    • のclass属性の追加。
  • 2008.05.08 Lightbox Gallery 0.2 公開
    • ショートコードのを使わずにlightboxで画像を表示する(rel=”lightbox”)のサポート
  • 2008.04.22 Lightbox Gallery 0.1 公開

ダウンロード
Lightbox Galleryプラグインのダウンロードは下記のリンクをクリックしてください。

または

インストール

  1. Lightbox Galleryプラグインをインストールするには、上記の圧縮ファイルを解凍し、lightbox-gallery.jsの2行目のパスをご利用の環境に合わせて設定する。
  2. lightbox-galleryディレクトリをそのままwp-content/pluginsディレクトリにアップロードし、Lightbox Galleryを有効化する。

テーマファイルの場所にlightbox-gallery.cssやlightbox-gallery.jsがある場合はそちらを読み込みます。ない場合はLightbox Gallery pluginにあるlightbox-gallery.cssとlightbox-gallery.jsを読みます。cssやJavaScriptを変更する場合は、テーマファイルの場所にlightbox-gallery.cssとlightbox-gallery.jsを置いておくと、プラグインのアップグレード時に上書きせずに済みます。

寄付

プラグインがお気に召しましたら、よろしければ下記のPaypalリンクよりご寄付ください。よろしくお願いいたします。




使用方法
Lightbox Galleryを使用方法は、WordPress 2.5以降に搭載されているギャラリーと基本的には同じである。写真を複数登録し、タグを投稿欄に挿入するだけである。写真のキャプションは、マウスが画像の上にくるとtooltip(ツールチップ)として表示され、写真の説明はLightboxが表示される際に表示される。

上級設定
のショートコードのオプションは全て使用できる。詳しいオプションについては、WordPress 2.5の新機能 ギャラリーを使って画像一覧表示するを参照してほしい。ここでは、標準のオプションに加えて、Lightbox Galleryで付け加えたオプションを説明する。

  • lightboxsize
    lightboxsizeに指定した大きさでLightboxを表示する。デフォルトではmedium になっているが、full に指定することも可能。

    
    
  • meta
    metaは写真の付随情報を表示するかどうかを指定する。デフォルトではfalseになっており、表示されない。表示したい場合はtrueを指定する。写真の付随情報は、カメラの機種、絞り値、焦点距離、ISO、シャッタースピード、撮影日時をLightboxに表示する。

    
    
  • class
    classはgalleryのクラス属性を追加する。デフォルトではgallery1になっている。

    
    
  • nofollow
    rel=”nofollow”を追加する。デフォルトではfalseになっている。

    
    
  • from, num
    fromは表示する画像位置、numは表示したい画像数。以下は3枚目の画像から5枚画像を表示する例。

    
    
  • pagenavi
    numを使用時に画像数に応じて画像のナビゲーションリンクが表示される。pagenaviを0にセットすると、ナビゲーションリンクを表示させない。ナビゲーションについては、wp_link_pagesと同じオプションが使用できる。

    
    

[実例] Lightbox Galleryプラグインを使用した写真アルバム(フォトログ)サイト
このLightbox Galleryプラグインを使用し、テーマもカスタマイズしたサイトを作成した。記憶の記録@GENTOKIというサイトで、筆者が実際に撮った写真を掲載している写真アルバム(フォトログ)サイトである。

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

  1. Edit the `lightbox-gallery.js` and check the path of line 2 according to your settings.
  2. Copy the `lightbox-gallery` directory into your `wp-content/plugins` directory
  3. Activate the plugin through the ‘Plugins’ menu in WordPress
  4. That’s it! :)

Lightbox Gallery will load ‘lightbox-gallery.css’ and ‘lightbox-gallery.js’ from your theme’s directory if they exist.
If they don’t exist, they will just load the default ‘lightbox-gallery.css’ and ‘lightbox-gallery.js’ that come with Lightbox Gallery. This will allow you to upgrade Lightbox Gallery without worrying about overwriting your lightbox gallery styles that you have created.

Donation

If you liked this plugin, please make a donation via paypal! Any amount is welcome. Your support is much appreciated.




History

  • 2016.04.27 Lightbox Gallery 0.8.3 Release
    • Code cleaning.
  • 2015.04.08 Lightbox Gallery 0.8.2 Release
    • CSS loading in a child theme.
  • 2015.03.07 Lightbox Gallery 0.8.1 Release
    • Backward compatibility: caption loading.
    • Code cleaning.
  • 2015.02.17 Lightbox Gallery 0.8 Release
    • Responsive output.
    • Gallery code renewal.
  • 2013.01.18 Lightbox Gallery 0.7.4 Release
    • Bugfix: support for WordPress 3.5.
  • 2012.07.14 Lightbox Gallery 0.7.3 Release
    • Bugfix: rel="lightbox".
  • 2012.05.08 Lightbox Gallery 0.7.2 Release
    • Bugfix: lightbox image path.
  • 2012.05.01 Lightbox Gallery 0.7.1 Release
    • From 0.7.1, the default view changed to Colorbox due to the license regulation by the plugin directory. If you would prefer the prior Lightbox to Colorbox, you need to get the script from the setting page.
    • Slovak (sk_SK) – Viliam Brozman
  • 2012.02.22 Lightbox Gallery 0.6.8 Release
    • Due to the license restriction, the highslide script has been removed.
    • Bugfix: key transition.
  • 2012.01.27 Lightbox Gallery 0.6.7 Release
    • Bugfix: button images of sub directory WordPress.
    • Swedish (sv_SE) – Anders Martensson
  • 2012.01.12 Lightbox Gallery 0.6.6 Release
    • Option to add rel="lightbox" automatically in the post insert.
    • Code cleaning.
    • Bugfix: addition of esc_attr().
    • Croatian (hr) – Tomislav Konestabo
    • Hindi (hi_IN) – Outshine Solutions
    • Simplified Chinese (zh_CN) – leonanu
  • 2011.03.25 Lightbox Gallery 0.6.5 Release
    • Lightbox and Highslide path.
    • Czech (cs_CZ) – Petufo
    • Germany (de_DE) – Michael Wruck and Tacitus Media
    • Romanian (ro_RO) – Anunturi Jibo
  • 2010.07.28 Lightbox Gallery 0.6.3 Release
    • jQuery lightBox plugin license changed.
    • Hungarian (hu_HU) – Zsolt Vereb and Feriman
  • 2009.12.21 Lightbox Gallery 0.6.2 Release
    • Enforced loading option of lightbox gallery scripts.
  • 2009.11.09 Lightbox Gallery 0.6.1 Release
    • Bugfix: JavaScript error.
  • 2009.11.08 Lightbox Gallery 0.6 Release
    • If you set the `class` attribute into , galleries are handled separately. ex)
    • Support for the Highslide JS.
    • Support for the javascript loading in the footer.
    • Turkish (tr_TR) – Hakan Demiray
  • 2009.09.10 Lightbox Gallery 0.5 Release
    • Combine jquery.lightbox.css and jquery.tooltip.css into lightbox-gallery.css.
    • Brazilian Portuguese (pt_BR), Belorussian (be_BY)
  • 2009.07.28 Lightbox Gallery 0.4.7 Release
    • Default thumbnail size and lightbox size.
  • 2009.07.23 Lightbox Gallery 0.4.6 Release
    • Spanish, Polish
    • Bugfix: translation miss
  • 2009.07.02 Lightbox Gallery 0.4.5 Release
    • Dutch
  • 2009.06.03 Lightbox Gallery 0.4.4 Release
    • French
  • 2009.05.25 Lightbox Gallery 0.4.3 Release
    • Russian
    • Bugfix: JavaScript
  • 2009.05.15 Lightbox Gallery 0.4.2 Release
    • Bugfix: page navigation
  • 2009.05.14 Lightbox Gallery 0.4.1 Release
    • Loads `lightbox-gallery.js` from your theme directory. Do not worry about overwriting in upgrade of the plugin any more.
    • Italian
  • 2009.04.27 Lightbox Gallery 0.4 Release
    • Adds from and num attributes. Gallery Division.
    • Additional settings are set in the option page
  • 2008.09.30 Lightbox Gallery 0.3.1 Release
    • Bugfix
  • 2008.09.30 Lightbox Gallery 0.3 Release
    If you make images display slowly, please edit lightbox-gallery.js line 7 and 8.

    • Bugfix that lightbox does not work when images increase, especially Safari.
    • Output jquery and lightbox scripts only in the replated page.
  • 2008.09.05 Lightbox Gallery 0.2.6 Release
    • Bugfix
  • 2008.08.24 Lightbox Gallery 0.2.5 Release
    • Bugfix
  • 2008.08.21 Lightbox Gallery 0.2.4 Release
    • Adds the nofollow attribute. A bugfix for the situation which includes link tags in the description field. Load ‘lightbox-gallery.css’ from your theme’s directory if it exists.
  • 2008.07.16 Lightbox Gallery 0.2.3 Release
    • Fixes the orderby difference between WordPress 2.5 and 2.6.
  • 2008.07.15 Lightbox Gallery 0.2.2 Release
    • Changes to the source based on WordPress 2.6. Adds the ISO attribute.
  • 2008.05.08 Lightbox Gallery 0.2.1 Release
    • Adds a class attribute into .
  • 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 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 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 and add codes as many as class names into `lightbox-gallery.js`.

  1. Edit `lightbox-gallery.js` and add some codes. Look at the comment of the file.
  2. Add a class attribute into . ex)

Advanced settings
There are three additional options to extend the shorttag .

  • lightboxsize
    The image size when the lightbox pops up. The default is medium, but you can change to 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, ISO, shutter speed, and created timestamp.

    
    
  • class
    Adds a class of the gallery. The default is ‘gallery1’.

    
    
  • nofollow
    Adds the attribute, rel=”nofollow”. The default is false.

    
    
  • from, num
    Defines from which and how many photos are displayed. If the number of photos is over that of num, the navigation will be shown. You can use the navigation option almost same as the wp_link_pages function.

    
    
  • pagenavi
    If you would like not to show the navigation, set 0. The default is 1.

    
    

Demo
See Record of memory @ GENTOKI.
It’s my photo album site.

Thanks.

495 Comments

  1. Dear lightbox gallery creator,
    I like the plugin very much except for one thing. The tooltip caption is so very large. Especially when looking at a thumbnail. Is it possible to have a small font size.
    Yes I have made a donation.
    Regards,
    Dana

  2. Pingback: New Basic Plug-ins | FireDune

  3. Thanks for any help provided. I cannot get the caption to show up at all except for the tooltip.
    Prevfiously I did have luck getting the lightbox version to have caption, but not working anymore

  4. Pingback: Programming languages » 15 wordpress plugins for galleries and slideshows

  5. Hello and thank you for this fine plugin. I new to WordPress and i request your help in regards to the single images displayed in lightbox.

    I do not understand in which file i have to add the following line: rel=”lightbox” in order to get standalone images be loaded with lightbox.

    Thank you!

  6. Hey!

    First of all, I love this plugin!

    What I am wondering is if there is any way to only display the first image of the gallery as a thumbnail and then when you click on it get the entire gallery?

    I realize this might go beyond the scope of what this plugin was intended for, but if you happen to know the answer to this it would be highly appreciated!

    Thanks in advance!

  7. Pingback: wired crow » IRL Events

  8. Pingback: Lightbox Gallery em Português (pt_BR) - Plugin para Wordpress | DJIO.com.br

  9. Pingback: bibouloku » Blog Archive » Wordpress Plugins

  10. Hi, I installed the Lightbox Plugin but i have some problem to make different Gallery in the same page/post.
    How is possible upload different goups of images in the same wordpress page, to realize different Galleries?
    This is not possible with WP uploader?

    I have already add different class name in lightbox-gallery.js

    jQuery(‘.gallery1 a’).lightBox({captionPosition:’gallery’});
    jQuery(‘.gallery2 a’).lightBox({captionPosition:’gallery’});
    jQuery(‘.gallery3 a’).lightBox({captionPosition:’gallery’});
    jQuery(‘.gallery4 a’).lightBox({captionPosition:’gallery’});
    etc..
    etc..

    and I used in shortcode: ex.) [gallery lightboxsize="full" columns="4" class="gallery2"]

    What to make more… to show separates Galleries like this >> http://hiroaki.gentoki.com ?

    Thanks!

    Luca
  11. Pingback: WordPressプラグインリストなンダ | Studio GAKI !

  12. Pingback: Downgraf – Design weblog for designers » 15 wordpress plugins for galleries and slideshows

  13. Hi, love your plug in but on the site I am currently using it on the PREV, NEXT and CLOSE buttons are not displaying properly. They work fine on another site I have which uses the plug in. Any idea why this might be?

    Many thanks

  14. Pingback: Stand Still for these Wordpress Plugins | Michael Jancart / Stand Still Designs

  15. Pingback: The Most Useful WordPress Plugins - Dreamway Media

  16. I put the lightbox-gallery to display multiple galleries on a WordPress page. It seems to display pictures on the lightbox effect, but it doesn’t inclede any buttoms such as closeX at all. I tried to change the css but I coud’t find the solution. My site is operated on WordPress 2.9.2 on localhost. I am accessing via Window vista.

  17. Hi – I’ve just updated to the latest version (0.6.8).

    It all works fine apart from keyboard interaction.

    If I try advancing through a gallery using the left and right arrow keys the animation goes haywire and the gallery order gets mixed up.

    The previous version worked fine.

    This is using Firefox 10.0.2 on Windows BTW

  18. Pingback: WPのフォトログ用テーマ「Gentoki」 » President-Room

  19. Pingback: 大和製瓦株式会社 | 大和製瓦株式会社

  20. Pingback: 画像拡大表示用WPプラグイン「Simple Lightbox」 | President-Room

  21. Pingback: WordPressのギャラリーショートタグでJavaScriptモーダルウインドウ | Waka8*Stakes

  22. Pingback: Mahli’s Musing » Blog Archive » Garden Update (01-04-2012)

  23. Pingback: 18 Best WordPress Gallery Plugins to Showcase your Portfolio | Wordpress Junkie  

  24. Hello, I am using WP ver. 3.3.1 and using the Lightbox Gallery plugin to display my galleries. Everything works well, but the captions and descriptions of the pictures are smaller than I want. Is there any shortcode ormethod to editing the caption or description font/size/color etc when it is displayed in the lightbox??

  25. Pingback: 18 Best Wordpress Gallery Plugin Portfolio | Smashing Feed

  26. Pingback: Show Your Love for the Top 100 WordPress Plugin Developers - ManageWP

  27. Pingback: 必見!Wordpress人気のプラグインTop100 | WORDPRESSからの~

  28. Hi there, I love the lightbox gallery!

    I’ve just discovered from an SEO analyser tool on Bing that tags within galleries don’t have ALT attributes defined. It appear this info is being lost somehow for any images in a lightbox gallery. Is it something that can be fixed?
    Thanks
    Ros

  29. Greetings from Carolina! I’m bored to death at work so I decided to browse your website on my iphone during lunch break. I enjoy the info you provide here and can’t
    wait to take a look when I get home. I’m amazed at how fast your blog loaded on my mobile .. I’m not even
    using WIFI, just 3G .. Anyways, good blog!

  30. I’ve just updated to wordpress 3.5 and now my lightbox gallery doesn’t work with the new wordpress galleries. When I activate the plugin, the galleries are all displaying together instead of separate galleries positioned on the page where they need to be. I realize this is a big change from wordpress. Are you planning on updating to be compatible with the newest version of wordpress galleries soon? I love this plugin and hope you will keep developing it.

    Thanks,
    Amy

  31. I enconteres a similar probem as Prada. I run wordpress 3.5 and the lightbox gallery plugin works fine for pictures, which are uploaded together with the article.

    However, if I try to include a gallery which consists of older pictures (uploaded with former posts) the whole gallery does not show up at all. It seems to me, that the plugin intepretes the [gallery]-tag always as the gallery from the articles own pictures.

    Can you confirm this behavior?

    Thanks for your time!
    Hans

    Hans

Comments are closed.