フォトギャラリー型ポートフォリオ

 グリッド状に配置された画像がナビゲーションとなり、そのクリックで、その画像が拡大され、説明文が表示される。cssアニメーションらしく、ここまでがシームレスで表示される。このまま、単なるギャラリーとしても使えると思うが、作品や商品紹介、実績紹介などのポートフォリオとして応用できるのではないかと思い作成した。

準備するもの

・幅1000px、高さ563pxの写真(ここでは15枚のjpgファイル)を、フォルダimg14に格納する
・閉じるボタンの画像(end.gif)を、フォルダimages内に置く
・本サンプル表示用のhtml、cssのコードを記載した、code.html を i-html フォルダ内に置く

サンプル(DEMO)

 こちらのページに、表示用HTML及びCSSのコードとともに示した

作成のポイント説明

・各写真を20%の大きさで、5列3行にposution:absoluteで並べ、その小画像のクリックで、クリックされた画像を100%に拡大し、その他の小画像は非表示にする。
・小画像のマウスオーバーで、その画像に赤紫色のスクリーンをかけ、標題をフェイドイン表示させる。
・小画像のクリックで、スクリーン、標題を非表示にし、閉じるボタンを表示し、説明文を表示させる。
 (表題を非表示にするのに、pointer-events: none;を使っているので、マウスが移動するまでは表示状態になる)
・各画像の説明文は、全てHTML内に記述している。それぞれをhtmlファイルにして、iframe内に読み込む方法もあるかと思う。
・閉じるボタン、もしくは、「一覧に戻る」をクリックすると、拡大写真をもとにサイズに戻し、初期画面に戻す。
・初期画面では、小画像の一覧の下の部分に記述欄を設けることも可能。
 (ここでは、本サンプル表示用のHTML,CSSのコードをifrmae内に読み込んでいる)
 この表示は、拡大写真表示時には非表示にし、閉じるボタンのクリックで表示されるようにする。
・小画像、その他記述の表示の垂直位置は、padding-topの%数値で決めている。
 (この数値は、計算と言うよりは、最適な数値をトライアンドエラーで決めた)
・このサンプルでは、拡大写真下の説明文は、要約のみ記述し、そこからリンクで詳細ページに飛ぶようにしている。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>