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

ptrLightモバイル用のリフレッシュインジケーターを実装できる「ptrLight」前のページ

HTML5のinput属性による検証ができるフォーム実装「Validatr」次のページValidatr

関連記事

  1. Lena.js

    JavaScript

    多彩な画像処理ができるJSライブラリ「Lena.js」

    Lena.jsは多彩な画像処理を行うことができるJSライブラリです。セ…

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

    JavaScript

    jQueryの超基本的なアニメーションを試してみる

    jQueryの基本的なアニメーションを試してみました。やっぱりアニメー…

  3. FakeLoader.js

    JavaScript

    フルスクリーンでカッコいいローディングアニメーション・FakeLoader.js

    FakeLoader.jsはフルスクリーンでカッコいいローディングアニ…

  4. Circliful

    JavaScript

    円グラフで統計情報を伝えたい時に役立つjQueryプラグイン「Circliful」

    CirclifulというjQueryプラグインを使えば、統計情報を伝え…

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

    JavaScript

    jQueryのマウス操作のイベントをまとめてみる

    マウス操作に関するイベントをまとめてみました。まとめたイベントはmou…

  6. vallenato.js

    JavaScript

    シンプルで実装も簡単なjQueryアコーディオン「vallenato.js」

    vallenato.jsは、シンプルで簡単に実装することができるjQu…

最近の記事

  1. NIVEA MEN CREME
  2. チャイラテ
  3. ベーコンエッグアボカドトーストとゆずジンジャーアップル
  4. COMOLI ナッピングウールショーツ
  5. 川上庵(麻布十番)牡蠣天せいろ
PAGE TOP