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. ZooMove

    JavaScript

    マウスオーバーで画像を拡大ズーム・移動もできるjQueryプラグイン「ZooMove」

    ZooMoveは、マウスオーバーで指定された画像やエリアをズームするこ…

  2. no-image

    JavaScript

    jQueryの代わりに使用できるマイクロJavaScriptライブラリ「Selector」

    Selectorは、jQueryの代わりに使用することができるマイクロ…

  3. JavaScript

    フォーム内にあるplaceholderの利便性を高めてくれるjQueryプラグイン「FlowupLa…

    フォームを入力する際にあると便利なのがplaceholderです。しか…

  4. no-image

    JavaScript

    レスポンシブでマルチレベルに対応したナビゲーション「K-Responsive-Menu」

    K-Responsive-Menuは、レスポンシブでマルチレベルに対応…

  5. FractionSlider

    JavaScript

    各要素ごとにスライドアニメーションを設定できるjQueryプラグイン「FractionSlider」…

    複数の各要素ごとにスライドアニメーションを設定できるjQueryプラグ…

  6. JavaScript

    多層に重なり合う美しいグラデーションの背景を実装できるjQueryプラグイン「SHARDS」

    多層に重なり合う美しいグラデーションの背景を実装できるjQueryプラ…

最近の記事

  1. リンツ リンドール
  2. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  3. ブラジルイパネマ

アーカイブ

PAGE TOP