浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【jQuery】画像をポップアップで表示できるライブラリ「Lity」

Cordova アプリで、表示している画像をタップして全画面でポップアップ表示させたいときに導入したライブラリ「Lity」のご紹介です。
レスポンシブ対応なので、スマートフォンでも使えました。
また、準備や実装もとっても簡単でした。

公式サイトはこちらから。

Lity – Lightweight, accessible and responsive lightbox
https://sorgalla.com/lity/

 

さて使い方ですが、私は npm の下記のコマンドでライブラリをインストールしました。

npm i lity jquery --save

なお、Lity を使用する際には jQuery も必要になるため、一緒にインストールします。
もしくは jQuery のかわりに zepto.js を使ってもいいそうですので、こちらはお好みでどちらかを選択してください。

上記が完了したら、ライブラリを使用したいページで必要なファイルをインポートします。

import 'lity/dist/lity.css';
import 'lity/dist/lity.js';

あとは、ポップアップしたい要素を下記のように <a> タグで囲うだけです!

<a href="画像パス" data-lity><img src="画像パス" /></a>

上記のように、<a> タグに data-lity を追加すると、その要素を開いた時にリンク先がポップアップで表示されます。

なお、私は画像をタップしたら、その画像がダイアログで表示されるようにしたかったのでこのようにしましたが、もちろん文字リンクにしてもOKです。
また、画像以外にも、Youtube の動画や Google Map や、iframe のように Webページを表示することも可能です。
こちらについては、公式サイトにデモが載っていますので、併せてご確認ください。

 

以上、jQuery で画像をポップアップ表示できるライブラリ「Lity」のご紹介でした。
ご参考になれば幸いです。

  • この記事いいね! (0)