CollagePlus

JavaScript

画像を綺麗に整列させるjQueryプラグイン「CollagePlus」

画像を綺麗に整列させる便利なjQueryプラグイン「CollagePlus」がよかったのでメモがてらご紹介します。イメージギャラリーとかに使ってみたいですね。実際のデモはレスポンシブにもなっていてブラウザ幅に合わせて可変していきます。オプションで自分の好きなエフェクトも選べるのもいいですね。

[ads_center]

使い方

CollagePlus

こんな感じで綺麗に整列させることができます。マウスオーバーするとキャプションも表示されます。

使い方もとてもシンプルですね。

// マークアップ
<div class="Collage">
    <img src="example1.jpg" />
    <img src="example2.jpg" />
    <img src="example3.jpg" />
</div>

// プラグインをセット
$('.Collage').collagePlus();

最初に表示される時のエフェクトは全部で6種類あります。エフェクトを指定する場合はtransitions.cssを読み込んでいる状態で、以下のように記述します。

$('.Collage').collagePlus(
    {
        'effect' : 'effect-1',
    }
);

他にもいくつかオプションが用意されているので詳しくは公式サイトで確認できます。グリッドスタイルでイメージギャラリーを実装したい時の選択肢の一つになりそうですね。

関連記事

  1. markerPen

    JavaScript

    Webページにマーカー機能を実装できるjQueryプラグイン「markerPen」

    markerPenはWebページにマーカーで描ける機能を実装することが…

  2. Animated menu concept

    JavaScript

    かっこいいアニメーション付きメニュー実装「Animated menu concept」

    Animated menu conceptはかっこいいアニメーション付…

  3. overhang.jp

    JavaScript

    シンプルでクールな通知バーを実装できるjQueryプラグイン「overhang.jp」

    overhang.jsは、通知バーを実装するためのjQueryプラグイ…

  4. jQuery_Overlay_Menu
  5. Radial Progress Bars

    JavaScript

    アニメーション付きのサークルプログレスバー「Radial Progress Bars」

    Radial Progress Barsは、アニメーション付きのサーク…

コメント

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

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

最近の記事

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

アーカイブ

PAGE TOP