Googleの画像検索をよく使うのですが、一覧に並んだ画像に加えて、それをクリックした時のアニメーションや説明表示など使い勝手がとてもいいです。さすがGoogleといった所ですが、そのUIを真似ると色々な場面で使えるかも知れません。 そこで使ってみたいのがjQuery.GI.TheWall.jsです。jQueryベースであのGoogle画像検索ライクな表示が実現します。

jQuery.GI.TheWall.jsの使い方

こちらが画像一覧です。適当な画像をクリックします。

アニメーションしながら画像の詳細が出ます。デモなのでクリックした画像と表示される画像は関係ありません。

左右の矢印で次の写真に切り替えられるようになっています。

テキストの説明を出すことも可能。

単純に写真を出すだけでなく、アニメーションしながら大きな写真を出すというのは格好いいです。また説明文も出せますので、自分の撮った写真を並べて出して、クリックすると説明を出すなんてギャラリー的な使い方もできそうです。

jQuery.GI.TheWall.jsはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

jQuery.GI.TheWall.js demo Goldinteractive/jQuery.GI.TheWall.js