今回は、すごくシンプルで利用しやすい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)を非表示にした場合のサンプル
ざっくりでしたが、詳しい内容は公式サイトにあるのでそちらをご参照ください。