ViewBox

JavaScript

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

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

ViewBox

デモ

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

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

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

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

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

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

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

ViewBox

MoveTo軽量なスムーススクロールを実装できるJSライブラリ「MoveTo」前のページ

スタイリッシュなタブコンテンツを実装できる「jQuery Tabs with Content Overlays」次のページjQuery Tabs with Content Overlays

関連記事

  1. FlipClock.js

    JavaScript

    時計・タイマー・カウントダウンを実装できるjQueryプラグイン「FlipClock.js」

    FlipClock.jsというjQueryプラグインを使えば、時計・タ…

  2. no-image

    JavaScript

    シンプルでパワフルなセレクトボックスを実装できる「SelectPage」

    SelectPageはシンプルながらも高いカスタマイズ性を備えたパワフ…

  3. Freewall

    JavaScript

    レスポンシブ対応のグリッドレイアウトを実装できるjQueryプラグイン「Freewall」

    FreewallというjQueryプラグインを使えばレスポンシブに対応…

  4. PleaseWait

    JavaScript

    ローディングアイコンをオシャレに実装することができる「PleaseWait」

    PleaseWaitはローディングアイコンをオシャレに見せることができ…

  5. jQueryプラグインのスライダー集

    JavaScript

    【jQueryプラグイン】素晴らしい機能が満載のスライダー集

    jQueryプラグインには様々な役立つ機能がありますが、中でも人気が高…

  6. FSVS(Full Screen Vertical Scroller)

最近の記事

  1. 椿屋特製アイス珈琲
  2. 有栖川公園
  3. グーディオ オーガニックチョコレート(ミント)
  4. チキンバターマサラとシュリンプバターマサラ
  5. 恵比寿のダ・ミケーレのピザ

アーカイブ

PAGE TOP