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」のご紹介でした。
ご参考になれば幸いです。
