画像や動画をポップで表示できるjs「Lity」を紹介いたします。
「Lity」とは「LightBox」と同じように画像や動画をポップで表示できるjQueryプラグインでレスポンシブにも対応しております。
設定方法
最初に下記公式配布サイトへいき、必要ファイルをダウンロードしてください。
ダウンロードしたデータの中で使用するのは[lity.min.css][lity.min.js]です。
下記のようにファイルをHTMLの内で読み込みます。
※[jquery]のファイルを[lity.min.js]より先に読み込むように設定をしてください。
<link rel="stylesheet" href="lity.min.css">
<script src="jquery.js"></script>
<script src="lity.min.js"></script>
画像のポップアップ
下記の通りにaタグやimgタグに[data-lity属性]をつけるだけで画像のポップアップ設定が完了します。
<p><a href="common/img/1234.png" data-lity>画像ポップアップ</a></p>
インライン要素をポップアップ
HTML内の特定の要素を[Lity]で表示する場合は下記の通りとなります。
ボックス要素に[class="lity-hide"]というclass名を付与し、任意のidを指定します。(例 id="sample")
ボックス要素の中は自由にコーディングが可能です。
[class="lity-hide"]は要素が非表示になる効果があり非表示状態になっているので
[data-lity="data-lity"]を付与したaタグで[href="#sample"]を指定すれば設定完了です。
<p><a href="#sample" data-lity="data-lity">ボックスポップアップを表示</a></p>
<div id="sample" class="lity-hide">
<p>自由にコーディングが可能です。</p>
</div>
Webページをポップアップ
aタグでポップアップで開きたいページURLを指定し、[data-lity属性]を付けるだけで設定完了です。
<p><a href="https://www.omakase.net" data-lity>omakase.net</a></p>
google mapをポップアップ
aタグでポップアップで開きたいgoogle mapの埋め込みURLを指定し、[data-lity属性]を付けるだけで設定完了です。
google mapの埋め込みURLは[地図を共有または埋め込む]から取得できます。
<p><a href="//www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3261.30739141526!2d136.89515371560262!3d35.17389036523469!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x600376d6b02a9ebd%3A0xe6fc733dc8c622fc!2z5qCq5byP5Lya56S-6Zu76ISz6IG35Lq65p2RW-WQjeWPpOWxi-ODk-ODrOODg-OCuF0!5e0!3m2!1sja!2sjp!4v1619412984900!5m2!1sja!2sjp" data-lity>google map</a></p>
デモページを用意しましたので下記よりご確認ください。
