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 cForm

    JavaScript

    フォームのスタイルをカスタマイズできる「jQuery cForm」

    jQuery cFormはフォームのスタイルを簡単にカスタマイズするこ…

  2. hummingbird-popover

    JavaScript

    高速・軽量なコンテキストメニュー実装「hummingbird-popover」

    hummingbird-popoverは高速・軽量なコンテキストメニュ…

  3. jsPanel

    JavaScript

    高度なセッティングができるフローティングパネルやモーダルウィンドウ実装「jsPanel」

    jsPanelは高度なセッティングができるフローティングパネル、モーダ…

  4. Inspiration for Grid Loading Animations
  5. Granim.js

    JavaScript

    流れるように変化するグラデーションのアニメーションを実装できる「Granim.js」

    Granim.jsは美しく変化するグラデーションのアニメーションを実装…

  6. Lena.js

    JavaScript

    多彩な画像処理ができるJSライブラリ「Lena.js」

    Lena.jsは多彩な画像処理を行うことができるJSライブラリです。セ…

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP