動画や画像等をポップアップ表示する「Lity」【jQuery】

特徴

非常に軽量で使いやすいjQueryのLity。レスポンシブデザインにも対応しているし、YouTubeのようなiframeやdiv要素もポップアップ可能です。

インストール

必要なファイルは3種類。
head内に以下の行を追加するかダウンロードしてリンクを指定します。

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/lity/1.6.6/lity.css' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/lity/1.6.6/lity.js'></script>

使い方

iframeをポップアップ表示

a タグの url にポップアップさせたいリンクを指定して、「data-lity=”data-lity」と属性を追加するだけクリックするとポップアップ表示してくれるようになります。

<a href="https://www.youtube.com/embed/_HavTYokc8I?rel=0" data-lity="data-lity">YouTubeを表示</a>

YouTubeを表示

div要素をポップアップ表示

div要素をポップアップさせたい場合、ボックスさせるdiv要素に class=”lity-hide” というclass名を付与し、さらに任意のidを指定してします。例）id=”sample”
このボックスdiv要素の中身は自由にコーディングが可能です。

<div id="sample" class="lity-hide">
	<p>テキストや画像も可能</p>
</div>

参考にさせていただいたサイト

http://phiary.me/jquery-plugin-lity/#post-h3-id-2_1

【jQuery】画像、動画、ボックス要素をポップアップで表示させる［Lity］の使い方。