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

    JavaScript

    ブラウザのタブにあるファビコンとタイトルをアニメーション化できる「mFancyTitle」

    mFancyTitleは、ブラウザのタブに表示されているファビコンとタ…

  2. Before and after slider
  3. TextFit

    JavaScript

    テキストをコンテナ幅にすばやくフィットさせる「TextFit」

    TextFitは、一行または複数行のテキストをコンテナ幅(オプションに…

  4. Kerning.js

    JavaScript

    文字間のカーニングや一部の色を変えたりできるjQueryプラグイン「Kerning.js」

    文字間のカーニングや一部の文字の色を変えたりできるjQueryプラグイ…

  5. Cloud 9 Carousel

    JavaScript

    サクサク動作する3Dカルーセルを実装できる「Cloud 9 Carousel」

    Cloud 9 Carouselはサクサク動作する3Dカルーセルを実装…

  6. KGallery

    JavaScript

    縦や横に配置されたサムネイルから画像を選択できるjQueryの画像ギャラリー「KGallery」

    縦や横に配置されたサムネイルから画像を選択することができるjQuery…

最近の記事

  1. ネクスタイム
  2. フォールドオーバーポーチ
  3. 田沢湖
  4. ハクバ シリコンクロス
  5. トライポッドスリーブ

Instagram始めました

Facebookページ

PAGE TOP