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. Remodal

    JavaScript

    レスポンシブ対応のお洒落なモーダルウィンドウを実装できるjQueryプラグイン「Remodal」

    RemodalというjQueryプラグインを使えば、レスポンシブに対応…

  2. JavaScript

    カスタマイズも自由にできるjQuery「bxSlider」の使い方

    個人的にかなりよさげなjQueryスライダーを使ってみました。その名も…

  3. infiniteSlider2.js
  4. no-image

    JavaScript

    さまざまなSVGパターンによるCSSプログレスバー「Bars」

    Barsはさまざまな種類のSVGパターンによるCSSプログレスバーを実…

  5. no-image

    JavaScript

    1日のイベントスケジュールを作成できる「Jquery Layoutday plugin」

    Jquery Layoutday pluginは、1日のイベントスケジ…

最近の記事

  1. 田沢湖
  2. ハクバ シリコンクロス
  3. トライポッドスリーブ
  4. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ

Instagram始めました

Facebookページ

PAGE TOP