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

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

Contents

タッチやレスポンシブ対応可能なlightboxモーダル表示のCSS記述
タッチやレスポンシブ対応可能なlightboxモーダル表示のHTML記述
fancybox.jsを使ってタッチやレスポンシブ対応可能なlightboxモーダル表示のJavaScriptの記述
fancyboxを使ってタッチ・レスポンシブ可能なlightboxモーダル表示デモページ
ソース元：fancybox – Librarie

タッチやレスポンシブ対応可能な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>