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を使いたい人にはピッタリです。

Vide背景にvideoを表示できるjQueryプラグイン「Vide」前のページ

シンプルでレスポンシブ対応のアコーディオンを実装できるjQueryプラグイン「jQuery Accordion」次のページjQuery Accordion

関連記事

  1. Material ScrollTop Button
  2. Dependent Dropdown

    JavaScript

    ネストされたセレクトボックスを実装できる「Dependent Dropdown」

    Dependent Dropdownはネストされたセレクトボックスを実…

  3. no-image

    JavaScript

    シンプルなバナースライドショーを実装できる「jsslider」

    jssliderはシンプルなバナースライドショーを実装できるjQuer…

  4. jQuery Brazzers Carousel Plugin
  5. Wallpaper

    JavaScript

    背景画像のレイアウトをブラウザ幅に合わせてくれるjQueryプラグイン「Wallpaper」

    WallpaperというjQueryプラグインを使えば背景画像のレイア…

  6. stickyTableColumns

    JavaScript

    水平(左右)にスライドできるテーブル実装「stickyTableColumns」

    stickyTableColumnsは、データ量の多い表をページで表現…

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP