ITエンジニア/デザイナ向けにオープンソースを毎日紹介

写真は見せ方一つで大きくインパクトが変わります。単純に並べているだけではダメで、数多くのサービスが写真の見せ方に苦心しています。そんな中、一つのシンボルになっているのがTumblrではないでしょうか。

大きく一つの写真を見せるUIは写真を好む人たちに受け入れられ、今なお写真コンテンツが多く投稿されています。そんなTumblrでも使える写真グリッド表示ライブラリがjQuery Photoset Gridです。

jQuery Photoset Gridの使い方

こちらはデフォルトの表示。大きな写真と小さな写真がグリッドで並びます。ぴったり隙間ないのがいいですね。
こちらはデフォルトの表示。大きな写真と小さな写真がグリッドで並びます。ぴったり隙間ないのがいいですね。

こちらは隙間あり。しかし格好いい…
こちらは隙間あり。しかし格好いい…

コード。オプションで隙間の指定ができます。
コード。オプションで隙間の指定ができます。

レイアウトは3列にもできます。
レイアウトは3列にもできます。

さらにLightboxによるモーダル表示にも対応しています。
さらにLightboxによるモーダル表示にも対応しています。

小さい写真は正方形で表示されるようになっています。多くの写真をグリッドで表示するのに良さそうです。写真とは関係ないですが、背景色などの全体のバランスもいいです。

jQuery Photoset GridはjQuery製、MIT Licenseのオープンソース・ソフトウェアです。

jQuery Photoset Grid - Style Hatch

stylehatch/photoset-grid

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2