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”」としても動きます。
あとがき
導入手順も非常に簡単で使いやすいですね。動作も軽くて良い感じです。
コンテンツをポップアップ表示させたい時は、ぜひ導入をご検討ください。