JavaScript

Luminous を使ってみる

投稿日:2019年10月23日 更新日:

1. はじめに

ウェブページ上の画像をポップアップ表示する JavaScript ライブラリである Luminous の使い方について説明します。

Luminous の最大の特徴は、「jQuery を必要としない」ことにあります。例えば、本サイトでも使っている有名な Lightbox は jQuery に依存しています。

2. 事前準備

Luminous は npm モジュールとしてインストールすることもできますが、本記事ではダウンロードして使うことにします。

ということで、ダウンロード から ZIPファイルをダウンロードして展開(解凍)しておきます。

展開したうち、今回使用するのは以下の 2つのファイルになります。

  • dist/Luminous.min.js
  • dist/luminous-basic.min.css

3. 1つの画像を単独でポップアップ表示する場合

以下にコード例を示します。

<html>
  <head>
    ...
    <!-- CSSファイルを読み込みます -->
    <link rel="stylesheet" href="path/to//luminous-basic.min.css">
    ...
  </head>
  <body>
    ...
    <!-- この画像をポップアップ表示できるようにします -->
    <!-- data-luminous 属性をセットして、後からこの要素を取得できるようにします -->
    <a href="foo.jpg" data-luminous>
      <img src="foo.jpg" width="200" alt="Foo">
    </a>
    ...
    <!-- JavaScriptファイルを読み込みます -->
    <script src="path/to/Luminous.min.js"></script>
    <script>
    // オプションを表すオブジェクトを用意します
    const luminousOpts = {
      // ポップアップした画像にキャプションを表示させます
      caption: (trigger) => {
        return trigger.querySelector("img").getAttribute("alt");
      }
    };

    // Luminous オブジェクトを生成することでポップアップ表示できます
    new Luminous(
      // 第一引数:ポップアップ表示したい <a>要素
      document.querySelector("a[data-luminous]"),
      // 第二引数:オプション
      luminousOpts
    );
    </script>
  </body>
</html>
  • Luminous クラスのオブジェクトを生成することで、特定の <a>タグ(の中の<img>タグ)がポップアップ表示できるようになります。
  • Luminous コンストラクタの第一引数に、対象となる a 要素をセットしています。ここでは、data-luminous という独自の属性を利用していますが、CSSクラスを使うなど他の方法でも構いません。
  • 続いて第二引数ではオプションを指定します。ここでは、ポップアップした画像の下にキャプションを表示するための関数をオプションにセットしています。<img>タグの alt 属性値がキャプションに使われるようにしてあります。

また、複数の画像に対して、個別にポップアップ表示をさせたい場合は、例えば以下のコードで実現可能です。

document.querySelectorAll("a[data-luminous]").forEach((elm) => {
  new Luminous(elm, luminousOpts);
});

4. 複数の画像をギャラリースタイルでポップアップ表示する場合

こちらの方法だと、ポップアップ表示した状態で複数の画像を連続して表示(移動)することができます(ギャラリースタイル)。

以下にコード例を示します。

<html>
  <head>
    ...
    <!-- CSSファイルを読み込みます -->
    <link rel="stylesheet" href="path/to//luminous-basic.min.css">
    ...
  </head>
  <body>
    ...

    <!-- 下の3つの画像をギャラリースタイルでポップアップ表示できるようにします -->
    <!-- data-luminous 属性をセットして、後からこれらの要素を取得できるようにします -->

    <a href="foo.png" data-luminous>
       <img src="foo.png" width="110" alt="Foo">
    </a>

    <a href="bar.png" data-luminous>
      <img src="bar.png" width="100" alt="Bar">
    </a>

    <a href="baz.png" data-luminous>
      <img src="baz.png" width="130" alt="Baz">
    </a>

    ...
    <!-- JavaScriptファイルを読み込みます -->
    <script src="path/to/Luminous.min.js"></script>
    <script>
    // オプションを表すオブジェクトを用意します(先程と同じです)
    const luminousOpts = {
      caption: (trigger) => {
        return trigger.querySelector("img").getAttribute("alt");
      }
    };
    // ギャラリースタイル専用のオプションを表すオブジェクトを用意します
    const galleryOpts = {
      arrowNavigation: true
    };

    // LuminousGallery オブジェクトを生成することでポップアップ表示できます
    new LuminousGallery(
      // 第一引数:ポップアップ表示する<a>要素(複数可)
      document.querySelectorAll("a[data-luminous]"),
      // 第二引数:ギャラリー用オプション
      galleryOpts,
      // 第三引数:オプション
      luminousOpts
    );
    </script>
  </body>
</html>
  • LuminousGallery クラスのオブジェクトを生成することで、複数の <a>タグ(の中の<img>タグ)をギャラリースタイルでポップアップ表示できるようになります。
  • LuminousGallery コンストラクタの第一引数に、対象となる a 要素をセットしています。ここでは、data-luminous という独自の属性を利用していますが、CSSクラスを使うなど他の方法でも構いません。
  • 続いて第二引数はギャラリースタイル用オプションです。ここでは、矢印キーで「次」「前」の画像に移動できるようにしています。
  • 続いて第三引数はそれ以外の普通のオプションです。ポップアップした画像の下にキャプションを表示するための関数をオプションにセットしています。<img>タグの alt 属性値がキャプションに使われるようにしてあります。

5. デモページ

デモページを作りました。

デモページ

🔗 Luminous を使ってみる

6. 参考

📂-JavaScript

執筆者:labo


  1. より:

    jQueryに依存しないギャラリーを作りたくて検索して、こちらにたどり着きました。
    ありがとうございます!とても参考になります。
    ギャラリースタイルで、矢印を初期の>と<から、任意の(自分で用意した)画像に変更する事は出来ますでしょうか?
    arrowNavigationもしくはギャラリー用オプションに何か追加するのかな…、と調べていたのですが分からなかったので質問を失礼致しました。
    よろしくお願い致します。

  2. より:

    返信・丁寧なご教授ありがとうございます!
    border関連の指定を非表示(none)にして、content:” “(無ければ追加)で指定出来るか試してみますね。

    luminous-basic.cssの圧縮の事もお気遣いありがとうございます。

  3. あう より:

    あまりに簡単に実装できてワロタ
    ただホムペほんとの初心者だとこのままコピペして「できん!」とか言いそう
    階層・パス・名前の指定は任意
    あと(“a[data-luminous]”)をクラス名にする場合は(“.クラス名”)に

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

JavaScript

【JavaScript】 async / await の使い方

本サイトの JavaScriptで一定時間待ってから処理を開始する方法 でも少し使ったのですが、JavaScript の async / await の使い方についてこちらのページにまとめておきます。 …

JavaScript

【JavaScript】無名関数とアロー関数とイベントリスナーのthis

目次1. はじめに2. イベントリスナーの登録無名関数を使う場合アロー関数を使う場合3. まとめ4. 参考 1. はじめに あるHTMLにおいて、以下のようにボタンが存在しており、このボタンのクリック …

JavaScript

JavaScript による HTTP(S)リクエスト送信のいろいろな書き方

目次1. はじめに2. JSON を取得するコード(1) axios (XMLHttpRequest) (基本形)(2) axios (XMLHttpRequest) (async/await を使用 …

JavaScript

JSON.stringify() の引数に関する忘備録

JavaScript でよく使う JSON.stringify()メソッドですが、第二引数と第三引数の意味を忘れがちなので本ページに記録しておきます。

Web Security

JavaScript の alert は CPUにたいした負荷を掛けないしタブを閉じれば終了します

以下の話題について書きます。 不正プログラム書き込み疑い補導 03月04日 20時04分 クリックすると同じ画面が表示され、消えなくなる不正なプログラムのアドレスをインターネットの掲示板に書き込んだと …