Rebox

JavaScript

レスポンシブ対応の軽量なLightbox風jQueryプラグイン「Rebox」

ReboxというjQueryプラグインを使えば、レスポンシブに対応した軽量のLightbox風の機能を実装することができます。jQueryの他にZeptoにも対応しているとのこと。実際のデモはとてもシンプルなデザインで、モバイルフレンドリーになっているところがいいですね。

[ads_center]

Reboxの使い方

Rebox

Rebox

使い方もすごくシンプルですね。以下は画像単体での場合です。画像を閉じる場合は画面右上にあるバツ印でクローズできます。

$('#sample a').rebox();

複数の画像をギャラリーとしてグループ化させたい場合には、オプションのselectorを設定する必要があります。

$('#sample').rebox({ selector: 'a' });

オプションは他にも、prev・nextの設定、 loading、speedなど色々と用意されています。

レスポンシブでPC以外にスマホやタブレットにも対応させたい場合に活用してみたいですね。どこか落ち着いた雰囲気やゆったりとした印象を受ける素敵なプラグインだと思います。

全体的に大人っぽい感じのデザインなので、そのようなLightboxを使いたい人にはピッタリです。

関連記事

  1. jQuery Panorama Viewer

    JavaScript

    パノラマビューを実装できるjQueryプラグイン「jQuery Panorama Viewer」

    jQuery Panorama Viewerはパノラマビューを実装する…

  2. Mini Previews

    JavaScript

    リンクにホバーするとプレビューが見れるjQueryプラグイン「Mini Previews」

    Mini Previewsは指定したリンクにホバーするとリンク先のプレ…

  3. qpScroll
  4. JavaScript

    シンプル・軽量・簡単なLightBox系モーダルウィンドウのjQueryプラグイン「portBox」…

    portBoxというjQueryプラグインを使えばシンプルで軽量なLi…

  5. Responsive Parallax Drag-slider With Transparent Letters
  6. Animated Image Pieces

    JavaScript

    画像が細かいピースになるアニメーション実装「Animated Image Pieces」

    Animated Image Piecesは、画像が細かいピースに分解…

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP