画像や動画をポップアップで表示させるJavaScriptのプラグインで、特に有名なものでは［LightBox］が挙げられます。

ここで紹介する［Lity］は［LightBox］と同じように使えるjQueryプラグインで、レスポンシブにも対応済み。またデータ容量も4KB未満と軽量で気軽に導入できる点が魅力です。

その実装方法ですが、まずは公式配布サイトより必要なファイルをダウンロードしてきましょう。

［Lity］：公式サイト

いくつかのファイルが梱包されていますが、このうち使うのは「lity.min.css」と「lity.min.js」の２つのファイル。
当然ですが［Lity］はjQueryに依存していますので、jQuery本体のスクリプトも必要です。

  • lity.min.css
  • lity.min.js
  • jquery.js

これらのファイルをHTMLの <head>～</head> 内で読み込みます。

このとき「jquery本体ファイル」と「lity.min.js」を読み込む順番にも注意しておきましょう。
「lity.min.js」よりも先に「jquery.js」を読み込むようにします。

<link rel="stylesheet" href="lity.min.css">
<script src="jquery.js"></script>
<script src="lity.min.js"></script>

続いて［Lity］を起動させるスイッチですが、これは「a要素」に「カスタムデータ属性」を追加して設定します。

リンク先の「href属性」の値でポップアップで表示させる画像や動画、ボックス要素などを指定します。

<a href="images/sample.png" data-lity="data-lity">画像をLityで表示</a>

なお、カスタムデータ属性の「data-lity」の値は指定しなくても起動するようですが、念のため data-lity="data-lity" と記述しておいたほうがよさそうです。

HTML内の特定の要素を［Lity］で表示させる場合はちょっとした仕掛けが必要です。

この場合、まずはボックス要素に class="lity-hide" というclass名を付与し、さらに任意のidを指定しておきす。ここでは仮に id="sample" としましょう。
このボックス要素の中身は自由にコーディングが可能です。

<div id="sample" class="lity-hide">
	<p>ここは自由にカスタマイズ可能です。</p>
</div>

class=“lity-hide"の効果によって要素が非表示状態になっているので、あとはカスタムデータ属性data-lity="data-lity"を付与した［a要素］で href="#sample" を指定すれば設置完了です。

<p><a href="#sample" data-lity="data-lity">サンプルを表示する</a></p>

実際に［Lity］を実装したサンプルサイトを用意しましたので、合わせてご覧ください。

jQuery［Lity］：サンプル・デモ