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. no-image

    JavaScript

    豊富なオプションでカスタマイズ性も高いjQueryスライダー「startVal」

    startValは豊富なオプションやAPIを有したカスタマイズ性の高い…

  2. JavaScript

    アイコンをクリックすると周りにメニューが表示されるjQueryプラグイン「FerroMenu」

    FerroMenuというjQueryプラグインを使えばアイコンをクリッ…

  3. no-image

    JavaScript

    画像の遅延読み込みを実装できる軽量ライブラリ「Lazyestload.js」

    Lazyestload.jsは画像の遅延読み込み機能を実装できる軽量の…

  4. Magnific Popup

    JavaScript

    レスポンシブに対応したLightbox風のjQueryプラグイン「Magnific Popup」

    レスポンシブに対応したLightbox風のjQueryプラグイン「Ma…

  5. Custom jQuery Lightbox

    JavaScript

    デザインや使い方がシンプルな「Custom jQuery Lightbox」

    Custom jQuery Lightboxはデザインや使い方がシンプ…

コメント

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

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

最近の記事

  1. Soundcore Ace A1
  2. cheero USB-C PD Charger 60W
  3. DY-S01
  4. OWL-QI10W04

アーカイブ

PAGE TOP