レスポンシブGoogleさんの画像検索で使われているサムネイルをクリックするとすぐ下にアコーディオン形式で詳細エリアが広がるUI。このUI動作を実装するには「SuperBox」というjQueryプラグイン等が有名だったりしますが画面仕様等ちょっと理想と違う構成のところがあったり動作が少し重かったりしたので実験がてらjQueryを使ってGoogle画像検索のUIを試しに作ってみたので紹介してみたいと思います。jQueryでGoogle画像検索の様なUIを実装する実験(レスポンシブ対応)レスポンシブ動作などブラウザ枠を目いっぱいで表示するタイプなのでまずは別枠表示で動作サンプルから。jQueryでGoogle画像検索の様なUIを実装する実験(レスポンシブ対応)サンプルでは25枚の画像を一覧で並べてウィンドウサイズに合わせて、1行に並べられる画像数等がリキッドレイアウトされます。サムネイルをクリックするとすぐ下に詳細エリアが展開されます。詳細エリアにはNEXT/BACKボタンでの切り替えの他に閉じるボタンを配置してあります。簡単な動作仕様については以上になります。全体構成についてまずはHTMLから。class="secRight"><p>エリア【1】のダミーテキスト。エリア【1】のダミーテキスト。エリア【1】のダミーテキスト。エリア【1】のダミーテキスト。エリア【1】のダミーテキスト。エリア【1】のダミーテキスト。class="secRight"><p>エリア【2】のダミーテキスト。エリア【2】のダミーテキスト。エリア【2】のダミーテキスト。エリア【2】のダミーテキスト。class="secRight"><p>エリア【3】のダミーテキスト。エリア【3】のダミーテキスト。エリア【3】のダミーテキスト。エリア【3】のダミーテキスト。エリア【3】のダミーテキスト。エリア【3】のダミーテキスト。エリア【3】のダミーテキスト。class="secRight"><p>エリア【4】のダミーテキスト。エリア【4】のダミーテキスト。エリア【4】のダミーテキスト。エリア【4】のダミーテキスト。エリア【4】のダミーテキスト。エリア【4】のダミーテキスト。class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。全体を囲う<ul>にクラス「.listCover」の名前(任意)を付けサムネイル部分の<li>要素には「.listItem」と名前(任意)を付けてあります。<li>「.listItem」にはサムネイルとして表示する画像の他に「.selfRep」と名付けた<div>要素を配置してあり、(ここの名前も任意)この<div>「.selfRep」の中に入る<div>「.selfRepInner」とセットで構成されておりこれらは一覧画面では非表示となります。サムネイルクリックで詳細エリア展開時にこの2つの<div>で内に記載された内容が表示される構成になっておりこの中には適当HTMLを好きなように入れ込める仕様になっています。全体構成上、リスト要素を「inline-block」や「inline」で制御しているので面倒なのですが<li>ごとの改行にはコメントアウトをして改行を削除しておく必要があります。(もしくは最終的にHTMLソースを改行せずに全て一行にするか)HTML構成については以上になります。1;}サムネイル表示用リストとなる「.listItem」に対しては「display:inline-block」とIE6,7用にハックで「inline」にしておく必要がありサムネイル時に非表示要素となる「.selfRep」はCSS側では「display:none」にしておく必要があります。サムネイルクリック後の詳細エリアは「.expandField」となっており「width:100%」「display:block」「float:left」は最低限必要となっている要素ですがその他は装飾等レイアウト調整用となっているので見た目を変える場合はこの中を変更する必要があります。「.btnClose」は閉じるボタン「.btnPrev」は前へボタン「.btnNext」は次へボタンとなっています。詳細エリア「.expandField」の高さについてはスクリプト側で設定する様になっているのでCSSでは「height」の値は設定しません。後半にメディアクエリーを使ってレイアウト制御が入っていますがサンプル上のレイアウトを保つ為のものになっており必ず必要というものではありません。上記のCSS指定とは別に、リキッド動作の際にウィンドウ幅を計算する上でスクロールバーの有り無しの状態によって全体幅の計算がおかしくなってしまうブラウザもあるのでbodyに対してスクロールバーの表示制御を入れてあります。*/CSSに関しては以上です。実際の動作スクリプトは以下の様になります。IE8});});</script>スクリプト開始部分にある設定値の内容は以下の様になっています。‘linear’詳細エリア展開後のNEXT/BACK切り替え時のイージングこれらの設定値を変更することでもろもろ調整が可能になっています。$(‘.selfRepInner’)」を変更してください。130」で基準値をセットしてウィンドウサイズに対してこの値を使って割って一つ一つの<li>リストに幅を割り振るようになっています。(サンプルでは100pxのサムネイル画像に対して少し余白をあけた130pxに設定)スクリプト全体的にあまり汎用性のある構成ではありませんが設定値を少し調整するだけで簡単に設置することは可能になっているかと思います。全体をリキッドおよびレスポンシブ対応しているのでPCブラウザのみでなくiPhoneやiPadやAndroidのスマホ及びタブレットでも動作可能です。※いちよIE6,7でも動作するようになっています。少々特殊なUIではありますがギャラリーページや制作会社などの制作実績ページなど一覧画面からちょっとした詳細画面を表示したい場合などに使えるかと思っています。モーダルウィンドウと違って画面全体にオーバーレイされることもないので元の画面を生かしつつ別ウィンドウを表示できる使い勝手の良いUIになるかと。jQueryでGoogle画像検索の様なUIを実装する際にぜひ。PostsjQueryで画像がクロスフェードするシンプルな画像ビューアー(自動再生)を作成する方法【改訂版】jQueryでニュースティッカーをシンプルに実装する方法jQueryでツールチップ。16:30なんとお礼をいっていいのやら!!!本当に本当にありがとうございます。只今作成中のサイトに使わせていただきます。19:27>yukoさんコメントありがとうございます。このGoogle画像検索UIスクリプトがお役に立ったようで嬉しく思っております。装飾等のカスタマイズもできる限りシンプルさを心掛けて構成しておりますのでサイトに自由に組み込んでいただけると幸いです。21:23はじめまして。素敵なサンプルありがとうございます。今までも色々と使わせていただいてます。こちらのGoogle検索風サンプルも現在作成中のサイトで使わせていただこうと思っているのですが、レスポンシブではなく、テンプレートを使用したページのコンテンツ部分に使用したいと思っています。130」で基準値をセットしてウィンドウサイズに対してこの値を使って割って・・・”とのことですが、コンテンツの幅に対して均等割りする方法はありますでしょうか?listBaseWidthの数値を変えたりしてみたのですが、上手くいかなくて。ちなみに、サムネイル画像はサンプルと同じ120px、コンテンツ幅は760pxです。jQueryの知識が足りず、ご迷惑な質問かもしれませんが、ご回答いただけると助かります。11:17>asakoさんコメントありがとうございます。このGoogle画像検索UIスクリプトをご活用いただいているようで嬉しく思っております。ご質問いただいた件についてですがおそらくスクリプト側ではなくてCSS側で「.listCover」に対して「width:760px」を指定していただければ実現することが可能なのではないかと思っております。スクリプト構成上、幅を指定する場合は、サムネイルクリック後に展開されるエリアは画面めいっぱいすることは厳しく指定した幅内で展開されることになります。