Flex-box Galleryは、ランダムサイズによる画像たちをかっこいいギャラリーにしてくれるjQueryプラグインです。使い方もこれ以上ないくらいシンプルなので、手軽にいい感じのギャラリーを実装することができます。
Flex-box Gallery
Flex-box Galleryの実際のデモは、以下のページから確認できます。
デモではサイズがバラバラの複数の画像がキレイに整列されています。各サムネイルの縦サイズが統一されているので、無駄なスペースも生まれずとてもキレイにまとまっていますね。
Googleの画像検索で出てくる一覧に近い感じです。
サムネイルをクリックすると、大きい画像を単体で見ることができます。背景にはオーバーレイがかかるので、じっくり画像に集中することが可能です。拡大された画像は、再度クリックすることで元のギャラリーの一覧に戻ります。
また、デモはレスポンシブにも対応しています。ブラウザ幅を縮小していくと、それに合わせて横に並ぶ画像の数も変化していきます。
さまざまなデバイスからでも最適なレイアウトになるように可変するので、とても便利ですね。
それから、デモページには実際のコードも記述されています。コードを見ると分かると思いますが、マークアップや使い方はとても簡単です。画像群は「container」というid名を付与したdivで括り、各imgタグをfigureタグで括ります。
あとはプラグインをセットするだけという手軽さです（jQueryやプラグインなどのファイルは読み込んでおく必要があります）。
サイズ違いの画像群を手軽にかっこいいギャラリーに仕上げてくれるので、これからギャラリーを設置したいと思っている人は、ぜひ候補の一つとして覚えておいてみてはいかがでしょうか。
