lightboxの超軽量版！jQuery不要の画像拡大スクリプト「Luminous」の基本的な使い方とオプションの説明、複数画像への適用方法

クリックすると画像を拡大してくれる、いわゆる「lightbox（ライトボックス）」というスクリプトって便利ですよね。

制作現場でも多くの場面で導入されているかと思います。

ではみなさん、このライトボックス系のスクリプトプラグインの中でも、「Luminous」というjQuery不要の超軽量スクリプトプラグインをご存知でしょうか？

• jQueryに依存しない
• ファイル容量も、動作も軽い
• 表示やアニメーションもシンプルでおしゃれ

という素晴らしいライトボックス系プラグインです。

今回は、この「Luminous」の使い方をメモしていこうと思います。

まだ使い方を解説している記事も少なく、1枚にしか動かないような使い方しか紹介されてない記事が多かったので、複数枚に適用させる方法も紹介していこうと思います！

「なんだよ１枚にしか動かねぇじゃん、使えねぇなぁ」とか思っちゃって使うのをやめた方がもしいらっしゃったら、非常にもったいないです！
ぜひこの記事をじっくり読んでくださいね。

使用するファイルをダウンロードして読み込む

まずはスクリプト本体を下記のGithubから有り難く頂戴いたしましょう。

Github：https://github.com/imgix/luminous

Zipでダウンロードしたものを展開すると、luminous-masterというフォルダに展開されます。
さらにその中にdistというフォルダがあるので、その中にあるcssファイルとjsファイルを使います。

• CSSファイルはluminous-basic.min.cssもしくはluminous-basic.css
• JSファイルはluminous.min.jsもしくはluminous.js

以下では、「 luminous-basic.min.css」と「 luminous.min.js」を使用するとします。

CDNもあります：https://cdnjs.com/libraries/luminous-lightbox

読み込み方法の例

head内もしくはbody閉じタグ前にて

<link rel="stylesheet" href="./luminous-basic.min.css">
<script src="./luminous.min.js"></script>

もしくは、

WordPressであればwp_enqueue_scriptsフックに以下を追加

wp_enqueue_style('luminous_css', 'ファイルまでのパス/luminous-basic.min.css');
wp_enqueue_script('luminous_js', 'ファイルまでのパス/luminous.min.js');

Luminous.jsの基本的な使い方

必要なファイルを読み込むことができたら、自分のサイトのスクリプトファイルに設定などを記述していきます。

JS側：Luminousを発動させるスクリプトの記述

まずは簡単に、特別な設定はなしで"luminous"というクラスをつけたアンカータグをクリックした時に発動させたい場合は以下のようにします。

<script>タグ内もしくは、自分のスクリプトファイルにて...

var luminousTrigger = document.querySelector('.luminous');
if( luminousTrigger !== null ) {
  new Luminous(luminousTrigger);
}

と記述します。

'luminous'というクラス名のついた要素が存在しない場合にエラーにならないよう、条件分岐させています。querySelector()で要素が取得できなかった場合はnullが返ってきます。

上記スクリプトの読み込み位置は、luminous.min.jsの後になるように注意。

HTML側：拡大表示させたい画像の設置

あとはHTML側で " luminous" というクラス名をつけたアンカータグを設置し、 href属性に 拡大表示させたい画像パスを指定します。

HTML側の記述

<a href="拡大表示させる画像のパス" class="luminous">
  <img src="表示させる画像のパス" alt="画像">
</a>

これで、上記のアンカータグがクリックされると、href属性で指定した画像がズームインで表示されます。

DEMO

本当にさくっと拡大してくれます。

表示画像と拡大画像を分けた場合は少しだけ読み込みに時間がかかりますが、その間はCSSによるローディングアニメーションが表示されます。

複数枚に適用させる方法

複数の画像をLuminousで拡大表示させる場合、LuminousGallery という機能を使用します。

標準搭載されている LuminousGallery 機能

GithubのREADMEに紹介されている、Luminousの標準機能を使用します。

LuminousGalleryを使用する場合のスクリプト

var luminousTrigger = document.querySelectorAll('.luminous');
if( luminousTrigger !== null ) {
  new LuminousGallery(luminousTrigger);
}

document.querySelectorALL() でエレメントを全て取得し、
new Luminousではなく、 new LuminousGalleryを使用しています。

この機能を使うと、"luminous" というクラスを持ったアンカータグ全てが、クリックされるとhref属性で指定された画像を拡大表示してくれるようになります。

さらに、矢印が画像の左右に表示され、前後の画像を切り替えていくことが可能になります。

DEMO：LuminousGalleryを使う

Luminousのオプションについて

ここまであまり触れていませんでしたが、Luminousではいくつかオプションを指定することもできます。

指定できるオプションの種類とその初期値

// 共通で使用できるオプション
var options = {
  // 拡大画像につけるクラス。'big'を指定すると'big-img'というクラスが追加でつく。(lum-imgというクラスがすでについている。)
  namespace: null,

  // どの属性に拡大画像のパスを指定するか
  sourceAttribute: 'href',

  // 表示するキャプション。関数の指定が可能。
  caption: null,

  // どのイベントで画像を表示するか
  openTrigger: 'click',

  // どのイベントで拡大画像を閉じるか
  closeTrigger: 'click',

  // escキーでクローズさせるかどうか
  closeWithEscape: true,

  // スクロールしたときにクローズさせるかどうか
  closeOnScroll: false,

  // 拡大画像を表示させるlightboxをどこに挿入するか。
  appendToSelector: 'body',

  // オープン時に呼び出す関数
  onOpen: null,

  // クローズ時に呼び出す関数
  onClose: null,

  // 拡大画像に imgix-fluid というクラスをつけるかどうか。（imgixというプラグインとの連携用？）
  includeImgixJSClass: false,

  // ??? head内部に挿入されているstyleタグのこと？ https://github.com/imgix/luminous#theming を読めと説明されている
  injectBaseStyles: true,
};

//LuminouseGalleryクラスでのみ指定できるオプション
var galleryOpts = {
    // 矢印ナビゲーションを使用するかどうか
    arrowNavigation: true,
};

// トリガーの指定
var luminousTrigger = document.querySelector('.luminous');

//Luminousクラスでオプションを指定する場合
new Luminous(luminousTrigger, options);

//LuminouseGalleryクラスでオプションを指定する場合
new LuminousGallery(luminousTrigger, galleryOpts, options);

※injectBaseStylesについてだけよく分からなかったです。分かり次第更新します。

Luminousで画像にキャプションを付ける方法

caption:を指定することで好きなキャプションをつけることができます。

ポイントは、関数を使って任意の属性値をキャプションとして設定するところでしょうか。

一応、そのまま文字列を指定してもキャプションは表示できますすが、全ての画像で同じテキストになってしまいます。

例：画像のalt属性の値をキャプションにセットする

var options = {
  caption: function (trigger) {
    return trigger.querySelector('img').getAttribute('alt');
  },
}
var luminousTrigger = document.querySelectorAll('.luminous');

//LuminousGalleryで第二引数galleryOptsを特に指定しない場合は {} でOK。
new LuminousGallery(luminousTrigger, {}, options);

getAttribute('alt')の「 alt」の部分は任意の属性を指定できます。

DEMO：キャプションをつける

LuminousGalleryで矢印ナビゲーションを非表示にし、画像の切り替えをさせたくない場合

オプションを指定して矢印を表示させずに使用することも可能です。

arrowNavigation:falseに指定

var galleryOpts = {
  arrowNavigation: false
};
var luminousTrigger = document.querySelectorAll('.luminous');
new LuminousGallery(luminousTrigger, galleryOpts);

しかし、この arrowNavigation:の指定ですが、効かないことがけっこうあるっぽいです。

arrowNavigationをfalseにしても矢印が消えない時は

そんな時は、単数用のLuminousをループさせるといいでしょう。

複数画像に適用できて、かつ矢印は確実に表示されないのでオススメです。

Luminousをループさせる

var options = {
  //標準オプションの指定
}
var luminousTrigger = document.querySelectorAll('.luminous');
for (var i = 0; i < luminousTrigger.length; i++) {
  var elem = luminousTrigger[i];
  new Luminous(elem, options);
}

CSSの調整（個人的に）

めちゃくちゃ便利なLuminousですが、スマホの表示に関して個人的に一点だけ調節しておきたい点があります。

デフォルトのCSSのままではスマホの時に画像のサイズがそのまま画面に表示されてしまい、解像度の大きな画像の場合、ぱっと見わけがわからないことがあるのです。

この辺は好みで調節しておくといいかもしれません。

あくまでも1例ですが、私の追記コードを載せておきます。

luminous-bascic.min.cssの最下部に追記

.lum-lightbox{
  z-index: 999;
}

@media (max-width: 460px) {

  .lum-lightbox-inner img {
    max-width: 150vw;  /* 好きなサイズ感で */
    max-height: 88vh;  /* 90vhだと数pxだけ上下にスクロールできてしまうためこのサイズ */
   /* display: block;  を追加すると max-height: 92vh くらいでも大丈夫 */
  }

　 /* 矢印ナビが大きすぎると感じたら */
  .lum-gallery-button:after {
    width: 6vw;
    height: 6vw;
  }
}

メディアクエリの 460pxはLuminous側の既存コードに合わせたものです。

また、z-indexは念のため。

npmコマンドでインストールしてwebpackで使用する方法

webpackでモジュール化させて使用したい場合、

インストール (ローカルディレクトリにnode_modulesある場合)

$ npm i -D luminous-lightbox

とすればOKで、あとはwebpackでモジュール化させるエントリーポイントにて

Luminousクラスの読み込み

var Luminous = require('luminous-lightbox').Luminous;
var LuminousGallery = require('luminous-lightbox').LuminousGallery;

とすることで、new Luminous()やnew LuminousGallery()が使えます。

node_modulesにはインストールさせずにwebpackで使用する場合

webpackの exports-loader機能を使えば、npm installしなくても使えます。

Luminousクラスの読み込み

const lb = require('exports-loader?Luminous,LuminousGallery!./pathto/Luminous.min');

注意点は、そのままnew Luminous()するのではなく、new lb.Luminous()やnew lb.LuminousGallery()として使わなくてはいけないということでしょうか。

./pathto/Luminous.minは、Luminous.min.jsファイルまでのパスを適宜入力してください。

webpackのバインド後の容量に差はありませんでしたので、好きな方でいいと思います！