【JavaScript】超軽量Lightbox風スクリプト［Luminous］の使い方

つい最近見つけたLightbox風スクリプト［Luminous］がイイ感じです。

百聞は一見に如かず。
まずはサンプルをご覧ください。

サンプル : https://on-ze.com/demo/js-luminous/

お試しいただいたとおり、任意の画像をクリックすると素早くスムーズに拡大表示されます。
読み込みにも殆ど時間がかからず、軽快にカッコ良く動作しますね。
ぜんぜん関係ありませんが「ルミナス」という名前も素敵です。

嬉しいことに jQuery 不要で実装可能。初心者の方でも比較的簡単に導入できるでしょう。
詳しい使い方は以下より。

［Luminous］のダウンロードとインストール

最初に公式サイトからスクリプト本体ファイルをダウンロードしてきましょう。

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

上記サイトより、右上にある「Download ZIP」というボタンをクリックするとスグにダウンロードがはじまります。

入手した圧縮ファイルを解凍すると、いくつかのフォルダとファイルが出てきます。
このうち、実際に使うのは「luminous-basic.min.css」と「luminous.min.js」の２つ。

なお同梱の「index.html」には［Luminous］を動かすために必要な情報がすべて記載されています。
近道したいならこの「index.html」をコピペして利用しましょう。

各ファイルの読み込み

入手した「luminous-basic.min.css」と「luminous.min.js」をHTMLの任意の箇所で読み込みます。
このとき、初期設定も同時に済ませてしまうと後の作業が捗ります。

<link rel="stylesheet" href="luminous-basic.min.css">
<script src="luminous.min.js"></script>
<script>
// 設定
var demoTrigger = document.querySelector('.zoom-in');
new Luminous(demoTrigger);
</script>

設定の箇所ではクラス名「.zoom-in」を指定しています。ここがキーポイントで、画像にリンクを設置する際にアンカータグに同クラス名を付与することで［Luminous］が起動するようになっています。

［Luminous］を設置する

前述のとおり画像へのリンクにクラス名「.zoom-in」を付与します。

<a class="zoom-in" href="/images/sample.png">
<img src="/images/sample.png" width="400" height="300" alt="サンプル画像">
</a>

超簡単。これだけで導入完了です！

［Luminous］のオプション設定

デフォルトの設定は以下のとおり。

var options = {
	namespace: null,
	sourceAttribute: 'href',
	captionAttribute: null,
	openTrigger: 'click',
	closeTrigger: 'click',
	closeWithEscape: true,
	closeOnScroll: false,
	appendToSelector: 'body',
	onOpen: null,
	onClose: null,
	includeImgixJSClass: false,
	injectBaseStyles: true,
};
new Luminous(document.querySelector('a'), options);

基本的には設定不要でデフォルトのままで充分なはず。ただし「querySelector」で指定する要素だけは注意しましょう。ここを間違えるとエラーになり動作しなくなります。