Lity

最終更新日時:2017-02-13 18:14:42
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 のサンプル

お問い合わせは 掲示板 にて。