Lity
最終更新日時:2017-02-13 18:14:42
jQuery
jQuery
Lity は いわゆる Lightbox 系の機能を提供する jQuery のプラグインです。
シンプルでお手軽に使えるのがとても良いです。
レスポンシブなのも良いですね。
公式サイトはこちら。
Lity - Lightweight, accessible and responsive lightbox
導入方法はとても簡単です。
まず、上記のサイトから Lity 一式をダウンロードします。
展開後の lity.min.css, lity.min.js を適当なところに配置して、使いたい HTML 内で以下のように指定します。
CSS 読み込み:
<link rel="stylesheet" href="lity.min.css">
jquery と Lity 読み込み:
<script src="jquery.js"></script> <script src="lity.min.js"></script>
あとは実際に使いたい部分で指定をするだけです。
公式サイトに例がありますが、こんな感じです。
<a href="https://farm9.staticflickr.com/8642/16455005578_0fdfc6c3da_b.jpg" data-lity>Image</a>
その他適当にサンプルを作ってみたので、興味のある方はどうぞ。
Lity のサンプル