YouTube動画や画像をポップアップ表示できるjQueryプラグイン「Lity」

YouTube動画や画像をポップアップ表示できるjQueryプラグイン「Lity」

YouTube動画や画像をポップアップ表示できるjQueryプラグイン「Lity」

Lityは、YouTube動画や画像などをポップアップで表示できるjQueryプラグインです。動画や画像のリンクをクリックすることで、いわゆるモーダルウインドウとして表示させることができます。

配布サイトでデモが用意されていますので、挙動についてはこちらでご確認ください。

Lityの使い方

ステップ1. jQuery本体とLityの読み込み

LityはCDN経由で提供されていますので、以下コードを<head>~</head>内に追加することでLityを読み込めます。

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

配布サイトからファイルをダウンロードして、サーバーに設置してもOKです。ダウンロードしたファイルを読み込む場合、読み込むファイルは以下の通りです。

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

ステップ2. HTMLのマークアップ

HTML側では、ポップアップで表示したい要素をリンク先に指定し、a要素にdata-lity属性を追加してあげます。

<!-- 画像 -->
<a href="images/example.jpg" data-lity data-lity-desc="画像の説明(altの代わり)">Image</a>

<!-- YouTube -->
<a href="//www.youtube.com/watch?v=XSGBVzeBUbk" data-lity>Youtube</a>

<!-- Vimeo -->
<a href="//vimeo.com/1084537" data-lity>Vimeo</a>

<!-- フォーム等 -->
<a href="#inline" data-lity>Inline</a>
<div id="inline" style="background:#fff" class="lity-hide">
Inline content
</div>

<!-- Googleマップ -->
<a href="//maps.google.com/maps?q=1600+Amphitheatre+Parkway,+Mountain+View,+CA" data-lity>Google Maps</a>

画像やYouTube動画だけでなく、div要素やGoogleマップなど、何でもポップアプで表示させることが可能です。登録フォームをポップアップで表示させたいといった場合でも使えますね。

なお、data-lity属性は「data-lity=”data-lity”」としても動きます。

あとがき

導入手順も非常に簡単で使いやすいですね。動作も軽くて良い感じです。

コンテンツをポップアップ表示させたい時は、ぜひ導入をご検討ください。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です