［複数画像対応］軽量な画像拡大スクリプト「Luminous.js」の使い方
posted : 2018.05.28
こんにちは、ma-ya’s CREATE［まーやずくりえいと］です。
このサイトのGalleryコンテンツ内の画像それぞれをギャラリー風に拡大表示したいな、と思い見つけたスクリプト「Luminous.js」。
挙動がシンプルでファイルも軽量なので採用することにしました。
リリースは二年位前みたいなんですが、使い方を書いてある記事が少ないようなので記事にしてみます。
各ファイルのダウンロード
githubよりファイル一式をダウンロードします。
サイト右上の「clone or download」→「downloadZIP」からですね。
使うファイル
解答後の「dist」フォルダ内
- Luminous.min.js
- luminous-basic.min.css
を使います。（”min”は圧縮の有無。どちらを使用しても大丈夫）
各ファイルの読み込み
<link rel="stylesheet" href="css/luminous-basic.min.css"> <script src="js/Luminous.min.js"></script>
※カラー太字部分はファイル階層を指定
Luminous.jsの設定スクリプトを記述［複数画像対応ver.］
ココがポイント。
複数画像に対応する記述バージョン、基本形の記述バージョンで記述内容が分岐します。
A.複数画像対応ver.
<script> var luminousTrigger = document.querySelectorAll('.zoomImg'); new LuminousGallery(luminousTrigger); </script>
B.基本形
<script>
var demoTrigger = document.querySelector('.zoomImg');
new Luminous(demoTrigger);
</script>
※「.zoomImg」部分は任意のクラス名
両者を比べると複数画像対応バージョン（A）がdocument.querySelectorAllで複数セレクタを検索しているのに対して、基本形バージョン（B）は単数検索です。
また生成するインスタンスもAは”Gallery”の記述が追加され、ギャラリー表示が可能なことを表しています。
上記AかBを「Luminous.min.js」の読み込み位置より後に記述
Luminousに限らず、こういったスクリプトを実装する際、呼び出し（太赤字）の記述は大抵jsファイル本体の後に読み込むので注意。
//記述サンプル //head内でCSSを読み込み <link rel="stylesheet" href="./luminous-basic.min.css"> //body閉じタグ直前でプラグイン本体→呼び出し記述の順で読み込み <script src="js/Luminous.min.js"></script> <script> var luminousTrigger = document.querySelectorAll('.zoomImg'); new LuminousGallery(luminousTrigger); </script>
例としては↑をhead及びbody内に挿入してやる感じ。
HTMLを準備
<a href="画像パス" class="zoomImg">
<img src="画像パス">
</a>
js側で設定した任意のクラス（今回の場合「zoomImg」）はリンク部分（a要素）につけます。
最低限、ここまでの記述で動作します。
個人的には軽量なのに加えて、最低限の機能性かつセンスの良いフェード感がお気に入り。
WordPressサイトへの実装＆カスタマイズ例
ちなみにこのサイトはWordPressサイトなので、そっちの処理も追加しつつスクリプト設定もカスタマイズして実装しています。
あくまでこのサイトの例ですが、カスタム投稿の個別記事だけでluminous.jsを使用する事としました。
ポイントとしては、
- カスタム投稿個別記事でのみjsファイル及びスクリプト設定ファイルを読み込み
- 記事内の画像全てに動的にzoomImgクラスを付与
- 既にリンク（aタグ）が付いている画像は②を除外（元のリンクを優先）
- luminous-basic.min.cssをカスタマイズ（主に見た目）
としました。①、②、③あたりの実装サンプルは下記のような感じです（④は普通にcssファイルを編集するだけなので割愛）。
Luminous.setting.js（Luminous設定を外部ファイルに分離）
カスタム投稿タイプの個別記事でのみjsファイルを読み込み（functions.php / wordpress）
カスタム投稿タイプの個別記事判別は下のコードで行えます。
is_singular('カスタム投稿タイプ名')
Luminous.setting.js内の.wrap()関数は初めて使いましたが結構便利かも。
その他設定やオプション
その他、細かい設定は下記サイトが詳しいので参考にしてみて下さい（ぼくも大いに参考にさせて頂きましたmm）。
