画像イメージをクリックした際に、ポップアップで表示するプラグインとしては「Lightbox」が非常に人気があり多くの方のWEBサイトに実装されていました。きっと、一度はお世話になったことのある方も多いのではないでしょうか。
今回は、Lightboxと同じように画像をポップアップ表示し、且つレスポンシブ対応が可能な「Lity」というプラグインをご紹介します。PCユーザーも、スマホユーザーも同時に対応が可能なのでたいへん役に立っています。
Lity公式サイト – Lightweight, accessible and responsive lightbox.
それでは、実際に実装方法を見ていきましょう。
▼実装方法
Lityを実装する方法は大きくふたつあります。一つ目はCDNを利用する方法で、もう一つはファイルをダウンロードして利用する方法です。まずはCDNを利用する方から解説していきます。
CDNを利用する場合
ファイルをダウンロードせずに、CDNを利用して実装する場合はこちらになります。
jQuery・js・CSSを読み込む
HTMLの<head>～</head>内に以下のコードを記述します。
|
1 2 3 |
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/lity/1.6.6/lity.css' /> <script src='https://cdnjs.cloudflare.com/ajax/libs/lity/1.6.6/lity.js'></script> |
必ずjQueryの本体を読み込んでから、lity.jsを読み込むようにしてください。
ファイルをダウンロードして利用する場合
公式サイトからファイルをダウンロードして利用する場合はこちらになります。
ファイルをダウンロードすると、上画像のような「lity.css／lity.js／lity.min.css／lity.min.js」がファイルにありますので、「lity.min.css／lity.min.js」を任意のフォルダにコピーしてください。
lity.min.css・lity.min.cssを読み込む
cssフォルダに配置したlity.min.css、jsフォルダに配置したlity.min.jsをHTMLの<head>～</head>内に記述し読み込みます。
|
1 2 3 |
<link rel="stylesheet" href="css/lity.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="js/lity.min.js"></script> |
これで準備は整いました。後は実際にポップアップ表示させる要素の記述になります。
ここからが本番！
デモサンプルを用意したのでまずはご覧ください。
画像、動画、地図などすべて同じルールで記述すれば良いのですが、実際にポップアップさせたい要素の<a>要素に対して「カスタムデータ属性」を追加します。
画像イメージをポップアップ表示
例えば[imagesフォルダ]のsample.jpgをポップアップさせる場合は以下のように記述をします。
|
1 |
<p><a href="images/sample.jpg" data-lity="data-lity">サンプル画像を表示</a></p> |
動画をポップアップ表示
|
1 |
<p><a href="https://www.youtube.com/watch?v=777CTBZh_Y4&list=PLcsq2jjTfJ_r0q1zxNsKjcYl1-KhGeig" data-lity="data-lity">動画を見る</a></p> |
Googleマップをポップアップ表示
|
1 |
<p><a href="https://goo.gl/maps/qoaZMitrN2n" data-lity="data-lity">地図を見る</a></p> |
以下、これだけです。Lityの特徴はカスタムデータ属性として「data-lity=”data-lity”」と該当箇所に記述すれば良いだけなので非常に簡単です。是非、ご活用ください。