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. NO IMAGE

    JavaScript

    テキストコンテンツをページ分割(ページネーション)できる「jPaginate」

    jPaginateはWebページ内のテキストコンテンツをページ分割(ペ…

  2. TabbedContent
  3. jQuery Star Flashing Effect
  4. JavaScript

    多層に重なり合う美しいグラデーションの背景を実装できるjQueryプラグイン「SHARDS」

    多層に重なり合う美しいグラデーションの背景を実装できるjQueryプラ…

  5. no-image

    JavaScript

    プレーンなJavaScriptによるレスポンシブなLightbox「jsOnlyLightbox」

    jsOnlyLightboxは、jQueryなどを必要としないプレーン…

  6. no-image

    JavaScript

    アクセシブルなビフォーアフター画像を実装できる「BeerSlider」

    BeerSliderはVanilla JSによるアクセシブルなビフォー…

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP