今回は、すごくシンプルで利用しやすいLightboxを紹介していくよ。

今まで色々使ってきた中で、凄く楽と感じるほど使い勝手が良いので、package.jsonに入れてます。

必要なもの

公式サイト
Lity - Lightweight, accessible and responsive lightbox

NPMが利用できない方は、公式サイトからダウンロードしてください。

インストール

ダウンロードしてきた場合

<link href="dist/lity.css" rel="stylesheet">
<script src="vendor/jquery.js"></script>
<script src="dist/lity.js"></script>

jQueryは各自用意しているものでも可能です。あまり古すぎるバージョンだと動かない可能性があります。

NPMからインストールする場合

まずは、npmコマンドでインストール

npm i -S lity

jQueryを入れていない場合は、インストールしてください。
npm i -S jquery

インストール後に、CSSファイルを読み込ませますが、ここではScssファイルを使った取り込みを記述してます。

// app.scss
@import '~lity/dist/lity';

JavaScriptの読み込み。
ここでは、webpackとbabelを利用した取り込み方で記述してます。
lityはjQueryがインストールされてる場合は自動でimportします。

// app.js
import 'lity';

シンプルにこれだけです。むっちゃ楽！

使用方法

ここでは、画像やYouTubeを使った説明をするよ。

<!-- 画像 -->
<a href="http://example.com/example.jpg" data-lity>〜画像（サムネイル的なのをここに書く）〜</a>

<!-- YouTube -->
<a href="https://www.youtube.com/watch?v=kpWO24zc7sU" data-lity><img src="https://i.ytimg.com/vi/kpWO24zc7sU/sddefault.jpg"></a>

上記の書き方だけど、data属性を追加して上げるだけで基本的には使える形です。

画像の動作サンプル

YouTubeの動作サンプル

YouTubeの場合に関連動画を表示したくない場合があると思いますが、そこもlityは対応していて、コアファイルの部分を見てみると、クエリーを自動で処理するように作られています。

この辺を調べてると、コアファイルを弄るパターンが多かったので不思議に思ってたのですが、しっかりコードを見てるとパラメータ周りの処理が入っていたので、試しにYouTubeのURLの後ろにrel=0を追加してみると、自動でパラメータを設定してくれました。

関連動画（rel=0）を非表示にした場合のサンプル

ざっくりでしたが、詳しい内容は公式サイトにあるのでそちらをご参照ください。