JavaScript

fancybox.jsを使ってタッチやレスポンシブ対応可能なlightboxモーダル表示方法【jQueryプラグイン】

fancybox.jsを使ってタッチやレスポンシブに対応可能なlightboxモーダル表示方法をご紹介します。

タッチやレスポンシブ対応可能な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アナリティクスタグは流用しないで下さい。