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. Flex-Slider-jQuery

    JavaScript

    シングルでもマルチでもOKなフレキシブルなスライダー「Flex-Slider-jQuery」

    Flex-Slider-jQueryは、フレキシブルなスライダーを実装…

  2. funnyText.js
  3. JavaScript

    レスポンシブ対応で優雅なエフェクトが印象的なjQueryスライダー「Juicy Slider」

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

  4. Slideout.js

    JavaScript

    軽量でタッチスライド対応のサイドメニュー・Slideout.js

    Slideout.jsは軽量でスマフォでのタッチスライドに対応したサイ…

  5. Radial Progress Bars

    JavaScript

    アニメーション付きのサークルプログレスバー「Radial Progress Bars」

    Radial Progress Barsは、アニメーション付きのサーク…

  6. percircle

    JavaScript

    カスタマイズもできるパーセンテージのサークル実装「percircle」

    percircleはCSSによるパーセンテージのサークルを実装できるj…

最近の記事

  1. s9+
  2. SRS-LSR200
  3. QC30
  4. リンツ リンドール

アーカイブ

PAGE TOP