jQuery CollagePlusはjQuery/JavaScript製、MIT License/GPL v2のオープンソース・ソフトウェアです。

写真は見せ方一つで印象が大きく変わります。Webサービスごとに色々な見せ方がありますが、今回はGoogle+やFlickrに似た見せ方を実現するjQuery CollagePlusを紹介します。

[](http://images.moongift.jp/2013/07/Screenshot 2013-07-03 14.15.20.1372834069.png)
こちらが一覧。隙間なくいい感じに並んでいます。

[](http://images.moongift.jp/2013/07/Screenshot 2013-07-03 14.15.33.1372834076.png)
マウスオーバーで説明文が出ます。説明文はHTMLによる装飾がサポートされています。

[](http://images.moongift.jp/2013/07/Screenshot 2013-07-03 15.39.52.1372834083.png)
しかもレスポンシブです。幅を縮めると写真の並びが変わりつつ、隙間なく並んでいきます。

[](http://images.moongift.jp/2013/07/Screenshot 2013-07-03 15.39.57.1372834089.png)
さらに変更した場合。これでもいい感じ。

[](http://images.moongift.jp/2013/07/Screenshot 2013-07-03 15.40.03.1372834094.png)
スマホサイズもばっちり。

jQuery CollagePlusでは縦の高さを一定に保ち、幅をそれに合わせることで写真を隙間なく並べていきます。使い方は簡単で、指定するDOMの中にimgタグを並べていくだけです。後は$('.Collage').collagePlus();ように実行すれば写真の配置含めていい感じに整形してくれます。

MOONGIFTはこう見る

左右の並びが画一的でないのが個々の写真の印象を変化させつつ、縦の高さが同一なのでスクロールしながらスムーズに見られるインタフェースになっています。Pinterestでは幅は同じで高さを変えることでこれまでと違った印象を与えましたが、Flickrでは逆に左右を変化させて印象を変えています。

スマートフォンの時代になって写真コンテンツは膨大に増えました。写真共有サイトならずともその見せ方にはこだわりが必要になっています。ブログ向け、Eコマース向けの見せ方などを研究し、それを実装してみるのは面白いかも知れません。

jQuery CollagePlus - an image gallery plugin by Ed Lea

jQuery CollagePlus Example - an image gallery plugin by Ed Lea

ed-lea/jquery-collagePlus