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

複数のアプリをまとめて移動整理に最適!複数のアプリをまとめて移動できるiOS 11の新機能前のページ

画像の遅延読み込みを実装できる軽量のJavaScriptプラグイン「justlazy.js」次のページno-image

関連記事

  1. jQuery Floating Social Share
  2. jQuery Modal

    JavaScript

    シンプルでレスポンシブなモーダルボックス「jQuery Modal」

    jQuery Modalはシンプルでレスポンシブに対応したモーダルボッ…

  3. Ladda

    JavaScript

    ボタンとローディングアイコンが一緒になったUIを実装できるjQueryプラグイン「Ladda」

    Laddaはボタンとローディングアイコンが一緒になったUIを実装するこ…

  4. jQuery Elastic Grid
  5. no-image

    JavaScript

    ミニマルなイメージギャラリーを実装できる「Albery」

    Alberyはミニマルなイメージギャラリーを実装できるjQueryプラ…

  6. awNotices

    JavaScript

    スタート・ストップ機能がついたシンプルなjQueryニュースティッカー「awNotices」

    awNoticesはスタート・ストップ機能がついたシンプルに切り替わる…

最近の記事

  1. そそそ 明太クリームそうめん
  2. すしざんまい
  3. 蒼龍唐玉堂 特製牛バラ担々麺
  4. サーモンアボカドサラダラップとドリップ
  5. 猿田彦フレンチ

アーカイブ

PAGE TOP