2011年05月03日(火)

カッコよく画像を拡大ポップアップしてくれるワードプレスプラグインの比較

jQueryを使ったWordpress用の画像拡大表示プラグインをまとめました。
画像をクリックすると背景が暗くなって画像が浮かび上がってくるような表示になるアレです。
Lightbox系プラグインなんても呼ばれてます。

このプラグイン、同じようなのがいっぱいリリースされていてそれぞれ動作や内容が違うし結構数も多い・・・。
ということでここに各プラグインのスクリーンショット画像付きでまとめてみました。
導入したサイトもリンクしてあるので実際のアクションを見ながら比較できます。

追記:この記事と同じ形式で、ページのスクロールプラグインを比較する記事を書きましたのでよかったらご覧下さい。

比較に当たって、以下のプラグインは導入に至りませんでした。
また、個別に「rel=」で指定しないといけないものは除外しました(過去の画像すべてにつけないといけないため)。

Auto Thickbox
動作はとても軽く良かったのですが、カスタム出来なかったこととポップアップ動作があまりキレイでなかったため除外しました。
Fenix Lightbox
導入に少々手間がかかるため使用に至りませんでした。
WP-lightpop
背景が白くなってポップアップされます。とてもかっこよく、カスタムも行えるのですが、僕の環境では有効化できませんでした。時間を作れなかったため、今回は導入を見送りにしました。
使い方についてはこちらのサイト「愚者の紋章 -The Fool-」様で詳しく説明されていましたのでご覧下さい。

※名前が似ているものでも全く違うプラグインの場合があるのでご注意を!

Shadowbox JS

shadowbox_js-001

このブログで使ってるプラグインです。
とても動作が綺麗な上、カスタムも可能、画像ポップアップ中に記事中にある画像を順に辿るリンクも表示されます。

ダウンロード
Shadowbox JS
動作確認ページ
http://45395.org/uncategorized/how-to-change-the-default-theme-in-the-google-chrome/
WP FancyZoom

wp_fancyzoom-002
画像クリックした際に、背景を暗くするなどの変化はなく、影付き画像がポップアップする仕様です。

ダウンロード
WP FancyZoom
動作確認ページ
http://themes.gallery.cx/wordpress/royalty/
Auto Highslide
auto_highslide-003
動作が軽く、画像を拡大して浮かび上がらせた後、それをドラッグで移動させる事も出来ます。
追記:プラグインの更新がされない状態がしばらく続いた後、残念ながら公式サイトでの配布が停止したようです。

ダウンロード
Auto Highslide
動作確認ページ
http://blog.seory.jp/internet-news/greeeen-is/ (プラグインを停止しました)
Fancybox
fancybox-004
少しだけ背景が暗くなってポップアップします。動作がカッコイイ。

ダウンロード
Fancybox
動作確認ページ
http://gotouchigurume.net/fetaured/yakimanjuu/
WP Facebox
wp_facebox-005
比較的素早い動作で拡大します。シンプルに表示したい場合におすすめです。

ダウンロード
WP Facebox
動作確認ページ
http://muryou-domain.kakito.me/free-domain-names/dot-co-cc/

ドメイン変更しました。
http://muryou-domain.com/free-domain-names/dot-co-cc/

jQuery Colorbox
jquery_colorbox-006
細かくカスタムできるので、様々な表示方法を実現する事が出来ます。
※有効化の後に設定画面から『Automate jQuery Colorbox for all images』にチェックして「変更を保存」ボタンを押してから有効になります。

ダウンロード
jQuery Colorbox
動作確認ページ
http://topick.jp/uncategorized/awful-photoshop-mistakes/
WP-Slimbox2 Plugin
wp_slimbox2_plugin-007
背景色を変更したり、ポップアップ画像の大きさや表示までの秒数などが細かく設定できます。
※有効化の後に設定画面から『Autoload?』にチェックして「変更を保存」ボタンを押してから有効になります。

ダウンロード
WP-Slimbox2 Plugin
動作確認ページ
http://cms.kakito.me/nucleus/install-nucleus/nucleus-install-sample-site/
WP SexyLightBox
wp_sexylightbox-008
※jQueryでの使用で不具合があったため、管理画面から「Libreria」の部分をMooToolsに変更して使用しています。

動きがとてもユニークで素敵です。
上から落っこちてくるような感じで拡大します。

ダウンロード
WP SexyLightBox
動作確認ページ
http://free-domain.gallery.cx/list/web-hosting/
Lightbox Plus ColorBox
Tumblrテーマギャラリー

スムーズに素早く広がる感じの動作。
拡大時の大きさやポディション、背景の透過率などなど細かい設定も可能。
設定は左メニューの「外観」「Lightbox Plus ColorBox」から行います。

ダウンロード
Lightbox Plus
動作確認ページ
http://tumblr.gallery.cx/
Easy FancyBox
WordPressテーマギャラリー

大きく急拡大して小さく戻すようなユニークな動作。
それほど細かい設定は出来ませんが、拡大したときの大きさや背景の透過率などの調整ができます。
インストール&有効化すると、左メニューの「設定」「メディア」のページ内に「FancyBox」という項目が追加されているのでそこから設定が行えます。

ダウンロード
Easy FancyBox
動作確認ページ
http://wordpress.gallery.cx/
Fancybox for WordPress

画像・説明文作成中です。

ダウンロード
Fancybox for WordPress
動作確認ページ
http://fukui-ramen.com/

  • © 2010-2017 試行錯誤 All Rights Reserved.