halkaBox.jsは、シンプルでベーシックなJavaScriptによるlightboxを実装することができます。軽量でカスタムオプションも用意されているほか、スワイプジェスチャーのサポートやキーボードでの操作にも対応します。
halkaBox.js
以下、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の具体的な使い方やダウンロードは、以下のページからどうぞ。
