JavaScript

サムネイルをクリックして拡大画像が見れるレスポンシブ対応のjQuery画像ギャラリー「Superbox」

綺麗に並んだサムネイル画像をクリックして拡大画像を見ることができるjQuery画像ギャラリー「Superbox」をご紹介します。レスポンシブにも対応しているのでスマホやタブレットでも閲覧しやすいです。マークアップなどもシンプルなので使いやすいかと思います。

[ads_center]

使い方

レスポンシブなのでブラウザの幅を拡大縮小してもそれに応じて最適化してくれます。

Superbox

ブラウザ幅を縮小すると以下のようにレイアウトを調整してくれます。

レスポンシブに対応

画像のマークアップはsrc属性にサムネイル画像のパス、data-img属性にオリジナル画像のパスを記述する必要があります。

<div class="superbox-list">
    <img src="サムネイル画像のパス" data-img="オリジナル画像のパス" alt="" class="superbox-img">
</div>

CSSに以下を追加。

.superbox-list {
    display:inline-block;
    *display:inline;
    zoom:1;
    width:12.5%;
}

SuperBoxを呼び出します。

$(function() {
    $('.superbox').SuperBox();
});

ブラウザサポートは、最新のモダンブラウザはもちろん、IE7〜10でも動作が確認されているみたいですね。これらのブラウザ種類の対応やレスポンシブでスマホやタブレットにも最適化されることから、とても安心して使えそうな画像ギャラリーかと思います。

ダウンロードや詳しい詳細に関しては以下からどうぞ。

関連記事

  1. JavaScript

    値を指定することで好きなカラースウォッチを表示できるjQueryプラグイン「Color Swatch…

    これはどこかで使いたくなるjQueryプラグインですね。カラー値を指定…

  2. Scroll Indicator

    JavaScript

    シンプルなスクロールインジケーターを実装できる「Scroll Indicator」

    Scroll Indicatorは、スクロールによるアニメーションでコ…

  3. JavaScript

    マウスオーバーなどで画像を拡大してくれるシンプルなjQueryプラグイン「jQuery Zoom」

    マウスオーバーなどで画像を拡大してくれるシンプルなjQueryプラグイ…

  4. EndlessRiver

    JavaScript

    エンドレスに流れていくコンテンツスライダー「EndlessRiver」

    EndlessRiverはエンドレスに流れていくコンテンツスライダーを…

  5. PrognRoll

    JavaScript

    スクロールによるプログレスバーを表示できるjQueryプラグイン「PrognRoll」

    PrognRollはスクロールによるプログレスバーを表示することができ…

  6. notie.js

    JavaScript

    クリーンでシンプルな通知を表示できる「notie.js」

    notie.jsはクリーンでシンプルな通知を表示できるJSプラグインで…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP