【Lity】画像＆動画＆特定の要素をポップアップで表示させる方法

モーダルやポップアップでよく使われているが「lightbox」だと思います。

以前は僕も「lightbox」か自作のモーダル使っていましたが「Lity」というプラグインを使ったところ使いやすかったので今回紹介したいと思います。

今回紹介する「lity」というプラグインはファイル自体も軽量で使いやすいJQueryプラグインになっています。

またレスポンシブにも対応しているのでPCサイトからスマホサイトまで幅広く対応できます。

Lityの使い方

まずは公式サイトからファイルをダウンロードする

まずLityを使うためには公式のサイトから必要なファイルをダウンロードする必要があります。

公式サイトは下記のURLになります。

Lity - Lightweight, accessible and responsive lightbox

Lity is a ultra-lightweight, accessible and responsive lightbox plugin which supports images, iframes and inline content...

sorgalla.com

必要なファイルは2つのファイル

必要なファイルは下記の2ファイルになります。

• lity.min.css
• lity.min.js

ファイルをダウンロードしたら特定のフォルダに格納しましょう。

ファイルの読み込み

<link rel="stylesheet" href="lity.min.css">
<script src="lity.min.js"></script>

Lityを使うためには上記の2ファイルを読み込むための記述をします。

画像、動画をポップアップ表示させるための記述

html

<a href="img.jpg" data-lity="data-lity">画像や動画をポップアップでさせるための記述</a>

表示させたい画像や動画のパスをhrefに設定します。

特定の要素をポップアップ表示させるための記述

html

<!-- ポップアップで表示させるもの -->
<div class="lity-hide" id="pop">
        <div>ポップアップさせる部分</div>
</div>

<!-- ポップアップさせるときにクリックする要素 -->
<a href="#pop" data-lity="data-lity">クリックでポップアップを表示させる</a>

クリックしたら特定の要素をポップアップで表示させたいときはクリックさせる要素とクリックした後にポップアップで表示させる要素が必要になります。

サンプル