no-image

JavaScript

プレーンなJavaScriptによるレスポンシブなLightbox「jsOnlyLightbox」

jsOnlyLightboxは、jQueryなどを必要としないプレーンなJavaScriptによるレスポンシブなLightboxを実装することができます。圧縮版で3KBほどと軽量ながらも、カスタマイズ性にも優れています。

キャプション付けやグループにすることも可能

デモ

デモページにはいくつかのサンプルが設置されています。サムネイル画像をクリックすると、大きい画像が画面中央に表示される仕組みです。大きい画像とともに背景にはオーバーレイがかかり、画像に集中しやすくなります。

普通に画像が立ち上がるものから、画像が読み込まれるまでローディングアニメーションが表示されるもの、キャプション付きのもの、グループになっているものなど、いろいろなタイプのLightboxがあります。

data属性を利用してキャプションを付けたりグループとしてまとめたりといったことが可能です。

また、オプションもたくさん用意されています。主なオプションは、boxId、dimensions、captions、prevImg、nextImg、hideCloseBtn、closeOnClick、loadingAnimation、animElCount、preload、carousel、animation、nextOnClick、responsive、maxImgSize、keyControlなどがあります。そのほか、コールバック関数を設定することもできます。

レスポンシブなので、PCからスマホやタブレットまで幅広いデバイスで快適に閲覧できるのがうれしいですね。jQueryなども必要とせず、JavaScript単体で実装できる軽量性の高さも魅力的です。

jsOnlyLightbox

関連記事

  1. Frappe Charts

    JavaScript

    シンプルでモダンなSVGチャートを実装できる「Frappe Charts」

    Frappe Chartsは、シンプルでモダンなSVGチャート(グラフ…

  2. JavaScript

    レスポンシブ対応のカッコイイLightbox風jQueryプラグイン「Lightcase」

    Lightcaseはフレキシブルでレスポンシブに対応したLightbo…

  3. jquery-confirm

    JavaScript

    アラートやダイアログなどさまざまな機能を実装できる「jquery-confirm」

    jquery-confirmはアラートやconfirm、ダイアログなど…

  4. TypeIt

    JavaScript

    タイピングアニメーションを実装できる「TypeIt」

    TypeItはタイピングアニメーションを実装できるjQueryプラグイ…

  5. JavaScript

    テキストに滑らかに動くアニメーションをつけることができるjQueryプラグイン「animateTex…

    テキストに滑らかに動くかっこいいアニメーションをつけることができるjQ…

  6. jQuery Flat Shadow

    JavaScript

    フラットデザインに影をつけてくれるjQueryプラグイン「jQuery Flat Shadow」

    フラットデザインのUIに影(シャドウ)をつけてくれるjQueryプラグ…

最近の記事

  1. レトロスペクティブ V2.0
  2. YAECA ワイドテーパードデニム 10-13WW
  3. ADR-3ML39シリーズ
  4. キュレル モイスチャーバーム

アーカイブ

PAGE TOP