Lityは、超軽量でアクセシブル・レスポンシブなLightboxプラグインです。画像、iframe、インラインコンテンツなどをサポートしています。圧縮版で3KBほどとかなり軽量に仕上がっていますね。jQueryまたはZeptを必要とします。
画像や動画、インラインコンテンツやマップなどを表示可能
下記のページから、Lityの実際のデモ動作を確認できます。
Demosと書かれた場所には、いくつかのタイプのデモが用意されています。Image、Inline、Google Map、YouTube、Vimeo、URLがあり、各ボタンをクリックすると、そのタイプのコンテンツがLightboxで表示されます。
画像や動画、インラインコンテンツ、マップなど、さまざまなコンテンツを手軽に表示できるのがいいですね。使い方が簡単で、マークアップもシンプルに記述できます。
ちなみに、Lightboxを適用するaタグ内には「data-lity」という属性を追加してあげます。
また、LityにはさまざまなAPIやイベントも用意されています。APIには、Lity.close、Lity.element、Lity.opener、Lity.content、Lity.optionsが、イベントには、lity:open、lity:ready、lity:close、lity:remove、lity:resizeがあります。
APIやイベントを活用して、自サイトに合わせたカスタマイズができるところもうれしいですね。
レスポンシブ対応なので、PC以外にもスマホやタブレットからでも閲覧しやすいLightboxを実装したい人にはピッタリです。さらにファイル容量も超軽量なので、よりモバイルには最適ですね。
というわけで、アクセシブルでレスポンシブなLightboxを実装できる「Lity」のご紹介でした。ライセンスはMITとのこと。Lityの詳しい使い方やダウンロードは、下記のページからどうぞ。
