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

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

2008/03/26　|　Comments & Trackbacks : 6

lightboxキャプチャ

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

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

Lightbox 2.0 for WordPress

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

追記

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

WP lightbox Plus WordPress plugin

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

Litebox plugin for Wordpress

ファイルサイズが約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

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

WordPress iBox

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

WP-GreyBox

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

WP-Lytebox

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

WordPress ThickBox plugin

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

Shadowbox JS Wordpress Plugin

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

Lightview JS WordPress Plugin

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

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

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

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

Related Posts

Google Adsense

Comments & Trackbacks : 6

Response from [cipher]2008 年 3 月 28 日　7時26分

おはようございます。
うちはLightbox for 〜を使ってますが、グループ表示は連続して写真をWordPress内にアップして入れちゃうと、エントリーIDがセット名になって自動的に挿入されますよん。
Flickrとか使うと手動ですが…。

Response from もそ2008 年 3 月 29 日　15時14分

こんにちはー。
連続して写真をアップするとエントリIDがセット名になって入るとは知りませんでした。
まだ連続upしたことないんです（苦笑）。
情報ありがとうございました。修正しておきます。

Response from [cipher]2008 年 4 月 1 日　10時56分

2.5にアップして気付いたのですが、2.5から標準のアップローダーが改良されていて、まだflexible-uploadが対応してないので手動です（笑）。
Liteboxは普通に動いてます。
Lightboxはうちでは最新版にしても動きません…。

Response from もそ2008 年 4 月 2 日　9時10分

私も2.5にしてみたのですが、flexible-upload動いてませんね。
本体側でもサムネイルの大きさが指定できるようになったものの、まだまだ機能的に足らないので、対応版のリリースが楽しみです。
Liteboxはここで動いてる情報をゲットできたので助かりました（笑）。

Response from もも2008 年 4 月 8 日　19時05分

はじめまして
私もflexible-updateを使っていましたが２．５で動きませんね

２．５本来の機能の複数画像の連続アップロードとギャラリーの一覧表示は
出来るのですが　選んで記事への挿入が出来ませんね

幸いＵＰとサムネイルはできていますから　手でｈｔｍｌを書いて　貼り付けることで
ＬＩＧＨＴ－ＢＯＸを生かしている現状ですけど

どこを探しても成功した　という話はないようですので
素直に　２．５．１を待つことにします

意外と早く出るヨカンはあるのですけどね＾＾

Response from もそ2008 年 4 月 9 日　13時30分

はじめまして!
2.5になって連続アップロードができるようになったことを、ももさんのコメントで知りました（苦笑）。
ギャラリーも先ほど試してみたのですが、微妙に使いづらいですね。
やっぱりflexible-uploadの方が使いやすかったなぁ、といまさらながら思います。
対応版のリリースが待ち遠しいです。