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. Kontext

    JavaScript

    iOSの画面切り替えのようなスライドができるJavaScript「Kontext」

    KontextというJavaScriptを使えばiOSの画面切り替えの…

  2. flatpickr

    JavaScript

    超軽量で使い方もカンタンな日付ピッカー「flatpickr」

    flatpickrはjQueryなどのライブラリに依存することなく動作…

  3. Slickhover.js

    JavaScript

    滑らかでスムーズなホバーエフェクトを実装できるjQueryプラグイン「Slickhover.js」

    とても軽量で使いやすいのがいいですね。ホバー時に滑らかでスムーズなエフ…

  4. circleChart

    JavaScript

    多彩なカスタマイズができる円形チャート「circleChart」

    circleChartは多彩なカスタマイズを実現した円形チャートを実装…

  5. miSlider

    JavaScript

    複数の画像を表示したりスライドしたりできるスライダー「miSlider」

    miSliderは複数の画像やスライドの表示を可能にするスライダーを実…

  6. justContext.js

    JavaScript

    シンプルなコンテキストメニューを実装できる「justContext.js」

    justContext.jsはjQueryなどを必要とせずに(ピュア …

コメント

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

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

最近の記事

  1. M360bt
  2. BQ-CASE/1
  3. GLOO BOX

アーカイブ

PAGE TOP