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プラグイン「lake.js」

    面白そうなプラグインだったので使ってみました。画像を指定するとその画像…

  2. no-image

    JavaScript

    HTML要素を回転させれる「jquery-ui-rotatable」

    jquery-ui-rotatableはHTML要素を回転させれるjQ…

  3. JavaScript

    JavaScriptで連想配列(ハッシュ)から1つずつ値を取り出して配列に入れてランダムで取得する

    タイトルが分かりづらくてあれなんですが、JavaScriptの連想配列…

  4. CollagePlus

    JavaScript

    画像を綺麗に整列させるjQueryプラグイン「CollagePlus」

    画像を綺麗に整列させる便利なjQueryプラグイン「CollagePl…

  5. WD_ImageStax

    JavaScript

    山積みされた写真をシャッフルさせるフォトギャラリー「WD_ImageStax」

    WD_ImageStaxは無造作に山積みされた写真をシャッフルさせるフ…

  6. EndlessRiver

    JavaScript

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

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

コメント

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

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

最近の記事

  1. スタバ ドリップコーヒー
  2. エチオピア
  3. 紗々 飴色和栗
  4. DCG-CA21
  5. Apple WatchでのMacロック解除を無効

アーカイブ

PAGE TOP