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でテスト済みだそうです。手軽にイメージギャラリーを実装したい時に役立ちそうですね。

Scrolltabスクロール移動させるタブを追加できるjQueryプラグイン「Scrolltab」前のページ

シンプル・軽量・簡単なLightBox系モーダルウィンドウのjQueryプラグイン「portBox」次のページ

関連記事

  1. Diagonal Slider

    JavaScript

    斜めにデザインされたスタイリッシュなjQueryイメージスライダー「Diagonal Slider」…

    Diagonal Sliderは斜めにデザインされたクールでスタイリッ…

  2. Sticky Slider Navigation(Responsive)
  3. Art Text Light jQuery plugin

    JavaScript

    テキストに光が移動するエフェクトを与えることができる「Art Text Light jQuery p…

    指定したテキストに光が移動するエフェクトを与えることができるjQuer…

  4. Remodal

    JavaScript

    レスポンシブ対応のお洒落なモーダルウィンドウを実装できるjQueryプラグイン「Remodal」

    RemodalというjQueryプラグインを使えば、レスポンシブに対応…

  5. Cloud 9 Carousel

    JavaScript

    サクサク動作する3Dカルーセルを実装できる「Cloud 9 Carousel」

    Cloud 9 Carouselはサクサク動作する3Dカルーセルを実装…

  6. anchor.js

    JavaScript

    ページ内リンクをスムーズにスクロール移動できるjQueryプラグイン「anchor.js」

    anchor.jsはページ内リンクをスムーズなスクロールで移動すること…

コメント

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

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

最近の記事

  1. 甘柿
  2. 冬用のふとん
  3. 田沢湖
PAGE TOP