no-image

JavaScript

ミニマルでダイナミックなLightboxプラグイン「darkbox.js」

darkbox.jsはミニマルながらもダイナミックなLightbox風のイメージギャラリーを実装することができるjQueryプラグインです。レスポンシブ対応で矢印キーでの操作にも対応しています。ファイル容量も軽量なので、サクサク動作するのがいいですね。

darkbox.js

darkbox.js

デモでは画面中央に画像が表示されていて、これをクリックするとフルスクリーンによるギャラリーが起動します。画面いっぱいに広がったダイナミックな画像は、とても見応えがあります。

また、画面両端にはコンテンツを移動できる矢印アイコンが設置されているので、ここから画像を切り替えて見ていくことが可能です。ちなみに、キーボードの矢印キーでの操作にも対応しています。画面の上部にプログレスバーが表示されるのも便利ですね。

元に戻す場合は、画面の右上に表示されているバツ印をクリックすればOKです。

使い方もかなりシンプルなので、手軽に実装できます。オプションには、startWithCurrent、wrapAround、showProgressBar、showTitle、disablePageScrolling、endCallbackという項目が用意されています。

また、ライセンスはMITとのこと。ミニマルながらもダイナミックなLightboxプラグインを探している人は、ぜひ「darkbox.js」をチェックしてみてください。

no-image手軽にパララックス効果を実装できるシンプル・軽量な「simpleParallax」前のページ

ローディングアニメーションを手軽に実装できる「EasyLoading」次のページEasyLoading

関連記事

  1. Shave

    JavaScript

    設定した高さに基づいて複数行のテキストを切り取る「Shave」

    Shaveは設定した最大の高さに基づいてHTML要素内に収まるように複…

  2. Babylon Grid
  3. ScrollBooster

    JavaScript

    ドラッグしながらスクロールするライブラリ「ScrollBooster」

    ScrollBoosterはドラッグしながらスクロールする機能を実装で…

  4. Background Blur

    JavaScript

    画像をボカしてくれるクロスブラウザ対応の「Background Blur」

    Background Blurは画像をカッコよくボカしてくれるクロスブ…

  5. Slinky.js

    JavaScript

    上下にスクロールでコンテンツが開閉するjQueryプラグイン「Slinky.js」

    なかなか面白かったのでご紹介します。上下にスクロールするとコンテンツが…

  6. Linear Slider

    JavaScript

    シンプルな機能で使いやすいjQueryによる水平スライダー「Linear Slider」

    Linear Sliderはシンプルな機能性による水平スライダーを実装…

最近の記事

  1. Anker PowerExpand 8-in-1 USB-C PD 10Gbps データ ハブ
  2. SAP-001
  3. OWL-QI10W2Q18W
  4. アースクーラー3WAY

アーカイブ

PAGE TOP