jQuery

軽量jQuery Lightboxプラグイン「Featherlight」を使ってギャラリーを作る方法

2023年10月14日 by single コメントはまだありません

軽量jQuery Lightboxプラグイン「Featherlight」を使ってギャラリーを作る方法

サンプル

ギャラリー

ギャラリー（オプションあり）

導入方法

ダウンロードの場合

「Featherlight.js」のページに行き、「Download」ボタンを押すことで書庫ファイルをダウンロードできます。

Featherlight.js

ダウンロードした書庫ファイルを解凍すると以下のようなファイルが展開されます。

今回は「（ウェブルート）/assets/featherlight-v.1.7.14/」に展開しました。

適時配置ください。

コーディング方法

CSSファイルインクルード

<link href="/assets/featherlight-v.1.7.14/release/featherlight.min.css" type="text/css" rel="stylesheet" />
<link href="/assets/featherlight-v.1.7.14/release/featherlight.gallery.min.css" type="text/css" rel="stylesheet" /

まず、「featherlight.min.css」と「featherlight.gallery.min.css」を読み込んでください。

「featherlight.gallery.min.css」はギャラリー専用のスタイルシートになります。

jQuery読み込み

次にjQueryを読み込みます。

<script src="/assets/featherlight-v.1.7.14/assets/javascripts/jquery-1.7.0.min.js"></script>

また、モバイル端末のスワイプライブラリも必要に応じて読み込んでください。

<script src="/assets/featherlight-v.1.7.14/assets/javascripts/jquery.detect_swipe.js"></script>

JSファイルインクルード

最後にJSファイルを読み込みます。

<script src="/assets/featherlight-v.1.7.14/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/assets/featherlight-v.1.7.14/release/featherlight.gallery.min.js" type="text/javascript" charset="utf-8"></script>

「featherlight.min.js」と「featherlight.gallery.min.js」を読み込みます。

「featherlight.gallery.min.js」はギャラリー専用のJSファイルになります。

CDNの場合

CDNの用意されています。それを利用すれば、わざわざダウンロードする必要はありません。

Featherlight Gallery

コーディング方法

CSSファイルインクルード

<link href="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.css" type="text/css" rel="stylesheet" />
<link href="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.gallery.min.css" type="text/css" rel="stylesheet" />

jQuery読み込み

<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/detect_swipe/2.1.1/jquery.detect_swipe.min.js"></script>

JSファイルインクルード

<script src="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
<script src="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.gallery.min.js" type="text/javascript" charset="utf-8"></script>

実装方法

HTMLマークアップ

まず、ギャラリーを設定するエリアを定義します。

<section
  data-featherlight-gallery
  data-featherlight-filter="a"
>
...
</section>

ポイントとして属性『data-featherlight-gallery』を設定してください。これで、Fether Lightbox Galleryの対象となります。

また、スライドの対象としてセレクタを属性『data-featherlight-filter』で定義します。ここでは、最も一般的なアンカータグとします。

次にLightboxへのリンクを作成します。

<section
  data-featherlight-gallery
  data-featherlight-filter="a"
>
  <a href="(イメージ1URI)"/>

  </a>
  <a href="(イメージ2URI)"/>

  </a>
  <a href="(イメージ3URI)"/>

  </a>
</section>

あとはサムネイルを設定した場合にはサムネイル画像、文字列を設定したい場合には文字列を設定すれば、ギャラリーが作成できます。

<section
  data-featherlight-gallery
  data-featherlight-filter="a"
>
  <a href="(イメージ1URI)"/>
    <img src="(サムネイル1URI)" />
  </a>
  <a href="(イメージ2URI)"/>
    <img src="(サムネイル2URI)" />
  </a>
  <a href="(イメージ3URI)"/>
    <img src="(サムネイル3URI)" />
  </a>
</section>

これで完了でJavascriptで初期化する必要もありません。

HTMLコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <title>Featherlight Gallery demo(1)</title>
    <link href="/assets/featherlight-v.1.7.14/release/featherlight.min.css" type="text/css" rel="stylesheet" />
    <link href="/assets/featherlight-v.1.7.14/release/featherlight.gallery.min.css" type="text/css" rel="stylesheet" />
    <script src="/assets/featherlight-v.1.7.14/assets/javascripts/jquery-1.7.0.min.js"></script>
    <script src="/assets/featherlight-v.1.7.14/assets/javascripts/jquery.detect_swipe.js"></script>
    <script src="/assets/featherlight-v.1.7.14/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/assets/featherlight-v.1.7.14/release/featherlight.gallery.min.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <section
      data-featherlight-gallery
      data-featherlight-filter="a"
    >
      <h4>ギャラリー</h4>
      <a href="https://www.single-life.tokyo/wp-content/uploads/2021/11/DSC03545.jpg">
        <img src="https://www.single-life.tokyo/wp-content/uploads/2021/11/DSC03545.jpg" style="width:10%;height:10%;">
      </a>
      <a href="https://www.single-life.tokyo/wp-content/uploads/2021/11/DSC07460.jpg">
        <img src="https://www.single-life.tokyo/wp-content/uploads/2021/11/DSC07460.jpg" style="width:10%;height:10%;">
      </a>
      <a href="https://www.single-life.tokyo/wp-content/uploads/2021/11/24955894488_bfa4edb8da_k.jpg">
        <img src="https://www.single-life.tokyo/wp-content/uploads/2021/11/24955894488_bfa4edb8da_k.jpg" style="width:10%;height:10%;">
      </a>
      <a href="https://www.single-life.tokyo/wp-content/uploads/2021/11/DSC07992.jpg">
        <img src="https://www.single-life.tokyo/wp-content/uploads/2021/11/DSC07992.jpg" style="width:10%;height:10%;">
      </a>
    </section>
  </body>
</html>

デモ

デモページ１

カスタマイズ／オプション

featherlightGallery初期化

featherlightGalleryの内容をカスタマイズしたい場合には、featherlightGalleryを明示的に初期化し、合わせて、オプションを指定してください。

アンカータグ（<a>）のクラス「gallery」のエレメントを対象にfeatherlightGalleryの対象とする場合の例となります。

 <script type="text/javascript">
   $(document).ready(function(){
     $('a.gallery').featherlightGallery({
       previousIcon: '< 前',     /* 前アイコンのコード／文字 */
       nextIcon: '次 >',         /* 次アイコンのコード／文字 */
       galleryFadeIn: 1000,      /* スライドが読み込まれるときのフェードインスピード */
       galleryFadeOut: 3000,     /* スライドが読み込まれるときのフェードアウトスピード */
       variant :'featherlight-gallery2',  /* lightboxが変更したときに適用されるCSSクラス */
       openSpeed:    2000,      /* 開く際のアニメーション時間 */
       closeSpeed:   2000,      /* 閉じる際のアニメーション時間 */
       closeIcon: '×',         /* 閉じるアイコンの定義 */
       closeOnClick:'anywhere', /* 閉じるイベント「'background'」「'anywhere'」「false」のいずれか */
       closeOnEsc:false         /* ESCキーを押した際にLightboxを閉じる */
     });
   });
 </script>

HTMLコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <title>Featherlight Gallery demo(2)</title>
    <link href="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.css" type="text/css" rel="stylesheet" />
    <link href="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.gallery.min.css" type="text/css" rel="stylesheet" />
    <script src="//code.jquery.com/jquery-latest.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/detect_swipe/2.1.1/jquery.detect_swipe.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.gallery.min.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <h4>ギャラリー（オプションあり）</h4>
    <a class="gallery" href="https://www.single-life.tokyo/wp-content/uploads/2021/11/DSC03545.jpg">
      <img src="https://www.single-life.tokyo/wp-content/uploads/2021/11/DSC03545.jpg" style="width:10%;height:10%;">
    </a>
    <a class="gallery" href="https://www.single-life.tokyo/wp-content/uploads/2021/11/DSC07460.jpg">
      <img src="https://www.single-life.tokyo/wp-content/uploads/2021/11/DSC07460.jpg" style="width:10%;height:10%;">
    </a>
    <a class="gallery" href="https://www.single-life.tokyo/wp-content/uploads/2021/11/24955894488_bfa4edb8da_k.jpg">
      <img src="https://www.single-life.tokyo/wp-content/uploads/2021/11/24955894488_bfa4edb8da_k.jpg" style="width:10%;height:10%;">
    </a>
    <a class="gallery" href="https://www.single-life.tokyo/wp-content/uploads/2021/11/DSC07992.jpg">
      <img src="https://www.single-life.tokyo/wp-content/uploads/2021/11/DSC07992.jpg" style="width:10%;height:10%;">
    </a>
    <style type="text/css">
      .featherlight-gallery2 {
        background: rgba(100,100,100,0.5);
      }
      .featherlight-gallery2 .featherlight-content {
        background: #000;
      }
      .featherlight-gallery2 .featherlight-next:hover,
      .featherlight-gallery2 .featherlight-previous:hover {
        background: rgba(0,0,0,0.5);
      }
      .featherlight-gallery2 .featherlight-next:hover span,
      .featherlight-gallery2 .featherlight-previous:hover span {
        font-size: 25px;
        line-height: 25px;
        margin-top: -12.5px;
        color: #fff;
      }
      .featherlight-gallery2  .featherlight-close {
        background: transparent;
        color: #fff;
        font-size: 1.2em;
      }
      .featherlight-gallery2.featherlight-last-slide .featherlight-next,
      .featherlight-gallery2.featherlight-first-slide .featherlight-previous {
        display: none;
      }
    </style>
    <script type="text/javascript">
      $(document).ready(function(){
        $('a.gallery').featherlightGallery({
          previousIcon: '< 前',     /* 前アイコンのコード／文字 */
          nextIcon: '次 >',         /* 次アイコンのコード／文字 */
          galleryFadeIn: 1000,      /* スライドが読み込まれるときのフェードインスピード */
          galleryFadeOut: 3000,     /* スライドが読み込まれるときのフェードアウトスピード */
          variant :'featherlight-gallery2',  /* lightboxが変更したときに適用されるCSSクラス */
          openSpeed:    2000,      /* 開く際のアニメーション時間 */
          closeSpeed:   2000,      /* 閉じる際のアニメーション時間 */
          closeIcon: '×',         /* 閉じるアイコンの定義 */
          closeOnClick:'anywhere', /* 閉じるイベント「'background'」「'anywhere'」「false」のいずれか */
          closeOnEsc:false         /* ESCキーを押した際にLightboxを閉じる */
        });
      });
    </script>
  </body>
</html>

デモ

デモページ２

オプション

previousIcon

前のスライドに移動させるボタンを定義できるオプションです。

デフォルトは『◀』です。

nextIcon

次のスライドに移動させるボタンを定義できるオプションです。

デフォルトは『▶』です。

galleryFadeIn

スライドが読み込まれフェードインする際のスピードを定義できるオプションで、単位はミリ秒です。

デフォルトは『100』です。

galleryFadeIn

スライドが読み込まれる前にフェードアウトする際のスピードを定義できるオプションで、単位はミリ秒です。

デフォルトは『300』です。

軽量jQuery Lightboxプラグイン「Featherlight」を使ってギャラリーを作る方法

軽量jQuery Lightboxプラグイン「Featherlight」を使ってギャラリーを作る方法

サンプル

ギャラリー

ギャラリー（オプションあり）

導入方法

ダウンロードの場合

コーディング方法

CSSファイルインクルード

jQuery読み込み

JSファイルインクルード

CDNの場合

コーディング方法

CSSファイルインクルード

jQuery読み込み

JSファイルインクルード

実装方法

HTMLマークアップ

HTMLコード

デモ

カスタマイズ／オプション

featherlightGallery初期化

HTMLコード

デモ

オプション

previousIcon

nextIcon

galleryFadeIn

galleryFadeIn

ご参考

関連ページ

Related Posts

広告

アーカイブ

カテゴリー

Recent Posts