レスポンシブ対応も含め、Lightbox系(モーダルウインドウ)プラグイン25個の簡単な使い方とサンプルまとめました

jQueryを使ったプラグインの中でもポピュラーな背面をグレーアウトさせて画像などを表示するLightbox系のプラグイン。

ギャラリーサイトで拡大画像を表示したり、HTMLを読み込んで詳細情報を表示したりなどと、あらゆるサイトでさまざまな使われ方をしており、現在では多機能なオプションを備えたものから、レスポンシブWebデザインに対応したものまでさまざまなプラグインが存在しています。

今回はそんなLightbox系(モーダルウィンドウ)プラグインを最新のものからオーソドックスに実用的なものまで、簡単な使い方とサンプルページを一挙にまとめてみました。

レスポンシブ対応のものはライセンス購入が必要なものも多いですが、モーダルウィンドウのレスポンシブWebデザインの見せ方の参考になるかもしれません。

ベーシックなLightbox系(モーダルウィンドウ)プラグイン

Lightbox2

Lightbox2
http://lokeshdhakar.com/projects/lightbox2/

モーダルウィンドウといえばLightboxという代表的なプラグイン。

Lightbox2はjQueryベースのものでデザインもシンプルで使い勝手が良いです。

Slimbox2

Slimbox2
http://www.digitalia.be/software/slimbox2

Lightbox開発者によるjQueryベースの軽量なモーダルウィンドウプラグインです。

FancyZoom

FancyZoom
http://www.cabel.name/2008/02/fancyzoom-10.html

サムネイルをクリックすると画像がズームアニメーションで表示されるシンプルなプラグインです。
(※個人や非営利でのサイトでの使用は無料ですが、商用サイトではライセンスの購入が必要です。)

HTMLの表示ができるLightbox系(モーダルウィンドウ)プラグイン

ColorBox

ColorBox
http://www.jacklmoore.com/colorbox

画像、iframe、inline、ajax読み込みなどに対応したマルチ機能のプラグインです。

デザインのバリエーションも4つあり、多機能なモーダルウィンドウの表示が必要な際に実用的なプラグインです。

PrettyPhoto

PrettyPhoto
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

画像、iframe、inline、ajax読み込みなどに対応したマルチ機能のプラグインで、さまざまなテーマに合わせたデザインや角丸のボックスが特徴的です。

DOM window

DOM window
http://swip.codylindley.com/DOMWindowDemo.html

inlineやiframeなどをDOM要素を生成してモーダルウィンドウを表示するプラグインです。

jQuery SuperBox!

jQuery SuperBox!
http://pierrebertet.net/projects/jquery_superbox/

画像、iframe、inline、ajax読み込みなどに対応したマルチ機能のプラグインです。

ThickBox

ThickBox
http://thickbox.net/

画像、iframe、inline、ajax読み込みなどに対応したマルチ機能のプラグイン。
昔からあるクラシックなプラグインですが、その分IE6でも表示ができます。

nyroModal

nyroModal
http://nyromodal.nyrodev.com/

画像、iframe、inline、DOM要素、フォーム、ajax読み込みなど、さまざまなコンテンツの読み込みに対応したプラグイン。

ModalBox

ModalBox
http://opensource.steffenhollstein.de/templates/modalbox/

画像、iframe、inline、ajax読み込み、フォームなどの多機能なコンテンツをシンプルなモーダルウィンドウで表示するプラグイン。

SimpleModal

SimpleModal
http://www.ericmmartin.com/projects/simplemodal/

コンタクトフォームやログイン画面、ダイアログなどをシンプルなモーダルウィンドウで表示するプラグイン。

learnModal

learnModal
http://leanmodal.finelysliced.com.au/

iframeやajaxでの読み込みには対応していませんが、軽量でシンプルなモーダルウィンドウが実装できるプラグイン。

Reveral

Reveral
http://www.zurb.com/playground/reveal-modal-plugin

モーダルウィンドウを簡単に実装できるプラグインです。

レスポンシブ対応のLightbox系(モーダルウィンドウ)プラグイン

Fancybox1

Fancybox1
http://fancybox.net/

サンプルページではウインドウサイズに合わせて画面中央にウインドウが移動する機能のみを確認できますが、オプションのリサイズメソッドを設定することでコンテンツ幅にモーダルウィンドウのサイズを合わせることができるようです。

Fancybox2

Fancybox2
http://fancyapps.com/fancybox/

Fancybox1ではメソッドの設定などカスタマイズが必要ですが、このFancybox2ではデフォルトでウインドウのサイズに合わせて自動でモーダルウィンドウが縮小・拡大し、画面中央に配置されます。

画像だけでなくYouTubeなどの動画からHTMLの読み込みにも対応しているため便利で多機能なプラグインです。
(※個人や非営利でのサイトでの使用は無料ですが、商用サイトではライセンスの購入が必要です。)

Fresco

Fresco
http://www.frescojs.com/

サンプルの公式サイトもレスポンシブWebデザインで、HTML5のvideoタグに対応していたり、HTML5のソースでの実装チュートリアルなども見ることができたりと、新しいデバイスを意識したプラグインです。
シンプルな見た目でスマートフォンなどでも見やすいモーダルウィンドウの実装が可能です。

無料でダウンロードできるベーシックな機能のものと、サムネイルの表示やYouTubeなどの動画も表示できる多機能なオプションを備えた「PRO」版があります。
(※個人や非営利でのサイトでの使用は無料ですが、商用サイトではライセンスの購入が必要です。)

rightbox

rightbox
http://ryrych.github.com/rlightbox2/

画面サイズに合わせて自動的にリサイズして表示され、拡大機能やキャプションの表示、「前へ/次へ」ボタンの表示など必要な機能が揃っています。
画像の他にもYouTubeやVimeo、Flashの表示に対応しているなどの高機能のプラグインです。

shadowbox

shadowbox
http://www.shadowbox-js.com/

シンプルで使い勝手の良いデザインのモーダルウィンドウで、ウインドウサイズに応じた自動リサイズ表示が可能です。

画像、swf、YouTube、Vimeo、QuickTime、Yahoo!ビデオ、Googleビデオ、Flashなどさまざまな動画ファイルにも対応しています。
(※個人や非営利でのサイトでの使用は無料版が、商用サイトではライセンスの購入が必要です。)

YoxView

YoxView
http://www.yoxigen.com/yoxview/

ギャラリーサイト向けのデザインでズームアニメーションの表示もあるプラグインです。
もちろん自動でのリサイズ機能もあり、YouTube、動画ファイル、Flashなどの動画や、iframe、InlineなどのHTMLの表示に対応しています。

MetroBox

MetroBox
http://codecanyon.net/item/metrobox-responsive-lightbox/2862835?ref=beantowndesign

有料ですが、スマートフォン、タブレット、PCなどのマルチデバイスを意識したデザインのUIパーツが備わっており、ウインドウやデバイスのサイズに応じて表示が自動で切り替わります。

画像や動画だけでなくHTMLテキストの表示もレスポンシブ対応で表示が可能です。

MetroBox

MetroBox
http://pixelentity.com/previews/components/flare/

こちらも有料ですが、MetroBoxと同じくスマートフォン、タブレット、PCなどのマルチデバイスを意識したデザインのプラグインです。サムネイルや全画面での画像の表示もウインドウやデバイスのサイズに応じて表示が自動で切り替わります。

さすが最新の有料版プラグインはマルチデバイスで優れたデザインのものが多いですね。

Touch Gallery

Touch Gallery
http://neteye.github.com/touch-gallery.html

その名の通りスマートフォンやタブレットのタッチ機能に特化したプラグインで、フリックでの画像切り替えに対応しています。

今までの表示後にウインドウサイズに応じてリサイズするタイプとは異なり、表示する際のウインドウサイズに合わせたサイズに画像が表示されます。

一見シンプルですがタッチパネルでの使い勝手は良さそうな優れものです。

Photo Swipe

Photo Swipe
http://www.photoswipe.com/

こちらもフリックでの画像切り替えに対応したスマートフォンやタブレットのタッチ機能に特化したプラグインで、PCでのマウスドラッグ操作にも対応しています。

スマートフォンなどで使い慣れているUIデザインが備わっており、スマートフォン向けのギャラリーサイトにそのまま使えそうな実用的なプラグインです。

Glisse.js

Glisse.js
http://glisse.victorcoulon.fr/

CSS3のアニメーションや機能を使用したレスポンシブWebデザイン向けのモーダルウィンドウプラグインです。

サンプルも使い勝手に応じて二種類あり、デザインもシンプルで使いやすいです。

サンプルではアニメーションを切り替えて表示できたりと、CSS3の機能をうまく利用した高機能なプラグインです。

smoke.js

smoke.js
http://ssssnakes.com/smoke/

モーダルウィンドウとういよりもアラートの表示をレスポンシブWebデザインに対応して、さまざまな見た目のデザインにカスタマイズできるプラグインです。

実装はjQueryでアラートを表示するような手順で手軽にできるので、レスポンシブWebデザインのサイトのフォームでのアラート表示などに使えるかもしれません。

参考サイト

12 Responsive Lightbox Options for Website Developers

この記事を書いた人

著者 : ハヤシユタカ

2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら

最近書いた記事

この記事に関連する記事