画像や動画をポップアップで表示させる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］：サンプル・デモ
