no-image

JavaScript

シンプルでベーシックなJavaScriptによるlightbox実装「halkaBox.js」

halkaBox.jsは、シンプルでベーシックなJavaScriptによるlightboxを実装することができます。軽量でカスタムオプションも用意されているほか、スワイプジェスチャーのサポートやキーボードでの操作にも対応します。

halkaBox.js

デモ

サムネイル画像をクリックすると、拡大された画像がフェードインとともに表示されます。「Gallery with default options」と「Another Gallery with custom options」では、拡大時に右上に前後の画像に切り替える矢印やクローズボタンが設置されています。

左上の数字からは、現在の位置を示す画像ナンバーが表示されています。複数の画像をギャラリーとして見せたい場合には最適ですね。

一方、「Single Images with default and custom options」は単体画像での表示になるので、画像を切り替える矢印などは表示されません(クローズボタンは表示されます)。

halkaBox.jsにはカスマムするためのオプションがいくつか用意されています。主なオプションは、hideButtons、animation、theme、preloadです。デフォルト値は、hideButtonsがtrue、animationが”slide”、themeが”light”、preloadが2です。ちなみに、themeはlightとdarkから選ぶことができます。

互換性のあるブラウザ(最新バージョンの)は、Chrome、Firefox、Edge、IE、Opera、Safari。ライセンスはMITとのこと。

というわけで、シンプル・ベーシックでjQueryなどの依存性もないJavaScript lightboxを実装できる「halkaBox.js」の紹介でした。

halkaBox.js

関連記事

  1. uploadHBR

    JavaScript

    複数の画像選択に対応したjQueryファイルアップローダー「uploadHBR」

    uploadHBRは複数の画像選択に対応したファイルアップローダーを実…

  2. Starfield

    JavaScript

    宇宙空間を移動するような背景アニメーションを実装できる「Starfield」

    Starfieldは宇宙空間を移動するような背景アニメーションを実装す…

  3. zingtouch

    JavaScript

    タッチジェスチャーをカスタマイズできるJSライブラリ「zingtouch」

    Zingtouchは、タッチ対応のデバイスにおける基本的なジェスチャー…

  4. no-image

    JavaScript

    スワイプでのスライドもできるシンプルなスライダー「jquery-slide」

    jquery-slideはスワイプでのスライドにも対応したシンプルなス…

  5. Menu Droplet Animation
  6. S-Pagination

    JavaScript

    スライダー付きのページネーションを実装できる「S-Pagination」

    S-Paginationはスライダー付きのページネーションを実装できる…

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP