lity.jsを使って画像やYoTubeをポップアップ表示する方法をご紹介します。
Contents
ディスプレイ広告
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
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。