テック

軽量lightboxライブラリ「Luminous」でギャラリーを作る方法

2022年11月18日 by single コメントはまだありません

軽量lightboxライブラリ「Luminous」でギャラリーを作る方法

今回は軽量lightboxライブラリ「Luminous」を紹介します。「Luminous」はjQueryを使用しない、Javasriptだけで実装できるLightboxライブラリです。

サンプル

単一写真

複数写真（ギャラリー）

複数写真（ギャラリー）『キャプションあり』

複数写真（ギャラリー）：オプション指定

デモ

導入方法

ダウンロード

インストールにあたっては、GitHubのページに行ってライブラリ一式をダウンロードしてください。

「Download」リンクをクリックし、ライブラリ『luminous-main.zip』をダウンロードしてください。

書庫ファイルを解凍すると以下のようなファイルが展開されます。

これを、今回のサンプルでは「(ウェブルート）/assets/」に展開しました。

実装方法

CSSファイルインクルード

ダウンロードし展開したファイルのうち、「dist」ディレクトリにあるファイルを読み込みます。

まず、CSSファイルを読み込みます。

<link rel="stylesheet" href="/assets/luminous-main/dist/luminous-basic.css">

JSファイルインクルード

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

<script type="text/javascript" src="/assets/luminous-main/dist/luminous.js" ></script>

HTMLマークアップ

表示させたい写真をイメージタグ（img）で定義し、それをアンカータグ（a）で囲います。アンカータグの属性『href』には、イメージタグで定義した写真のURIを同じく指定します。

<a id="singlePhoto" href="(写真URI)">
  <img src="(写真URI)" />
</a>

Luminous初期化

<script type="text/javascript">
   /* 単一写真の場合 */
   new Luminous(document.querySelector("#singlePhoto"));
</script>

最後に、Luminousを初期化するにあたり、セレクタで対象エレメントを指定し、初期化します。

複数写真を紐づけてギャラリーにする方法

HTMLマークアップ

<a class="gallery-demo" href="https://assets.imgix.net/unsplash/coyote.jpg?w=1600">
  <img src="https://assets.imgix.net/unsplash/coyote.jpg?w=100" >
</a>

<a class="gallery-demo" href="https://assets.imgix.net/unsplash/motorbike.jpg?w=1600">
  <img src="https://assets.imgix.net/unsplash/motorbike.jpg?w=100" >
</a>

<a class="gallery-demo" href="https://assets.imgix.net/unsplash/hotairballoon.jpg?w=1600">
  <img src="https://assets.imgix.net/unsplash/hotairballoon.jpg?w=100" >
</a>

複数の写真を紐づけるには、共通の属性を指定する必要があります。このサンプルではclass名を同じにすることで紐づけてあります。

LuminousGallery初期化

次に、document.querySelectorAllを使用し、紐づけたいエレメントを一式取得し、LuminousGalleryをの初期化パラメータとして指定してください。

<script type="text/javascript">
   /* 複数写真（ギャラリー）の場合 */
   new LuminousGallery(document.querySelectorAll(".gallery-demo"));
</script>

キャプションを設定する方法

Luminousでは、デフォルトではキャプションをサポートしています。オプション『caption』を使用することでキャプションを設定することができます。

以下のサンプルは、イメージタグ（img)の属性『alt』の指定文字列をキャプションにする方法です。

<script type="text/javascript">
   /* 複数写真（ギャラリー）『キャプションあり』の場合 */
   new LuminousGallery(
      document.querySelectorAll(".gallery-caption"),
      {
        arrowNavigation: true
      }
      ,
      {
        caption: function(trigger) {
          return trigger.querySelector("img").getAttribute("alt");
        }
      }
    );
</script>

オプションを設定する方法

Luminous初期化時

var options = {...};
new Luminous(document.querySelector("a"), options);

Luminousを初期化する場合には第１パラメータには、対象エレメント、第２パラメータにオプションを指定します。

LuminousGallery初期化時

var options = {...};
var galleryOpts = {...};
new LuminousGallery(document.querySelectorAll("a"), galleryOpts, options);

LuminousGalleryを初期化する場合には第１パラメータに対象エレメント、第２パラメータにLuminousGalleryのオプション、第３パラメータにLuminousのオプションを指定してください。

HTMLコード

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width" />
   <!-- CSSファイルを読み込む -->
   <link rel="stylesheet" href="/assets/luminous-main/dist/luminous-basic.css">
   <title>Luminous Sample</title>
</head>
<body>
   <p>
      <h4>単一写真</h4>
      <ul>
        <li>
          <a  id="singlePhoto" href="https://assets.imgix.net/unsplash/coyote.jpg?w=1600">
            <img src="https://assets.imgix.net/unsplash/coyote.jpg?w=100" alt="Coyote">
          </a>
        </li>
      </ul>
   </p>
   <p>
      <h4>複数写真（ギャラリー）</h4>
      <ul>
        <li>
          <a class="gallery-demo" href="https://assets.imgix.net/unsplash/coyote.jpg?w=1600">
            <img src="https://assets.imgix.net/unsplash/coyote.jpg?w=100" alt="Coyote">
          </a>
        </li>
        <li>
          <a class="gallery-demo" href="https://assets.imgix.net/unsplash/motorbike.jpg?w=1600">
            <img src="https://assets.imgix.net/unsplash/motorbike.jpg?w=100" alt="Motorbike">
          </a>
        </li>
        <li>
          <a class="gallery-demo" href="https://assets.imgix.net/unsplash/hotairballoon.jpg?w=1600">
            <img src="https://assets.imgix.net/unsplash/hotairballoon.jpg?w=100" alt="Hot air balloon">
          </a>
        </li>
      </ul>
   </p>
   <p>
      <h4>複数写真（ギャラリー）『キャプションあり』</h4>
      <ul>
        <li>
          <a class="gallery-caption" href="https://assets.imgix.net/unsplash/coyote.jpg?w=1600">
            <img src="https://assets.imgix.net/unsplash/coyote.jpg?w=100" alt="Coyote">
          </a>
        </li>
        <li>
          <a class="gallery-caption" href="https://assets.imgix.net/unsplash/motorbike.jpg?w=1600">
            <img src="https://assets.imgix.net/unsplash/motorbike.jpg?w=100" alt="Motorbike">
          </a>
        </li>
        <li>
          <a class="gallery-caption" href="https://assets.imgix.net/unsplash/hotairballoon.jpg?w=1600">
            <img src="https://assets.imgix.net/unsplash/hotairballoon.jpg?w=100" alt="Hot air balloon">
          </a>
        </li>
      </ul>
   </p>
   <p>
      <h4>複数写真（ギャラリー）：オプション指定</h4>
      <ul>
        <li>
          <a class="gallery-options" href="https://assets.imgix.net/unsplash/coyote.jpg?w=1600">
            <img src="https://assets.imgix.net/unsplash/coyote.jpg?w=100" alt="Coyote">
          </a>
        </li>
        <li>
          <a class="gallery-options" href="https://assets.imgix.net/unsplash/motorbike.jpg?w=1600">
            <img src="https://assets.imgix.net/unsplash/motorbike.jpg?w=100" alt="Motorbike">
          </a>
        </li>
        <li>
          <a class="gallery-options" href="https://assets.imgix.net/unsplash/hotairballoon.jpg?w=1600">
            <img src="https://assets.imgix.net/unsplash/hotairballoon.jpg?w=100" alt="Hot air balloon">
          </a>
        </li>
      </ul>
   </p>
   <!-- JSファイルを読み込む -->
   <script type="text/javascript" src="/assets/luminous-main/dist/luminous.js" ></script>
   <script type="text/javascript">
      /* 単一写真の場合 */
      new Luminous(document.querySelector("#singlePhoto"));
      /* 複数写真（ギャラリー）の場合 */
      new LuminousGallery(document.querySelectorAll(".gallery-demo"));
      /* 複数写真（ギャラリー）『キャプションあり』の場合 */
      new LuminousGallery(
         document.querySelectorAll(".gallery-caption"),
         {
           arrowNavigation: true
         }
         ,
         {
           caption: function(trigger) {
             return trigger.querySelector("img").getAttribute("alt");
           }
         }
       );
      var options = {
         // Prefix for generated element class names (e.g. `my-ns` will
         // result in classes such as `my-ns-lightbox`. Default `lum-`
         // prefixed classes will always be added as well.
         namespace: 'my-ns',
         // Which attribute to pull the lightbox image source from.
         sourceAttribute: "href",
         // Captions can be a literal string, or a function that receives the Luminous instance's trigger element as an argument and returns a string. Supports HTML, so use caution when dealing with user input.
         caption: function(trigger) {return trigger.querySelector("img").getAttribute("alt");},
         // The event to listen to on the _trigger_ element: triggers opening.
         openTrigger: "click",
         // The event to listen to on the _lightbox_ element: triggers closing.
         closeTrigger: "click",
         // Allow closing by pressing escape.
         closeWithEscape: true,
         // Automatically close when the page is scrolled.
         closeOnScroll: true,
         // Disable close button
         showCloseButton: false,
         // A node to append the lightbox element to.
         appendToNode: document.body,
         // A selector defining what to append the lightbox element to.
         // This will take precedence over `appendToNode`.
         appendToSelector: null,
         // If present (and a function), this will be called
         // whenever the lightbox is opened.
         onOpen: function() {alert('open')},
         // If present (and a function), this will be called
         // whenever the lightbox is closed.
         onClose:  function() {alert('close')},
         // When true, adds the `imgix-fluid` class to the `img`
         // inside the lightbox. See https://github.com/imgix/imgix.js
         // for more information.
         includeImgixJSClass: false,
         // Add base styles to the page. See the "Theming"
         // section of README.md for more information.
         injectBaseStyles: true
      };
      var galleryOpts = {
         // Whether pressing the arrow keys should move to the next/previous slide.
         arrowNavigation: true,
         // A callback triggered when the image changes that is passed the image HTML element 
         onChange: ({ imgEl }) => { alert('onChange') },
      };
      /* 複数写真（ギャラリー）：オプション付の場合 */
      new LuminousGallery(document.querySelectorAll(".gallery-options"),galleryOpts,options);
   </script>
</body>
</html>

オプション

最後にオプションを紹介します。

Luminousオプション

namespace

生成されるエレメントのプレフィックスを定義できるオプションです。デフォルトは『lum-』です。

sourceAttribute

Lightboxイメージを表示するトリガーとなる属性の定義できるオプションです。デフォルトは『href』です。

caption

キャプションを設定するためのオプションです。

リテラルな文字列かLuminousエレメントのトリガーとなるエレメントを受け取ったファンクションを定義します。アンカー（a）で定義しているので、ファンクションの引数では対象となっているアンカー（a）を受け取ることになります。

openTrigger

Lightboxを表示するためのトリガーを定義できるオプションです。

closeTrigger

Lightboxを閉じるためのトリガーを定義できるオプションです。

closeWithEscape

「ESC」キーを押すことでLightboxを閉じることのできるオプションです。デフォルトは『true』で「ESC」キーを押せば、Lightboxを閉じることができます。

closeOnScroll

『true』にすれば、ウインドウがスクロールされれば、自動的にLightboxが閉じられます。

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

showCloseButton

『true』にすれば、閉じるボタン（✖）が表示されます。

appendToNode

Lightboxエレメントを追加するノードを指定できるオプションです。

appendToSelector

Lightboxエレメントを追加するエレメントのセレクタを定義できるオプションです。

appendToNodeで指定したオブジェクトより優先されます。

onOpen

Lightboxが表示されるときの呼び出される処理を定義できるオプションです。

onClose

Lightboxが表示が閉じられる時に呼び出される処理を定義できるオプションです。

includeImgixJSClass

「true」にすれば、「imgix-fluid`」クラスをイメージタグ（img）に追加されます。

詳しくは、こちらを参照ください、とのことらしいです。

injectBaseStyles

「true」にすれば、基本スタイルがページに適用されます。

詳しくは「Theming」を参照ください。

LuminousGalleryオプション

arrowNavigation

「true」にすると、キーボードの矢印キーでスライドを移動させることができます。

onChange

スライドが変更されたときに呼び出される処理を定義できるオプションです。

ただ、ワタシ自身、このオプションが効いていることは確認できませんでした。

ご参考

関連ページ