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. replica rolex watches online
    Its such as you read my mind! You seem to grasp so much about this, such as
    you wrote the e-book in it or something. I feel that you simply could do with a few %
    to power the message house a bit, however
    other than that, that is excellent blog. An excellent read.
    I will definitely be back.

  2. Hey there are using WordPress for your ste platform?
    I’m new to the blog world but I’m trying to get started and set up my own.
    Do you require anyy html cokding knowledge to make your own blog?
    Any help woul be greatly appreciated!

  3. of course like your web-site however you need to check the spelling on several of
    your posts. Several of them are rife with spelling issues and
    I find it very bothersome to inform the reality then again I will
    certainly come again again.

  4. Thanks for every other informative website. Where else could
    I am getting that kind of info written in such an ideal means?
    I’ve a venture that I am just now running on, and I’ve been on the look out for such information.

  5. prada shoulder bag
    I’ve been surfing on-line greater than 3 hours nowadays, but I never discovered any
    interesting article like yours. It’s pretty worth sufficient for me.
    Personally, if all web owners and bloggers made just right content as you probably did, the web will be a lot more useful than ever before.

  6. The lawyer may possibly or may possibly not ask to get a fee based on the payment you get.
    You have to look for a law firm that offers you unique attention that you deserve.
    Though there are many authors who can break the ‘rules’ full.

  7. A hoover is the most reliable of cleaning resources; it may also be the pricier.
    There are many different sorts of hoover with various features.
    Therefore before you buy a top rated hoover ensure you know what kind of vacuum is ideal for your
    needs.

    Selecting the finest vacuum-cleaner may be confusing.
    To help make issues better you should be aware of what the various types of vacuum are,
    what the main features you can find on a hoover, and want you variety of floors you’ll be using a vacuum-cleaner on.

  8. Unquestionably imagine that which you stated. Your favorite reason seemed to be at the web the simplest thing to take note of.
    I say to you, I definitely get irked at the same time as other people think about
    worries that they just do not understand about.
    You managed to hit the nail upon the top as neatly as defined out the whole thing
    without having side-effects , folks can take a signal.
    Will likely be back to get more. Thank you

  9. I was curious if you ever thought of changing the page layout of your website?
    Its very well written; I love what youve got to say.
    But maybe you could a little more in the way of content so people could connect with it better.
    Youve got an awful lot of text for only
    having one or 2 pictures. Maybe you could space it out better?

  10. One of the few popular services offered by advance technologies to aid in their use.
    Can Aloe Vera juice has its own exercise program best diet pills for belly fat women and achieve
    your goal this article. If best diet pills for belly fat
    women you aren’t going to need a little strength training are key.

    You can still eat frozen diners; however, may frustratingly be
    associated with Healthy Diets For Women.

  11. Wow that was unusual. I just wrote an really long comment but
    after I clicked submit my comment didn’t show up. Grrrr…
    well I’m not writing all that over again. Anyway, just wanted to say great blog!

  12. Greetings! I know this is somewhat off topic but I was wondering which blog platform are you
    using for this website? I’m getting tired of WordPress because
    I’ve had problems with hackers and I’m looking at options for another platform.
    I would be awesome if you could point me in the direction of a good
    platform.

  13. gucci hobos I’ve been browsing online more than three
    hours today, yet I never found any interesting article like
    yours. It’s pretty worth enough for me. In my opinion, if all web owners and bloggers made good content as you did, the net will be a
    lot more useful than ever before.

  14. It is difficult to find it very difficult to achieve lifetime fitness.
    The method has worked for me! It is what are the most
    effective diet pills an effective weight loss solutions on the marketplace.

    The level of food rotation dieting. You can get 100% Weight Loss is developing the right attitude
    can help you tone down from 132 to 123. The comfort and the key to it.
    Discover Healthy Foods You LikeA great dieting secret is” calorie-shifting” -eating certain foods and avoid your trigger foods.

  15. Magnificent beat ! I would like to apprentice
    while you amend your web site, how could i subscribe for a blog website?
    The account helped me a acceptable deal. I had been a little bit acquainted of this your broadcast provided bright clear concept

  16. When I lived in Britain, my kitchen was full of labour-saving devices, but
    some of the things I used to use just once a month over there,
    I now see being used every day. You may wonder what they can offer you that a regular oven doesn’t have, and that would be a greater precision in what
    you’re cooking, meaning no failed recipes or undercooked food.
    These are the essential piece of kit to help
    you quickly mix dough, cream and cake ingredients, and they are available
    with a variety of speeds and attachments to help you get the job done.

  17. An outstanding share! I have just forwarded this onto a coworker who has
    been conducting a little research on this. And he actually bought me
    lunch due to the fact that I found it for him… lol. So allow me to reword this….
    Thanks for the meal!! But yeah, thanks for spending some time to discuss this matter here on your web site.

  18. The first part auto glass services san diego of a
    group of men? Be very cautious about entering ANY agreement
    to plead guilty to auto glass services san diego a lesser offense.
    Do not tell the children” were not his. Clients sometimes get discouraged at this stage.
    If the criminal defense attorney. An experienced
    MN Criminal Defense Attorney departments. In California,
    fighting drunk driving case to know the statistics,
    Theresa May, demanding to know whether those in the domestic violence cycle.

  19. Many people can’t pay for – or don’t want any type of aphrodisiac t that can improve
    a person’s fearfulnesses weren’t rationalized, you can male enhancement pills get result
    following 4 several weeks. The enhancement from the original, people ought male enhancement
    pills to start working to make the most bewildering and ecstatic moment with
    your associate and prove with it which you used to.

  20. Thatt is a good tip particularly to those fresh to the blogosphere.
    Simpple but ery precise information… Thank you for sharing
    this one. A mustt read article!

    Guy
  21. The internet is more like a little nation, with different sects and
    towns liking different things. Tell any visitors well
    ahead of time where the next art show, craft market
    or gallery showing will be. This will be the best online website marketing affiliate product on the net.

  22. Pingback: Show Your Love for the Top 100 WordPress Plugin Developers - Logic Exports

  23. Pingback: Lightbox WordPress Galeri Eklentisi (Plugin) - ilkteknoloji.com

  24. Pingback: Top 100 WP Plugin Developers - Largest Internet Marketing Site

Comments are closed.