ViewBox

JavaScript

レスポンシブに対応したLightbox風のイメージギャラリー「ViewBox」

ViewBoxはレスポンシブに対応したLightbox風のイメージギャラリーを実装することができるjQueryプラグインです。サムネイルをクリックして拡大画像を見ることができるほか、拡大画像を表示させた状態での前後スライド移動も可能です。

ViewBox

デモ

デモでは上にある4つのサムネイル画像が一つのグループになっています。その下にある横長の画像は単体のギャラリーとして表示されます。

上の4つのいずれかのサムネイル画像をクリックすると、アニメーション付きで拡大画像が表示されます。画面両端には前後移動できる矢印が表示されているほか、画面右上にはクローズボタンが設置されています。

前後移動の矢印をクリックすると、スライドアニメーションで前後の画像に切り替わります。拡大された状態で次々と画像をチェックできるので、とても便利ですね。背景には薄い黒のオーバーレイがかかるので、画像にも集中しやすくなっています。

また、ViewBoxはレスポンシブにも対応しており、ブラウザ幅を縮小した状態でサムネイル画像をクリックすると、その幅に合わせた拡大画像が表示されます。モバイルでもしっかり表示できるイメージギャラリーを求めている人にはピッタリですね。

マークアップもわかりやすくシンプルに記述できます。

オプションもいくつか用意されており、主なオプション項目は、setTitle、margin、resizeDuration、openDuration、closeDuration、closeButton、navButtons、closeOnSideClick、nextOnContentClick、useGesturesです。

オプションから手軽に細かい挙動などをカスタマイズできます。

ViewBox

関連記事

  1. Alton

    JavaScript

    コンテンツごとに縦スクロールでナビゲートできるjQueryプラグイン「Alton」

    Altonはコンテンツごとに縦スクロールすることによりWebページをナ…

  2. jQuery Equal Height

    JavaScript

    異なる要素の高さを揃えてくれる「jQuery Equal Height」

    jQuery Equal Heightは、異なる要素の高さをキレイに揃…

  3. JavaScript

    複数カラムをレスポンシブに対応させるjQueryプラグイン「jquery.columns」

    複数あるカラムをレスポンシブに対応させるためのjQueryプラグイン「…

  4. PhotoJShop

    JavaScript

    写真にエフェクトやフィルタをかけることができるjQueryプラグイン「PhotoJShop」

    PhotoJShopというjQueryプラグインを使えば、写真にエフェ…

  5. no-image

    JavaScript

    スライダータイプの質問フォーム実装「jquery.formslider」

    jquery.formsliderはスライダータイプによる質問フォーム…

  6. Scrollgress

    JavaScript

    スクロールに連動するプログレスバーを実装できる「Scrollgress」

    Scrollgressはスクロールに連動するシンプルで軽量なプログレス…

最近の記事

  1. Olli
  2. 単語帳メーカー(Flashcard Maker App)
  3. 1Password 7
  4. 風に揺れる草

Facebookページ

PAGE TOP