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
- Tags : css , Google , JavaScript , plugin , summary , Wordpress | TrackBack URL
- Prev : 過去ログの内容も一括で置換できるプラグイン | Next : 東京スカパラダイスオーケストラ@赤坂BLITZ
Comments & Trackbacks : 13
おはようございます。
うちはLightbox for 〜を使ってますが、グループ表示は連続して写真をWordPress内にアップして入れちゃうと、エントリーIDがセット名になって自動的に挿入されますよん。
Flickrとか使うと手動ですが…。
こんにちはー。
連続して写真をアップするとエントリIDがセット名になって入るとは知りませんでした。
まだ連続upしたことないんです(苦笑)。
情報ありがとうございました。修正しておきます。
2.5にアップして気付いたのですが、2.5から標準のアップローダーが改良されていて、まだflexible-uploadが対応してないので手動です(笑)。
Liteboxは普通に動いてます。
Lightboxはうちでは最新版にしても動きません…。
私も2.5にしてみたのですが、flexible-upload動いてませんね。
本体側でもサムネイルの大きさが指定できるようになったものの、まだまだ機能的に足らないので、対応版のリリースが楽しみです。
Liteboxはここで動いてる情報をゲットできたので助かりました(笑)。
はじめまして
私もflexible-updateを使っていましたが2.5で動きませんね
2.5本来の機能の複数画像の連続アップロードとギャラリーの一覧表示は
出来るのですが 選んで記事への挿入が出来ませんね
幸いUPとサムネイルはできていますから 手でhtmlを書いて 貼り付けることで
LIGHT-BOXを生かしている現状ですけど
どこを探しても成功した という話はないようですので
素直に 2.5.1を待つことにします
意外と早く出るヨカンはあるのですけどね^^
はじめまして!
2.5になって連続アップロードができるようになったことを、ももさんのコメントで知りました(苦笑)。
ギャラリーも先ほど試してみたのですが、微妙に使いづらいですね。
やっぱりflexible-uploadの方が使いやすかったなぁ、といまさらながら思います。
対応版のリリースが待ち遠しいです。
[...] lightbox風に画像を表示できるプラグインいろいろ : 今日の覚え書き Tickler’s bunkum days …WP-Lytebox WP-Lytebox ファイル配布先:WP-Lytebox 元画像ファイルに追記するコード:(多分)自動付与。 [...]
[...] Tickler’s bunkum days:lightbox風に画像を表示できるプラグインいろいろ [...]
[...] それなら軽いthickboxやGreyBoxが良いかも 【更に追記メモ】 今日の覚え書き Tickler’s bunkum days様の所にて Liteboxの覚書があって終にに念願の求めてた [...]
[...] その辺はこちらのサイトで詳しく解説してくれているのですが。 で、オイラとしてはrelが手動ではなく自動付加のがほしいのである程度限られてくるわけですが。 [...]
WordPress で Lightbox 的効果をつける【Slimbox Plugin】
画像をクリックして大きくしたとき、オーバーフローで浮き上がってくる動作で表示してくれる WordPress プラグインをインストールしてみました。
まずはどんなものがあるのか調査。以下…
WP-Lytebox プラグインにセキュリティホール?
ワードプレスのプラグイン WP-Lytebox自動スライドショーが、かなりいい感じだなーと思って、調べていたらWP-Lytebox プラグインにセキュリティホールがある様子。セキュリティホール情報…
[...] 以下参考記事。 via:lightbox風に画像を表示できるプラグインいろいろ by suntaro wordpress コメント (0) [...]