型などと呼ばれているタイプのフォトギャラリーである。サムネイルが、奥まった中央のサムネイルに、両側から遠近感をもってサムネイルが近づいていくように見える。今回のサンプルは、5列3行のものであるが、もっと行列数を増やして、画面いっぱいに並べたら迫力あるものになるであろう。サンプル(DEMO)このサンプルは、イメージを示したもので、クリックに反応しません。本サンプル表示用HTMLサンプルページに併記してあります。・15のサムネイルは、左2列、中央1列、右2列の3つのブロックに分け、左右に遠近感を持たせて効果を出している。発生したクリックイベント元を認知し、その写真を表示するようにしている。・拡大写真は、.photoの中央に表示するようにし、黒色半透明のbackgroundに閉じる印として✖を右上に表示するようにした。(写真が表示された後は、stageのどの部分をクリックしても元に戻る)本サンプル表示用CSSサンプルページに併記してあります。しているが、この値を変えると、サイズが変更できるようになっている。大きく表示するときは、準備する写真のサイズも大きくする必要があるし、ステージの高さや設定しているmarginなどの数値も調整が必要になる。3D効果を施しているが、これらの数値を変えれば、遠近感の具合が変わる。・サムネイルがうまく並ぶように、それぞれのブロックの幅、マージンなどを微妙に調整しているので、写真サイズなどの条件が変われば、これらの数値を変更する必要が生じる場合もある。コメントをキャンセルメールアドレスが公開されることはありません。フォトギャラリー・スライドショ。