JavaScript

画面内にバランスよく整列されたギャラリーを実装できるjQueryプラグイン「Balanced Gallery」

Balanced GalleryというjQueryプラグインを使えばブラウザの画面内にバランスよく綺麗に整列されたギャラリーを実装することができます。実際のデモではレスポンシブな作りになっており、ブラウザの横幅を可変することでそれに応じたレイアウトに調整されます。以下は使い方です。

[ads_center]

Balanced Galleryの使い方

Balanced Gallery

Balanced Gallery

このように、画面内に各画像が綺麗に収まっています。HorizontalとVerticalの2つのタイプがあり、オプションで好きな方を指定することができます。

jQueryとプラグインをhead内に読み込んだら。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.balanced-gallery.min.js"></script>

Balanced Galleryを呼び出します。

$(window).load(function() {
    $('#myGallery').BalancedGallery({ /* オプション */ });
});

オプション

オプションには以下のような項目があります。orientationでhorizontalかVerticalを設定できます。

var defaults = {
    autoResize: true,
    background: null,
    idealHeight: null,
    idealWidth: null,
    maintainOrder: true,
    orientation: 'horizontal',
    padding: 5,
    shuffleUnorderedPartitions: true,
    viewportHeight: null,
    viewportWidth: null
};

ブラウザは、Chrome、Safari、FireFox、IE 9+、Mobile Safari、Mobile Chromeでテスト済みだそうです。手軽にイメージギャラリーを実装したい時に役立ちそうですね。

関連記事

  1. jQuery Panelize Plugin
  2. jQuery Inline Footnotes

    JavaScript

    ホバーで脚注を表示できる「jQuery Inline Footnotes」

    jQuery Inline Footnotesはホバーすることで脚注の…

  3. jTableScroll

    JavaScript

    ヘッダーとフッターを固定したままスクロール可能なテーブル「jTableScroll」

    jTableScrollはヘッダーとフッターを固定したままスクロール…

  4. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのeachと$.eachの簡単な使い方のメモ

    jQueryのeachと$.eachの使い方のメモです。あんまり深い知…

  5. no-image

    JavaScript

    レスポンシブ対応でモバイルフレンドリーなjQueryデートピッカー・タイムピッカー「pickadat…

    pickadateはレスポンシブに対応したモバイルフレンドリーなデート…

  6. JavaScript

    ウェーブ(波形)を簡単に描いてくれるjQueryプラグイン「Wave」

    WaveというjQueryプラグインを使ってみました。これを使えばウェ…

コメント

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

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

最近の記事

  1. ベーコンエッグ&厚切りバタートースト
  2. 有栖川公園
  3. 広尾のスタバ
  4. マーガレットハウエルとミズノのコラボシューズ
  5. フレンチトーストや自家製ソーセージ

アーカイブ

PAGE TOP