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',
    }
);

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

3M耳栓11003Mの耳栓「1100」を購入前のページ

超コンパクトなミドリのCLメジャー(1.5m・白)を購入次のページ

関連記事

  1. no-image
  2. jExcel

    JavaScript

    Excelと互換性のあるスプレッドシートを埋め込めるjQueryプラグイン「jExcel」

    jExcelは、ブラウザにExcelと互換性のあるスプレッドシートを埋…

  3. CurvedText

    JavaScript

    曲線上にテキストを配置できるjQueryプラグイン「CurvedText」

    CurvedTextというjQueryプラグインを使えば、任意の曲線上…

  4. Material Design Responsive Table
  5. no-image

    JavaScript

    シンプルでエレガントなモーダルボックスを実装できる「Fallr.js」

    Fallr.jsはシンプルでエレガントなモーダルボックスを実装できるj…

  6. simpleSlideShow

    JavaScript

    カスタマイズしやすいシンプル・軽量なスライドショー「simpleSlideShow」

    simpleSlideShowは、シンプルで軽量なスライドショーを実装…

コメント

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

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

最近の記事

  1. Anker PowerPort 5-in-1 37.5W Hub
  2. α7C + FE28-60mm F4-5.6
  3. Apple Watch Series 6
  4. iPad Air

アーカイブ

PAGE TOP