Lity

JavaScript

超軽量でアクセシブル・レスポンシブなLightboxを実装できる「Lity」

Lityは、超軽量でアクセシブル・レスポンシブなLightboxプラグインです。画像、iframe、インラインコンテンツなどをサポートしています。圧縮版で3KBほどとかなり軽量に仕上がっていますね。jQueryまたはZeptを必要とします。

画像や動画、インラインコンテンツやマップなどを表示可能

デモ

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を実装したい人にはピッタリです。さらにファイル容量も超軽量なので、よりモバイルには最適ですね。

Lity

関連記事

  1. no-image

    JavaScript

    ミニマルなイメージギャラリーを実装できる「Albery」

    Alberyはミニマルなイメージギャラリーを実装できるjQueryプラ…

  2. Luminous

    JavaScript

    軽くてシンプルなLightboxを実装できるスクリプト「Luminous」

    Luminousを使えば軽くてシンプルなLightboxを実装すること…

  3. JavaScript

    レスポンシブなLightbox風のギャラリーを実装できるjQueryプラグイン「anoFlow」

    anoFlowというjQueryプラグインを使えば、レスポンシブなLi…

  4. ZooMove

    JavaScript

    マウスオーバーで画像を拡大ズーム・移動もできるjQueryプラグイン「ZooMove」

    ZooMoveは、マウスオーバーで指定された画像やエリアをズームするこ…

  5. no-image

    JavaScript

    テキストリンクをタイピングアニメーションで表示するjQueryプラグイン「jTyper」

    jTyperはテキストリンクをタイピングアニメーションで表示できるjQ…

  6. jQuery Tooltip Basic

    JavaScript

    カスタマイズしやすいツールチップ実装「jQuery Tooltip Basic」

    jQuery Tooltip Basicは、カスタマイズしやすいツール…

最近の記事

  1. TAP-F27-2KP
  2. M32ミニ
  3. CITTA TT5.0
  4. Kindle Oasis

アーカイブ

PAGE TOP