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

    JavaScript

    画面上部に美しいプログレスバーを表示できる「topbar」

    topbarは、ページ読み込み時に画面上部に美しいプログレスバーを表示…

  2. multi.js

    JavaScript

    検索機能がついたセレクトボックスを実装できる「multi.js」

    multi.jsは検索機能がついた使いやすいユーザーフレンドリーなセレ…

  3. jQuery Countdown

    JavaScript

    手軽に使えるカウントダウンタイマーを実装できる「jQuery Countdown」

    jQuery Countdownは手軽に使えるカウントダウンタイマーを…

  4. Material Design Responsive Table
  5. Inspiration for Letter Effects

    JavaScript

    印象的なテキストエフェクトを実装する「Inspiration for Letter Effects」…

    anime.jsを活用した、印象的でとってもかっこいいテキストエフェク…

  6. Dependent / Cascading Select List with jQuery Select2

    JavaScript

    選択内容によりその下の内容も変化するセレクトボックス「Dependent / Cascading S…

    セレクトボックスを強力でカスタマイズ性が高く、そして充実させる人気のj…

コメント

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

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

最近の記事

  1. Anker PowerCore Lite 20000
  2. ネクスタイム
  3. フォールドオーバーポーチ
  4. 田沢湖
  5. ハクバ シリコンクロス

Instagram始めました

Facebookページ

アーカイブ

PAGE TOP