lity.js活用ガイド：画像・YouTube動画を魅力的にポップアップ表示する方法

Webページを彩る方法として、画像や動画をポップアップ表示することがあります。
今回は、lity.jsを使って画像やYouTube動画をポップアップ表示する方法をご紹介します。

CSSの記述

まずは、lity.cssファイルを読み込み、必要に応じてスタイルを調整します。

<style>
body {
  font-size: 16px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 20px;
  line-height: 1.6em;
  padding-top: 20px;
}
h2{
  font-size: 18px;
}
p{
  padding-bottom: 10px;
  font-size: 18px;
}
</style>
<link href="lity.css" rel="stylesheet"/>

HTMLの記述

ポップアップ表示させたい画像（1.jpg～3.jpg）、Googl Map、YouTube動画リンクを用意し、各aタグにdata-lity属性を設定します。

<h1>lity.jsを使って画像やYouTubeをポップアップ表示します。</h1>
<p>以下の画像または各リンクをクリックして下さい。</p>

<h2>画像を表示</h2>
<a href="1.jpg" data-lity><img src="1.jpg" width="200"></a><br>
<a href="2.jpg" data-lity><img src="2.jpg" width="200"></a><br>
<a href="3.jpg" data-lity><img src="3.jpg" width="200"></a><br>
<br>
<br>

<a href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3246.442666006292!2d139.67402283050825!3d35.54276818192736!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60185f62523fab3d%3A0xb37d1d81ecde8b6a!2zVmljZVZhZyAtIOODkOOCpOOCueODkOOCsA!5e0!3m2!1sja!2sjp!4v1667616868631!5m2!1sja!2sjp" data-lity>Google Mapを表示</a><br>
<br>
<br>

<a href="https://www.youtube.com/watch?v=NAAAXdyYtYw" data-lity>Youtubeを表示</a>
<br>
<br>

lity.jsを使って画像やYouTube動画をポップアップ表示するJavaScriptの記述

jquery.min.js（1系）、lity.jsファイルを読み込むだけ、あとはlityが自動的に処理を行います。

<script src="jquery.js"></script>
<script src="lity.js"></script>

lity.jsを使って画像やYouTubeをポップアップ表示するデモページ

実際に動作するデモページを確認することができます。

lity.jsを使って画像やYouTubeをポップアップ表示するデモページ

ソース元：Lity

Lity

まとめ

lity.jsを使えば、簡単に画像やYouTube動画をポップアップ表示させることができます。Webページの演出にぜひ活用してみてください。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。