0

画像や動画をぐいっとポップアップ表示!jQueryプラグインの「Lity」

画像や動画をぐいっとポップアップ表示!jQueryプラグインの「Lity」

画像イメージをクリックした際に、ポップアップで表示するプラグインとしては「Lightbox」が非常に人気があり多くの方のWEBサイトに実装されていました。きっと、一度はお世話になったことのある方も多いのではないでしょうか。

今回は、Lightboxと同じように画像をポップアップ表示し、且つレスポンシブ対応が可能な「Lity」というプラグインをご紹介します。PCユーザーも、スマホユーザーも同時に対応が可能なのでたいへん役に立っています。

Lity Lightweight, accessible and responsive lightbox.

それでは、実際に実装方法を見ていきましょう。

▼実装方法

Lityを実装する方法は大きくふたつあります。一つ目はCDNを利用する方法で、もう一つはファイルをダウンロードして利用する方法です。まずはCDNを利用する方から解説していきます。

CDNを利用する場合

ファイルをダウンロードせずに、CDNを利用して実装する場合はこちらになります。

jQuery・js・CSSを読み込む

HTMLの<head>~</head>内に以下のコードを記述します。

必ずjQueryの本体を読み込んでから、lity.jsを読み込むようにしてください。

ファイルをダウンロードして利用する場合

公式サイトからファイルをダウンロードして利用する場合はこちらになります。

file

ファイルをダウンロードすると、上画像のような「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>内に記述し読み込みます。

これで準備は整いました。後は実際にポップアップ表示させる要素の記述になります。

 

ここからが本番!

デモサンプルを用意したのでまずはご覧ください。

デモサンプル

画像、動画、地図などすべて同じルールで記述すれば良いのですが、実際にポップアップさせたい要素の<a>要素に対して「カスタムデータ属性」を追加します。

画像イメージをポップアップ表示

画像イメージをポップアップ表示

例えば[imagesフォルダ]のsample.jpgをポップアップさせる場合は以下のように記述をします。

動画をポップアップ表示

動画をポップアップ表示

Googleマップをポップアップ表示

Googleマップをポップアップ表示

以下、これだけです。Lityの特徴はカスタムデータ属性として「data-lity=”data-lity”」と該当箇所に記述すれば良いだけなので非常に簡単です。是非、ご活用ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > jQuery > 画像や動画をぐいっとポップアップ表示!jQueryプラグインの「Lity」