モーダルウィンドウやLightbox系のjQueryプラグイン 15

  • Posted on
  • Category : Tips
モーダルウィンドウやLightbox系のjQueryプラグイン 15

画像を拡大表示させたり、コンテンツをポップアップのように表示したい時などに便利なjQueryプラグインのまとめです。こういったプラグインは他にもまだまだ沢山ありますが、個人的に使いやすいと思ったものや基本的に無料で使用できるものになるべく絞って紹介します。

2013年5月16日 追記
エントリー内で紹介している「Simple Modal」ですが、こちらはjQueryではなくMooToolsを使用するものでしたので追記しました。
pipiru_pさん、ご指摘ありがとうございます。

よく使うものは普段から慣れていて実装も早いので大体決まってたりするんですが、希望する動きや見せ方が違う場合に他をいろいろと探すのが面倒なので、今後使いそうなものなども含めてまとめてみました。

各プラグインの対応フォーマットは配布先の内容や代表的な使い方を基にしており、紹介しているプラグインの中には少しカスタマイズすることで他のフォーマットにも対応できるものもあります。
また、サポートブラウザは致命的な崩れ方をしていないものや配布先で書かれているものを記載していますが、念のため使用する際にご自身で再度確認してください。

jQuery lightBox plugin

jQuery lightBox plugin

対応フォーマット:Images
サポートブラウザ:IE6+、Firefox、Google Chrome、Safari、Opera

Lightbox2

Lightbox2

対応フォーマット:Images
サポートブラウザ:IE7+(IE6△)、Firefox、Google Chrome、Safari、Opera

Colorbox

Colorbox

対応フォーマット:Images、Slideshow、Ajax、Flash(YouTube・Vimeo)、iFrame、Inline HTML
サポートブラウザ:IE6+、Firefox、Google Chrome、Safari、Opera

対応フォーマットやサポートブラウザも幅広く、個人的には一番使わせてもらう頻度が高いです。

ThickBox

ThickBox

対応フォーマット:Images、Ajax、iFrame、Inline HTML
サポートブラウザ:IE6+、Firefox、Google Chrome、Safari、Opera

SexyLightBox

SexyLightBox

対応フォーマット:Images、Animation GIF
サポートブラウザ:IE6+、Firefox、Google Chrome、Safari、Opera

上からフレームが降りてくるような感じで表示されます。

Fresco

Fresco

対応フォーマット:Images、YouTube、Vimeo
サポートブラウザ:IE7+、Firefox、Google Chrome、Safari、Opera

イメージをグループ化した際のサムネイル表示やレスポンシブ対応、ズーム機能などの便利な機能があります。
ただ、非商用の場合は無料で使用できますが、商用の場合はライセンス購入が必要です。

prettyPhoto

prettyPhoto

対応フォーマット:Images、Slideshow、Ajax、Flash、YouTube、Vimeo、QuickTime、iFrame、Inline HTML
サポートブラウザ:IE6+、Firefox、Google Chrome、Safari、Opera

iLightBox

iLightBox

対応フォーマット:Images、Slideshow、Ajax、Flash、YouTube、Vimeo、QuickTime、iFrame、Inline HTML、Google Map
サポートブラウザ:IE7+、Firefox、Google Chrome、Safari、Opera

有料ですが見せ方とか動きが個人的に好みだったのと、対応フォーマットやブラウザも幅広い感じなのでメモ。

jQuery SuperBox!

jQuery SuperBox!

対応フォーマット:Images、iFrame、Inline HTML、Ajax
サポートブラウザ:IE7+、Firefox、Google Chrome、Safari、Opera

Touch-Gallery

Touch-Gallery

対応フォーマット:Images
サポートブラウザ:IE7+、Firefox、Google Chrome、Safari、Opera

スマートフォンやタブレットなどのタッチデバイス向けに作成されたプラグインで、フリック操作で画像の切り替えを行うことができます。
また、ウィンドウサイズに合わせた形でイメージが表示されます。

Swipebox

Swipebox

対応フォーマット:Images
サポートブラウザ:IE9+(IE8△)、Firefox、Google Chrome、Safari、Opera

Touch-Galleryと同じくタッチデバイス向けのプラグインですが、個人的には見た目などこっちのほうが好みです。
一応サポートブラウザはIE8+となっていましたが、自分の環境では動いているとは思えない印象です…。

Simple Modal

Simple Modal

サポートブラウザ:IE7+、Firefox、Google Chrome、Safari、Opera

シンプルですが様々なコンテンツ表示に対応しており、ウィンドウをドラッグ操作することもできます。
ダウンロード部分の作りも洒落ています :)

2013年5月16日 追記
「Simple Modal」はjQueryではなくMooToolsプラグインでした。
確認不足でした…すいません。

Reveal

Reveal

サポートブラウザ:IE7+、Firefox、Google Chrome、Safari、Opera

leanModal

leanModal

サポートブラウザ:IE7+、Firefox、Google Chrome、Safari、Opera

シンプルな作りでギャラリーやiFrameなどのサポートはされていなかったりしますが、その分1KB以下の軽量なプラグイン。

bPopup

bPopup

サポートブラウザ:IE6+、Firefox、Google Chrome、Safari、Opera

いずれも有料ですが、上記以外のものだとfancyBoxjQuery Lightbox EvolutionFlareなどのプラグインが対応フォーマットが多数あったりして便利そうです。
有料といっても比較的安価だと思うので、無料のプラグインで希望する動きがない場合はこういった有料のプラグインを検討するのもいいかなと思います。

Back to Top

モーダルウィンドウやLightbox系のjQueryプラグイン 15

モーダルウィンドウやLightbox系のjQueryプラグイン 15

/ Tips

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。