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

coolHueクールなグラデーションがたくさん用意されたWebサイト「coolHue」前のページ

レスポンシブなマルチレベルのナビゲーションを実装できる「Ace Responsive Menu」次のページAce Responsive Menu

関連記事

  1. quick-select

    JavaScript

    素早く簡単に選択できるセレクトボックス「quick-select」

    quick-selectは素早く簡単に選択可能なセレクトボックスを実装…

  2. JavaScript

    レスポンシブに対応している軽量のjQueryスライダー「Unslider」

    とても軽量でレスポンシブにも対応しているjQueryスライダー「Uns…

  3. JavaScript

    ボタンやアイコンに素敵なクリックエフェクトを実装できる「Waves」

    ボタンやアイコンに素敵なクリックエフェクトを実装することができる「Wa…

  4. SweetAlert2

    JavaScript

    カスタマイズ性が高くアクセシビリティ(WAI ARIA)に優れたアラート実装「SweetAlert2…

    SweetAlert2は、レスポンシブ対応でカスタマイズ性が高くアクセ…

  5. stickyTableColumns

    JavaScript

    水平(左右)にスライドできるテーブル実装「stickyTableColumns」

    stickyTableColumnsは、データ量の多い表をページで表現…

  6. Tipr

    JavaScript

    軽量、フラット、シンプルなツールチップを実装できるjQueryプラグイン「Tipr」

    Tiprはフラットでシンプルなツールチップを実装することができるjQu…

最近の記事

  1. 芳醇な香りのラムレーズンサンド
  2. Aモーニングセット
  3. 白トリュフの塩パンやメロンパンなど
  4. 東京都現代美術館
  5. スーリア バターチキン

アーカイブ

PAGE TOP