吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

Plugin : モーダルウィンドウについて

2014年3月7日 / category : jquery, plug-in-jquery

モーダルウィンドウを表示するプラグインは、多く見かけますが、有名どころでいうと、下記の3つになるかと思います。

lightbox2
colorbox
fancybox

どのプラグインが便利かというと、どれも使いやすいと思うので、どれでも良いかな・・・というのが正直なところです。

まず、lightbox2の使い方を見ていきます。

HTML
<head>
<link rel="stylesheet" href="css/libs/lightbox.css"> //lightbox2専用のCSSファイルを読み込む
<script src="js/libs/lightbox-2.6.min.js"></script> //lightboxのJSファイルを読み込む
</head>

<body>
<p>
<a href="images/p0.jpg" data-lightbox="example-set" title="title0"><img src="images/p0.jpg" width="80"></a>
<a href="images/p1.jpg" data-lightbox="example-set" title="title1"><img src="images/p1.jpg" width="80"></a>
<a href="images/p2.jpg" data-lightbox="example-set" title="title2"><img src="images/p2.jpg" width="80"></a>
<a href="images/p3.jpg" data-lightbox="example-set" title="title3"><img src="images/p3.jpg" width="80"></a>
</p>
</body>

js側での実行文は必要ありません。lightboxのjsを読み込んだタイミングで設定されるようです。
html側で必要な要素は、リンクタグ(aタグ)のdata-lightbox属性です。この属性がある要素に対して、lightboxが設定されます。

DEMO 0

上記のDEMOでは、写真がグループ化されていますが、これを外したい場合は、下記のようにdata-lightbox属性を個別に設定すればよいです。

HTML
<p>
<a href="images/p0.jpg" data-lightbox="example-0" title="title0"><img src="images/p0.jpg" width="80"></a>
<a href="images/p1.jpg" data-lightbox="example-1" title="title1"><img src="images/p1.jpg" width="80"></a>
<a href="images/p2.jpg" data-lightbox="example-2" title="title2"><img src="images/p2.jpg" width="80"></a>
<a href="images/p3.jpg" data-lightbox="example-3" title="title3"><img src="images/p3.jpg" width="80"></a>
</p>

DEMO 1

次に、colorboxの使い方を見ていきます。

HTML
<head>
<link rel="stylesheet" href="css/libs/colorbox.css"> //colorbox専用のCSSファイルを読み込む
<script src="js/libs/jquery.colorbox-min.js"></script> //colorboxのJSファイルを読み込む
</head>

<body>
<p class="btn"><a id="inline" href="#inlineBox" title="title属性のテキストが入ります。">Inline</a></p>

<div class="hidden">
<div id="inlineBox">
<h3>タイトルテキスト</h3>
<p>
テキストテキストテキストテキスト・・・テキスト</p>
</div>
</div>
</body>
JavaScript
$("#inline").colorbox({inline:true, width:"400px"});
CSS
.hidden{
	display: none;
}

DEMO 2

colorboxは、js側で指定したid名のクリック要素(aタグ)に設定されます。その要素のhref属性にモーダルウィンドウのコンテンツのid名を指定することで設定することができます。
1点注意する点が、モーダルウィンドウのコンテンツ要素の親要素に対し、display:noneを設定し、初期状態で非表示にする必要があるようです。

こちらのDEMOは、モーダルウィンドウ内の要素が通常のhtml要素のパターンです。次に、画像のスライドのパターンのDEMOを紹介します。

HTML
<body>
<p>
<a class="item" href="images/p0.jpg" title="title0"><img src="images/p0.jpg" alt="" width="80"></a>
<a class="item" href="images/p1.jpg" title="title1"><img src="images/p1.jpg" alt="" width="80"></a>
<a class="item" href="images/p2.jpg" title="title2"><img src="images/p2.jpg" alt="" width="80"></a>
<a class="item" href="images/p3.jpg" title="title3"><img src="images/p3.jpg" alt="" width="80"></a>
</p>
</body>
JavaScript
$(".item").colorbox({rel:'item'});

DEMO 3

colorboxの場合は、jQueryのセレクタでクリック要素(aタグ)を指定します。同じクラス名を持つセレクタはグループ化されますので、単独のモーダルウィンドウにしたい場合は、個別のセレクタ要素にしてください。

最後に、fancyboxの使い方を見ていきます。

HTML
<head>
<link rel="stylesheet" href="css/libs/jquery.fancybox.css"> //fancybox専用のCSSファイルを読み込む
<script src="js/libs/jquery.fancybox.pack.js"></script> //fancyboxのJSファイルを読み込む
</head>

<body>

<p class="btn"><a class="fancybox" href="#inline" title="title属性のテキストが入ります。">Inline</a></p>

<div id="inline">
<h3>タイトルテキスト</h3>
<p>
テキストテキストテキストテキスト・・・テキスト</p>
</div>

</body>
JavaScript
$('.fancybox').fancybox();

fancyboxは、ほとんどcolorboxと使い方が同じです。ただ、モーダルウィンドウのコンテンツ要素の親要素に、display:noneを設定する必要はありません。

DEMO 4

次に、画像のスライドのパターンですが、

HTML
<body>

<p>
<a class="fancybox" href="images/p0.jpg" data-fancybox-group="gallery" title="title0">
<img src="images/p0.jpg" alt="" width="80">
</a>
<a class="fancybox" href="images/p1.jpg" data-fancybox-group="gallery" title="title1">
<img src="images/p1.jpg" alt="" width="80">
</a>
<a class="fancybox" href="images/p2.jpg" data-fancybox-group="gallery" title="title2">
<img src="images/p2.jpg" alt="" width="80">
</a>
<a class="fancybox" href="images/p3.jpg" data-fancybox-group="gallery" title="title3">
<img src="images/p3.jpg" alt="" width="80">
</a>
</p>

</body>
JavaScript
$('.fancybox').fancybox({
	openEffect  : 'none',
	closeEffect : 'none',
	prevEffect : 'none',
	nextEffect : 'none',
});

画像のスライドに関しても、、ほとんどcolorboxと使い方が同じです。ただ、グループ化する場合は、data-fancybox-group属性を追加しなければいけないようです。

DEMO 5

以上、3つのプラグインの紹介を簡単にしましたが、結論から言うと、いずれも簡単に使えるので、どれでも良いと言えばよいのですが、lightboxに関しては、画像のスライドに特化していますので、モーダルウィンドウの要素にhtmlコードを表示したい場合は、使えません。
画像のスライドで、いずれかのプラグインを使いたい場合、

【lightbox】
・js側で指定をする必要がない(html側のdata-lightbox属性を参照する)

【colorbox】
・jQueryのセレクタを指定するだけ。グループ化したい場合は、同じクラスを充てる。

【fancyBox】
・jQueryのセレクタを指定するだけ。グループ化したい場合は、data-fancybox-group属性を設定する。

その他、各プラグイン、オプションがありますので、色々と試してみてください。

DownLoad : DEMO DATA