Luminous」という、クリックすると画像を拡大してくれる超軽量の素晴らしいスクリプトを発見したので、使い方をメモっておこうと思います。

この類のスクリプトでは lightbox がかなり有名で、私もよく使わせてもらっているのですが、画像をクリックしてから拡大表示されるまでの待機時間が地味に長い。

そこでなんか軽量のやつないかなーと思って検索してみると出会ってしまったのが Luminousくんです。
サクっと動いてくれて、ズームにはアニメーションもついているのですごく心地よい動作感です。

まだ使い方の記事とかもあまり見当たらなくて、指定した1枚にしか動かないような使い方しか紹介されてない記事も多いっぽいので、複数枚に適用させる方法も紹介していこうと思います!

なんだよ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」を使用するとします。

読み込み方法の例

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" というクラスをつけたアンカータグをクリックした時に発動させたい場合

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

var luminousTrigger = document.querySelector('.luminous');
new Luminous(luminousTrigger);

と記述します。スクリプトの記述場所、もしくは記述ファイルの読み込み位置は、「luminous.min.js」の後になるように注意。

追記(2018/08/01)

コメントによりご指摘をいただきました。上記のコードをそのまま使うと'luminous'というクラス名のついた要素がない場合にエラーになってしまいます。

なので、条件分岐させておきましょう。

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

querySelector()で要素が取得できなかった場合はnullが返ってきます。

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

HTML側の記述

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

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

DEMO

image

上記の画像は表示画像と拡大画像のパスを分けているので、初回表示時のみほんの少しだけロード時間がかかりますが、本当にさくっと拡大してくれます。(表示画像と拡大画像を分けない場合はすでに画像が読み込まれているので一瞬です。)

複数枚に適用させる方法

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

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

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

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

var luminousTrigger = document.querySelectorAll('.luminous');
new LuminousGallery(luminousTrigger);

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

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

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

DEMO

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');
new LuminousGallery(luminousTrigger, {}, options);  //LuminousGalleryで第二引数galleryOptsを特に指定しない場合は {} でOK。

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

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);
}

DEMO

キャプションの付与矢印ナビゲーションなしでの複数画像へ適用させたデモです。

夕暮れの写真

都市の写真

おわりに

Luminous最高ですね。ただそれだけです。

もうlightboxを使うことはなくなりそうです。笑

[ 追記 ] - 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のバインド後の容量に差はありませんでしたので、好きな方でいいと思います!

- Thank you for reading. -

コメント

  • 助かりました より:

    Luminous最高ですね!

    ところで

    var luminousTrigger = document.querySelector('.luminous');
    new Luminous(luminousTrigger);

    だけを書くと「.luminous」がないページでエラーになってしまうようなので、

    if($('.luminous').length){
    //ここに書く
    }

    とかで判定させるのが良いでしょうか?

    話変わりますけどかっこいいブログですね。サイドバーとか好きです。

  • より:

    ご指摘ありがとうございます!その通りですね!記事に追記させていただきました。

    ただ、jQueryを使わなくていいことが売りなので、判定には !== null を使うようにしました^^

    ありがとうございます!あまり見慣れないサイドバーの形にしてみて少し不安だったので、そういっていただけると嬉しいです。

コメントする