Google画像検索風に写真を表示「photoWall.js」
photoWall.jsはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。
多数のWebサービスが写真を並べて表示しています。そこからエッセンスを取り出して自分たちのサービスに活用するのはいい方法です。今回はGoogle画像検索ライクな画像表示を行えるphotoWall.jsを紹介します。
[](http://images.moongift.jp/2013/06/Screenshot 2013-06-10 9.16.45.1370871741.png)
一覧で並んでいます。幅は異なりますが、縦は共通した高さになっているのが特徴です。
[](http://images.moongift.jp/2013/06/Screenshot 2013-06-10 9.16.49.1370871749.png)
写真を選ぶと1枚だけ拡大表示されます。画面中央に配置されるようになっているのがGoogle画像検索にそっくりです。
[](http://images.moongift.jp/2013/06/Screenshot 2013-06-10 9.16.53.1370871756.png)
別な写真を選択すると前の写真の枠が閉じて、改めて選択した写真が開く仕組みです。
[](http://images.moongift.jp/2013/06/Screenshot 2013-06-10 9.16.58.1370871762.png)
縦横どちらが大きい写真も見やすいですね。
使い方はシンプルで、$(".photowall").photoWall()を実行するだけです。画像のタグのclass、説明として表示する部分などは決まっているので注意して下さい。イベントも実装されていますのでカスタマイズも色々できそうです。
MOONGIFTはこう見る
モーダルでの表示もそうですが、アニメーションをつけるかどうかは閲覧者の目を引くかどうかに大きく関わっていると言えそうです。ムダなアニメーションはダメですが、クリックしたオブジェクトが変化している様子を表すのにもアニメーションは効果的です。
Flickrもリデザインし、Pinterest風に大きな写真を表示するように変わっています。しかしまだまだ写真の表示には効果的な方法があるのではないでしょうか（少なくとも来年には別な表示方法が流行っているはずです）。その表示とアニメーションを考え、実装してみるのは面白そうです。