HOME 　»　css , Google , JavaScript , plugin , summary , Wordpress 　»　lightbox風に画像を表示できるプラグインいろいろ

lightbox風に画像を表示できるプラグインいろいろ

Wordpressになったらやってみたい事がいくつかあったのですが、そのうちの一つが他のサイトさんでよく見かけるlightbox風の画像処理をかける事でした。
Wordpressならプラグインひとつで取り入れられるだろうという、甘いもくろみがあったからなんですけど、結局試行錯誤して類似プラグインを散々試すはめになったので、これらについて簡単にまとめてみます。

導入方法はどれも一緒で、ファイルをダウンロード→解凍したら、pluginフォルダに放り込んで有効化するだけです。
英語が苦手なので誤訳していたらごめんなさい。
　

Lightbox 2.0 for WordPress

• ファイル配布先：Lightbox 2.0 for WordPress
• 元画像ファイルに追記するコード：自動付与
• グループ表示：「rel=”lightbox[任意の分類名]“」と手動で記述　【追記あり】
• 元ソース・デモ：Lightbox 2

lightbox元祖。自動でrel属性を付与してくれるのが楽ちんですが、ファイルサイズが大きいためか少し重いらしいです。
テキストリンクにも「rel=”lightbox”」と手動で書き込めば、同じ効果が得られます。

追記

コメント欄で教えていただいたのですが、投稿時に複数の写真を連続でアップロードすると、エントリidがグループ名となって、自動でグループ化できるそうです。

WP lightbox Plus WordPress plugin

• ファイル配布先：WP lightbox Plus WordPress plugin
• 元画像ファイルに追記するコード：自動付与
• グループ表示：対応なし
• 元ソース・デモ：Lightbox Plus

初代lightboxの独自改良版。
ウィンドウサイズよりも大きい画像は自動で縮小し、縮小された画像は画面上で拡大することができます。

Litebox plugin for Wordpress

• ファイル配布先：Litebox plugin for Wordpress
• 元画像ファイルに追記するコード：手動で「rel=”lightbox”」と記述
• グループ表示：「rel=”lightbox[任意の分類名]“」と手動で記述。
• 元ソース・デモ：Litebox – Same great taste, fewer calories

ファイルサイズが約3kbととにかく軽いのが最大の特徴。このサイトではこれを使っています。
なおこちらの記事でrelを自動付与するためのカスタマイズが紹介されています。

Litebox/Lightboxの使い方 – Ogawa::Memoranda

また、「http://hogehoge.xxx.jp/wp/」に独自ドメインを割り振って「http://hogehoge.com/」としている人がこのプラグインを使用する時は、若干スクリプトを書き換えないと、個別ページで”Close”ボタンが表示されなくなります。
修正箇所は検索でwp-content/plugins/gblitebox/js/litebox-1.0.js の以下の部分。
（wp-content の前にスラッシュ付与）

var fileLoadingImage = "/wp-content/plugins/gblitebox/images/loading.gif";
var fileBottomNavCloseImage = "/wp-content/plugins/gblitebox/images/closelabel.gif"

参考記事　SnowHouse » Litebox プラグイン修正

Slimbox Wordpress Plugin

• ファイル配布先：Slimbox Wordpress Plugin
• 元画像ファイルに追記するコード：「rel=”lightbox”」を手動で記述。
• グループ表示：「rel=”lightbox[任意の分類名]”」を手動で記述。
• 元ソース・デモ：Slimbox, the ultimate lightweight Lightbox clone · digitalia.be

lightboxを内容は全く一緒ですが、ファイルサイズが若干軽く、MITライセンスなので本家より気軽に使えるのが特徴。
cssが綺麗で、立ち上がりが早いとの事。

WordPress iBox

• ファイル配布先：WordPress iBox
• 元画像ファイルに追記するコード：自動付与。
• グループ表示：対応なし（？）←調べた範囲ではなさそうです
• 元ソース・デモ：iBox – Lightweight inline popup

prototype.jsなどと干渉せず、javascriptを切っているユーザーにも対応しているのが特徴です。
画像はウインドウサイズに合わせて自動縮小します。
便利な機能が満載なのですが、画質があまり綺麗じゃないのと、見た目がちょっと残念。

WP-GreyBox

• ファイル配布先：WP-GreyBox
• 元画像ファイルに追記するコード：（多分）自動付与。
• グループ表示：「rel=”gb_imageset[任意の分類名]“」を手動で記述。
• 元ソース・デモ：Orangoo Labs – GreyBox

ポップアップブロッカーに邪魔されず、prototype.js等のライブラリを必要としないので干渉もしないのが特徴だそうです。見た目をcssで制御することもできます。

WP-Lytebox

• ファイル配布先：WP-Lytebox
• 元画像ファイルに追記するコード：（多分）自動付与。
• グループ表示：「rel=”lytebox[任意の分類名"」を手動で記述。
• 元ソース・デモ：Lytebox - Home

従来の機能に加え、自動スクロールするスライドショーを展開できるのが最大の特徴です。
スライドショー化したいグループに「rel="lyteshow[任意の分類名]“」を付与すればOK。
終わった後に自動で元の画面に戻るところもなかなかよくできています。
iframeにも対応しているようです。（lightboxは非対応）

WordPress ThickBox plugin

• ファイル配布先：WordPress ThickBox plugin
• 元画像ファイルに追記するコード：「 class=”thickbox”」を手動で付与。
• グループ表示：グループ表示したい写真のタグを並べて記述するだけでOK
• 元ソース・デモ：ThickBox 3.1

MITライセンスのjQueryを使用しているライブラリを用いたプラグイン。
iframe・インラインのコンテンツ対応なので、HTMLも画像と同じように見せることが可能です。
lightboxよりは軽量との事。

Shadowbox JS Wordpress Plugin

• ファイル配布先：Shadowbox JS Wordpress Plugin | Sivel.net
• 元画像ファイルに追記するコード：自動付与。
• グループ表示：「rel=”shadowbox[任意の分類名]“」を手動で記述。
• 元ソース・デモ：Shadowbox JS Wordpress Plugin | Sivel.net

jQuery、Prototype、YUIなど使用するコアライブラリを選択できるのが特徴。
画像だけでなくHTMLや動画、またYouTubeやGoogle Video等の外部サービスもポップアップする事が可能です。
タイトルがぽこっと上に飛び出してくる様子がちょっとかわいいです。

Lightview JS WordPress Plugin

• ファイル配布先：Lightview JS WordPress Plugin | Sivel.net
• 元画像ファイルに追記するコード：「class=”lightview”」を手動で記述。
• グループ表示：「rel=”gallery[任意の分類名]”」を手動で記述。
• 元ソース・デモ：Lightview

背景色・ボタンの不透明度・角丸の度合い・リサイズ時のエフェクトなどを設定できるプラグイン。
iflameやインライン表示、動画等にも対応しています。
設定できる要素の説明はこちらの記事が詳しかったです。

[JS]多彩なカスタマイズが可能な画像を拡大するスクリプト -Lightview | コリス

まだまだありそうですが、根気が続かなかったのでこの辺で。
私の場合あれこれ入れてみたものの、画像が縮小されるのが気に入らなかったり、うまく動かなかったりで泣く泣くつけたりはずしたりする羽目になりました。
サーバや他に入れているプラグインとの相性で動作が変わってくるので、とりあえずいろいろ試してみるといいんじゃないかなと思います。

また、いちいちrel属性つけるのがだるい人は、合わせてFlexible-Uploadを導入すると、アップロードする時に、勝手にrel属性をプラグインが付け足してくれるので、もっとお手軽に使えます。
Lightbox（rel=”lightbox”が必要なプラグイン）、Greybox、Thickbox、HighslideJS及びLightWindow対応です。

Related Posts

• Google Adsenseをできるだけ最適化してみる
• 過去ログの内容も一括で置換できるプラグイン
• 超高速で超便利なAjax で全文検索するJavaScript
• 使用中のWordpressプラグイン一覧
• 今年のブクマをおさらいしてみた。

• Tags : css , Google , JavaScript , plugin , summary , Wordpress　|　TrackBack URL
• Prev : 過去ログの内容も一括で置換できるプラグイン　|　Next : 東京スカパラダイスオーケストラ＠赤坂BLITZ