クリックすると画像を拡大してくれる、いわゆる「lightbox(ライトボックス)」というスクリプトって便利ですよね。
制作現場でも多くの場面で導入されているかと思います。
ではみなさん、このライトボックス系のスクリプトプラグインの中でも、「Luminous」というjQuery不要の超軽量スクリプトプラグインをご存知でしょうか?
- jQueryに依存しない
- ファイル容量も、動作も軽い
- 表示やアニメーションもシンプルでおしゃれ
という素晴らしいライトボックス系プラグインです。
今回は、この「Luminous」の使い方をメモしていこうと思います。
まだ使い方を解説している記事も少なく、1枚にしか動かないような使い方しか紹介されてない記事が多かったので、複数枚に適用させる方法も紹介していこうと思います!
「なんだよ1枚にしか動かねぇじゃん、使えねぇなぁ」とか思っちゃって使うのをやめた方がもしいらっしゃったら、非常にもったいないです!
ぜひこの記事をじっくり読んでくださいね。
使用するファイルをダウンロードして読み込む
まずはスクリプト本体を下記のGithubから有り難く頂戴いたしましょう。
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のバインド後の容量に差はありませんでしたので、好きな方でいいと思います!
コメント
コメント一覧 (4件)
Luminous最高ですね!
ところで
var luminousTrigger = document.querySelector(‘.luminous’);
new Luminous(luminousTrigger);
だけを書くと「.luminous」がないページでエラーになってしまうようなので、
if($(‘.luminous’).length){
//ここに書く
}
とかで判定させるのが良いでしょうか?
話変わりますけどかっこいいブログですね。サイドバーとか好きです。
ご指摘ありがとうございます!その通りですね!記事に追記させていただきました。
ただ、jQueryを使わなくていいことが売りなので、判定には !== null を使うようにしました^^
ありがとうございます!あまり見慣れないサイドバーの形にしてみて少し不安だったので、そういっていただけると嬉しいです。
大変参考になりました!
Vue.jsでも上記の方法で利用できるのでしょうか。
Vueで使ったことはまだないのでわからないです、すみません。
実際にやってみていただければと思います。