【jQueryプラグイン】lity.jsの使い方｜画像やYouTube、Google Mapをポップアップする方法

RELEASE / 2024.7.9 UPDATE / 2024.07.09

jQuery

lity.js

プラグイン

ポップアップ

Webサイトの表現方法のひとつにポップアップというものがあります。画像やコンテンツをポップアップして拡大表示する表現方法です。
このポップアップを簡単に実装することが出来るjQueryプラグインのlity.js。
この記事ではlity.jsの使い方をご紹介したいと思います。

この記事の目次を表示

1 lity.jsの使い方
2 まとめ

lity.jsの使い方

lity.jsはjQueryベースで作られたプラグインなので、lity.jsを使うためには先にjQueryを読み込む必要があります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

続いて、lity.cssとlity.jsを読み込みます。

<link href="https://cdn.jsdelivr.net/npm/lity@2.4.1/dist/lity.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/lity@2.4.1/dist/lity.js"></script>

今回はどちらもCDNで読み込んでいます。

注意点は、jQuery　→　lity.jsの順番で読み込むようにします。
matchHeight.jsに限らず、jQueryプラグインの場合、jQueryより先に読み込んでしまうとエラーが発生して使うことが出来ません。

これでlity.jsを使うための準備は完了です。

画像をポップアップさせる

画像をポップアップさせる場合、<a>タグに画像URLをリンク設定し、その<a>タグにdata-lity属性を設定します。

<a href="https://irodori-design-web.com/blog_image/3198-large.jpg" data-lity><img src="https://irodori-design-web.com/blog_image/3198-small.jpg"></a>

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

ページ内の要素をポップアップさせる

ページ内の要素をポップアップさせる場合、ポップアップ表示させたい要素に任意のid属性と、class="lity-hide"を指定します。

ポップアップ表示させたい要素に指定したid属性を<a>タグのhref属性にhref="#popup"、data-lity属性にdata-lity="data-lity"と指定すれば紐づけが完了します。
<a>タグをクリックすることで指定した要素がポップアップ表示されます。
この二つの要素はどれだけ離れた位置に記述されていても正しく動作します。
class="lity-hide"を指定することでその要素は非表示状態になります。

<a href="#popup" data-lity="data-lity">ポップアップ表示する</a>
<div id="popup" class="lity-hide">
    <p>【jQueryプラグイン】lity.jsの使い方｜画像やYouTube、Google Mapをポップアップする方法</p>
</div>

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

YouTube動画をポップアップさせる

YouTube動画をポップアップさせる場合、<a>タグのhref属性にYouTube動画のページURLを設定し、その<a>タグにdata-lity属性を設定します。

<a href="https://www.youtube.com/watch?v=zt1H9iMJ-HU" data-lity>YouTube動画をポップアップさせる</a>

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

注意点は共有で取得出来るURLや<iframe>タグでは正しく表示されないので注意が必要です。

Google Mapをポップアップさせる

Google Mapをポップアップさせる場合、<a>タグのhref属性にGoogle Mapのページの「共有」→「地図を埋め込む」の<iframe>の中のsrc属性だけを取り出し設定し、その<a>タグにdata-lity属性を設定します。

<a href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.65660787827!2d139.80812547634395!3d35.710067028388394!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ed0d12f9adf%3A0x7d1d4fb31f43f72a!2z5p2x5Lqs44K544Kr44Kk44OE44Oq44O8!5e0!3m2!1sja!2sjp!4v1720528564881!5m2!1sja!2sjp" data-lity>Google Mapをポップアップさせる</a>

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

注意点はGoogle Mapのその地図のURLや共有の「リンクを送信する」の共有リンクだと正しく表示されないので注意が必要です。