グリッド状に配置された画像がナビゲーションとなり、そのクリックで、その画像が拡大され、説明文が表示される。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とCSSだけで作成できるのはとても有難いです。
一点ご質問させていただきたいことがあるですが、閉じるボタンと一覧に戻るへのリンクを、一番初めに表示される小画像の一覧ページに戻すためにはリンクはどのように設定すればよいのでしょうか。他の効果などを確認させていただいて、バックページ全体へのコードを挿入してみたりしたのですが、その方法だとボタンがうまく機能せず、レイアウトも崩れてしまうようです。
初歩的な質問で大変申し訳ありませんが、ご教授頂けますと幸いです。
kyouさんこんにちは。
＞一番初めに表示される小画像の一覧ページに戻すためにはリンクはどのように設定すればよいのでしょうか
とありますが、このサンプルではページ移動はしませんので、閉じるボタンと一覧に戻るへのリンクを貼る必要がなく、これらをクリックすると、一覧に戻ります。これは、これらにはR100というidをつけていますので、該当するコンテンツがないので元に戻るということになります。
質問のご趣旨は、これでよかったでしょうか?
説明が下手で申し訳ありません。
ボタンや一覧に戻るを押しても反応しないといいますか、閉じることができない状態になってしまっております。
また別件なのですが、下部の「本サンプル表示用のHTML,CSSのコード」のフォームを消してみたところ、拡大された画像の上に説明文が被ってしまうようになりました。説明文用のBOXの余白の変更などが必要なのでしょうか。
わかりづらい説明でご迷惑おかけいたします。
input文の、r100に関する記述が正確に書かれていますか。
閉じるボタンと、一覧に戻る関連のコードも見直してください。
また、cssでも、r100に関する部分を確認してください。
さて、二つ目の質問もよく理解できないのですが、
「フォームを消してみた」とは、どの部分を消したのでしょうか。
もし、記述内容を入れ変えたいということであれば、日本文の部分だけ入れ替えてください。
ご返信、有難うございます。
コードはほとんどコピペさせていただいたう上で、特に変更していないのですが、もう一度確認し直させて頂きます。
2目目の質問ですが、HTML,CSSともに「p-home」関係の記述を消してしまったということです。
重ね重ねご迷惑をお掛け致しますが、宜しくお願い申し上げます。
どうしたいのでしょうか？
何のために、消したのですか?
何度もすみません。
「本サンプル表示用HTML及びCSS」以下のフレームなしでギャラリーを作れないかと思ったのですが…。素直にそのまま使用させて頂きます。
お時間を頂戴して申し訳ありませんでした。
ごめんなさい。
そういう意味だったんですね。
p-homeの部分を消して、
div style="padding-bottom:24%;" と padding-bottom: の数値を調整してください。
こんにちは。
CSSの勉強は始めたばかりですが、いつも大変参考にさせていただいております。
お時間がございましたら、ご教授頂きたいことがあるのですが、こちらのギャラリーの小画像のマウスオーバーで、出現する標題(タイトル)ですが、上下左右中央に配置することは不可能でしょうか。出来れば、複数行か文字数に合わせて大きさが変更できるととても有難いです。
中央寄せに関しては、text-align: center;や
display: flex;
align-items: center;
justify-content: center;
をタイトル部分のCSSに記述してみたのですが、どうしてもうまく反映されないようです。
宜しくお願い致します。
上記の件とは全く無関係なのですが、tyosbb様はflexをご使用しておられないようですが、何か理由がおありなのでしょうか。
riyoさんこんにちは。
上下左右中寄せは、position:absoluteでの場合をweb検索すればいろいろ出てくるとは思いますが、よく使われる、left: 50%; top:50%;transform:translate(-50%, -50%);を使えば、最初の段はうまくいきます。でも、この場合は、小画像の並べ方を、paddingで調節しているので、2段以降がうまくいきません。これ以上の解決法を今示せませんので、ご容赦ください。
flexを使わない方針などありません。使った方がいい場合は、使ってみようと思います。現在はよく調べておりませんが、ブラウザ対応が完全でなかったこともあり、今までは使っていません。
ご返信ありがとうございます。
やはり中央に並べることは不可能なんですね。
やり方が全く間違っていたわけではなくてよかったです。
flexについてもご回答ありがとうございます。