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. jQuery Flip-Quote
  2. Navi.js

    JavaScript

    ナビゲーションとコンテンツが連動して切り替わるjQueryプラグイン「Navi.js」

    ナビゲーションとコンテンツが連動して切り替わる便利なjQueryプラグ…

  3. Flex-box Gallery

    JavaScript

    ランダムサイズの画像をかっこいいギャラリーにしてくれる「Flex-box Gallery」

    Flex-box Galleryは、ランダムサイズによる画像たちをかっ…

  4. kissui.scrollanim

    JavaScript

    スクロールによる多彩なアニメーションを実装できる「kissui.scrollanim」

    kissui.scrollanimは、CSS3を活用したスクロールによ…

  5. iconate.js

    JavaScript

    アイコンをオシャレにアニメーションしながらtransformさせる「iconate.js」

    iconate.jsはアイコンをアニメーションさせながら別のアイコンへ…

  6. raccordion

    JavaScript

    レスポンシブにも対応!アコーディオンのイメージスライダーを実装できるjQueryプラグイン「racc…

    レスポンシブにも対応しているjQueryプラグインのアコーディオンのイ…

最近の記事

  1. エチオピア
  2. 紗々 飴色和栗
  3. DCG-CA21
  4. Apple WatchでのMacロック解除を無効
  5. オータムスイートポテトフラペチーノ

アーカイブ

PAGE TOP