「Lity」の使い方。画像や動画を簡単に強制ポップアップ表示させるJSライブラリー【WEB制作】

「Lity」の使い方。画像や動画を簡単に強制ポップアップ表示させるJSライブラリー【WEB制作】

LityはjQueryを利用したLightbox系のJavaScriptライブラリです。

Lityを使うとどうなる？

ユーザーがボタンを押すと、対象の内容をポップアップ表示できます。
ポップアップ表示をすることで、自分のサイトから他のサイトへ離脱を減らすことが可能になります。
スマホブラウザで開いたときにも別のタブで表示されることはなく、同じ画面内でポップアップ表示されます。

画面右上には「X」印が表示され、「X」を押すとポップアップが閉じます。

Lityの実装方法

Lity の公式サイトからソースをダウンロードします。

GithubのURLへ移動したら「Source code(zip)」を押してダウンロードします。

Lityのサンプル

lity-2 ＞　index.htmlを開くとLityのサンプルが見られます。

Lightboxのインストール

headタグ内にlity.cssへの読み込みリンクと、
jQueryのリンクとlity.jsを読み込みさせます。
lity.jsの読み込みはjQueryの行の下に書きます。

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

Lityの使い方

a要素の中にdata-lityを書き込みます。
これだけ。

<a class="btn" href="https://farm9.staticflickr.com/8642/16455005578_0fdfc6c3da_b.jpg" data-lity data-lity-desc="Photo of a flower">Image</a>

インライン要素を表示させる場合には、インライン要素にclass="lity-hide"のクラスをつけることで
非表示になります。
ページ内リンク同様に#を頭につけて表示させる要素のidを書き込みます。

<a class="btn" href="#inline" data-lity>Inline</a>

<div id="inline" style="background:#fff" class="lity-hide">
Inline content
</div>

まとめ

ライブラリを読み込ませて、 data-lity を書き込みするだけなので非常に簡単です。
Youtube動画のポップアップ表示は重宝するのではないでしょうか。

検証環境

Lity バージョン　2.3.1
Google Chrome バージョン: 72.

あわせて読みたい

【WEB制作】Lightboxの実装方法。かっこいい画像ギャラリーがJavaScriptの知識なしで簡単実装できる LightboxはjQueryを利用したJavaScriptライブラリ。 最近は見かける機会が減ってきましたが、写真を押すと写真が拡大表示されて 黒背景に写真が等倍で表示される「写真...