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. Images grid

    JavaScript

    画像のグリッドレイアウトを製作できるjQueryプラグイン「Images grid」

    Images gridは画像のグリッドレイアウトを製作するためのシンプ…

  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのif文を使ってタグやクラス名によって条件分岐するやり方

    jQueryで普通にif文を使った条件分岐のやり方です。指定したタグや…

  3. WebSnowjq.js

    JavaScript

    Webページに雪を降らせてくれるjQueryプラグイン「WebSnowjq.js」

    WebSnowjq.jsはWebページの中に雪を降らせることができるj…

  4. Dynamic Table

    JavaScript

    スプレッドシートのようなテーブルを実装できるjQueryプラグイン「Dynamic Table」

    Dynamic Tableはスプレッドシートのような高機能なテーブルを…

  5. Jquery Tab Plugin

    JavaScript

    シンプルで見やすいタブパネルを実装できる「Jquery Tab Plugin」

    Jquery Tab Pluginはシンプルで見やすく、そして操作しや…

  6. no-image

    JavaScript

    多彩なエフェクトを備えたjQueryスライダープラグイン「camera-slider」

    camera-sliderは多彩なエフェクトを備えた美しいスライドショ…

最近の記事

  1. Anker PowerCore Lite 20000
  2. ネクスタイム
  3. フォールドオーバーポーチ
  4. 田沢湖
  5. ハクバ シリコンクロス

Instagram始めました

Facebookページ

アーカイブ

PAGE TOP