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 Bar Rating

    JavaScript

    選択範囲を評価ウィジェットに変換できる「jQuery Bar Rating」

    jQuery Bar Ratingは、ユーザーが選択する範囲を評価ウィ…

  2. ToProgress

    JavaScript

    画面上部に軽量なプログレスバーを実装できる「ToProgress」

    ToProgressは画面上部にシンプルで軽量なプログレスバーを実装で…

  3. Text Effects

    JavaScript

    テキストがカシャカシャ切り替わって表示するjQueryプラグイン「Text Effects」

    Text EffectsというjQueryプラグインを使えば、テキスト…

  4. Create a month picker jQuery plugin
  5. bringins

    JavaScript

    コンテンツをかっこいいアニメーションページで魅せるjQueryプラグイン「bringins」

    bringinsはWebページ上のコンテンツを、アニメーションページと…

  6. Animate Transition

コメント

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

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

最近の記事

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

アーカイブ

PAGE TOP