fancybox.jsを使ってタッチやレスポンシブに対応可能なlightboxモーダル表示方法をご紹介します。
Contents
ディスプレイ広告
タッチやレスポンシブ対応可能なlightboxモーダル表示のCSS記述
※jquery.fancybox.cssファイルを読み込みます。ギャラリー画像(a[data-fancybox] img)、モーダル表示時のcaption(.fancybox__caption)のCSS記述です。必要に応じて変更して下さい。
<style> body { margin: 20px 10px; padding: 0; font-size: 14px; text-align: center; } h1{ text-align: center; font-size: 22px; line-height: 2em; padding-bottom: 20px; } a[data-fancybox] img { cursor: zoom-in; width: 150px; } .fancybox__caption { text-align: center; } </style> <link rel="stylesheet" href="jquery.fancybox.css" />
タッチやレスポンシブ対応可能なlightboxモーダル表示のHTML記述
※lightboxモーダル表示するギャラリー画像(1~5.jpg)を用意します。モーダル表示対象のタグ要素に「data-fancybox=”gallery”」を記述し、captionテキストは「data-caption=”説明テキスト”」の様に記述します。
<h1>fancyboxを使ってタッチ・レスポンシブ可能なlightboxモーダル表示</h1> <a data-fancybox="gallery" href="1.jpg" data-caption="イメージ1"><img src="1.jpg"></a> <a data-fancybox="gallery" href="2.jpg" data-caption="イメージ2"><img src="2.jpg"></a> <a data-fancybox="gallery" href="3.jpg" data-caption="イメージ3"><img src="3.jpg"></a> <a data-fancybox="gallery" href="4.jpg" data-caption="イメージ4"><img src="4.jpg"></a> <a data-fancybox="gallery" href="5.jpg" data-caption="イメージ5"><img src="5.jpg"></a>
fancybox.jsを使ってタッチやレスポンシブ対応可能なlightboxモーダル表示のJavaScriptの記述
※jquery-1.10.2.min.js、jquery.fancybox.jsファイルを読み込みます。Fancybox.bind(‘[data-fancybox=”モーダル表示対象”]’, {オプション})を設定します。オプションにはcaptionの表示方法やその他等を設定可能です。必要に応じて変更して下さい。
<script type="text/javascript" src="jquery-1.10.2.min.js"></script> <script type="text/javascript" src="jquery.fancybox.js"></script> <script type="text/javascript"> Fancybox.bind('[data-fancybox="gallery"]', { caption: function (fancybox, carousel, slide) { return ( `${slide.index + 1} / ${carousel.slides.length} <br />` + slide.caption ); }, }); </script>
fancyboxを使ってタッチ・レスポンシブ可能なlightboxモーダル表示デモページ
fancyboxを使ってタッチ・レスポンシブ可能なlightboxモーダル表示デモページ
ソース元:fancybox – Librarie
以下がソース元です。
fancybox – Librarie
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。