【jQuery】レスポンシブ対応で画像・動画が簡単にポップアップ表示ができるLity.jsの使い方

画像や動画のポップアップ表示が簡単に実装できるプラグインLity.jsの使い方をご紹介します。

ポップアップ

ポップアップってボタンをクリックするとフワッと表示されるこんなやつです。

写真や動画を拡大して表示したいときなどによく使われる実装です。
レスポンシブ対応する時に、いい感じに表示できるプラグインLity.jsを導入する方法です。

導入方法

まずは公式配布サイトから必要なファイルをダウンロード。公式サイト zipファイルがをダウンロードしてきて、解凍します。
解凍したファイルの中で、使用するファイルは「lity.min.js」と「lity.min.css」です。
Lity.jsはjQueryに依存しますので、しっかりjQueryも読み込ませます。

<link rel="stylesheet" href="lity.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="lity.min.js"></script>

あとはポップアップ表示するhref属性にカスタムデータ属性（data-lity=”data-lity”）を追記すればOKです。

//画像
<a href="img01.jpg" data-lity="data-lity">image</a>
 
//表示したいボックス要素を「class="lity-hide"」で非表示
<a href="#inline" data-lity="data-lity">inline</a>
 
 
<div id="inline" class="lity-hide">
  <img src="img02.jpg" alt="">
</div>
 
 
//Google Map
<a href="//maps.google.com/maps?q=1600+Amphitheatre+Parkway,+Mountain+View,+CA" data-lity="data-lity">Google Map</a>
 
//youtube
<a href="//www.youtube.com/watch?v=XSGBVzeBUbk" data-lity="data-lity">youtube</a>

サンプル・デモ