JavaScript

lity.jsを使って画像やYoTubeをポップアップ表示する方法

  /

lity.jsを使って画像やYoTubeをポップアップ表示する方法をご紹介します。

Contents
  1. lity.jsを使って画像やYoTubeをポップアップ表示するCSSの記述
  2. 画像、Google Map、YoTubeをポップアップ表示するHTMLの記述
  3. lity.jsを使って画像やYoTubeをポップアップ表示するJavaScriptの記述
  4. lity.jsを使って画像やYoTubeをポップアップ表示するデモページ
  5. ソース元：Lity

lity.jsを使って画像やYoTubeをポップアップ表示する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"/>

画像、Google Map、YoTubeをポップアップ表示するHTMLの記述

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

<h1>lity.jsを使って画像やYoTubeをポップアップ表示します。</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を使って画像やYoTubeをポップアップ表示するJavaScriptの記述

※jquery.min.js（1系）、lity.jsファイルを読み込むだけです。

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

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

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

ソース元：Lity

Lity

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

モーダル ポップアップ lity.js
RELATED POST