画面下部に配置されたサムネイルをクリックすると、そのサムネイルが拡大しながら移動し、画面中央に写真が表示されるタイプのフォトギャラリーである。
cssのtransitionで、left、top、width、heightの値を変化させている。下部に配置したサムネイルは、大きなサイズの表示写真をサイズダウンして並べている。
サンプル
針ノ木岳から爺ヶ岳への縦走路にて
本サンプル表示用HTML
<div id="stage"> <input type="radio" id="r1" name="gal"> <input type="radio" id="r2" name="gal"> <input type="radio" id="r3" name="gal"> <input type="radio" id="r4" name="gal"> <input type="radio" id="r5" name="gal"> <div id="screen"><span id="title">針ノ木岳から爺ヶ岳への縦走路にて</span></div> <div id="photo1"><label for="r1"><img src="wp-images/1.jpg"></label></div> <div id="photo2"><label for="r2"><img src="wp-images/2.jpg"></label></div> <div id="photo3"><label for="r3"><img src="wp-images/3.jpg"></label></div> <div id="photo4"><label for="r4"><img src="wp-images/4.jpg"></label></div> <div id="photo5"><label for="r5"><img src="wp-images/5.jpg"></label></div></div> |
HTMLのポイント説明
・ラジオボタン配置までは、前項までのHTMLと同じ。
・画面下に配置するサムネイルは、表示写真をcssでサイズを小さくして並べる。
本サンプル表示用CSS
/*ギャラリー全体のコンテナー*/#stage { position: relative; width: 660px; height: 440px; margin: 0 auto;}/*初期画面*/#screen { position: absolute; left: 30px; top: 10px; width: 600px; height: 338px; background-color: #CCC;}/*初期画面上の文字*/#screen span { position:absolute; top:130px; left:50px; font-size:32px;}/*ラジオボタンを非表示に*/#r1, #r2, #r3, #r4, #r5 { display: none;}/*表示写真用divを画面下部に125px間隔でサムネイルとして一列に並べる*/#photo1,#photo2,#photo3,#photo4,#photo5 { position:absolute; top:360px; float:left; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;}#photo1 {left:20px;}#photo2 {left:145px;}#photo3 {left:270px;}#photo4 {left:395px;}#photo5 {left:520px;}/*写真をサムネイルサイズにし、transitionをセット*/#photo1 img,#photo2 img,#photo3 img,#photo4 img,#photo5 img { width:120px; height:68px; cursor: pointer; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;}/*サムネイルがクリックされたら、該当する写真の大きさを元のサイズに拡大する*/#r1:checked ~ #photo1 img,#r2:checked ~ #photo2 img,#r3:checked ~ #photo3 img,#r4:checked ~ #photo4 img,#r5:checked ~ #photo5 img { width:600px; height:338px;}/*クリックに該当する写真が画面中央にくるようにする*/#r1:checked ~ #photo1,#r2:checked ~ #photo2,#r3:checked ~ #photo3,#r4:checked ~ #photo4,#r5:checked ~ #photo5 { position:absolute; left:30px; top:10px;}/*いずれかのサムネイルがクリックされたら、背景の文字を非表示にする*/#r1:checked ~ #screen span, #r2:checked ~ #screen span, #r3:checked ~ #screen span, #r4:checked ~ #screen span, #r5:checked ~ #screen span { opacity: 0;} |
CSSのポイント説明
・写真格納用div（#photo1,,,,#photo5）を画面下部に125px間隔に並べる。
・初期の写真（#photo1 img,,,,）サイズをサムネイルサイズに設定する。
・写真格納用divに、移動のtransition（left,top）を設定する。
・初期の写真に、拡大のtransition（width,height）を設定する。
以前別のスライドショーでお世話になった者です。
こちらのコードを利用させていただく上で質問があるのですが
初期画面の文字を、photo1 の画像にすることはできませんか？
photo1の部分のHTMLプログラムを id="screen" に変更することでphoto1の画像にすることはできたのですが、photo2など他の画像を選択した際
一覧の列にphoto1が戻ってくれません。
いろいろ試行錯誤してみたのですが、どうも上手くいかないので、質問させていただきました。
宜しくお願いします。
ざっき―さん、お久しぶりです。
HTMLで、「針ノ木岳から爺ヶ岳への縦走路にて」の代わりに、
<img src="img2/1.jpg">
として、photo1を表示させます。
最初に表示するphoto1の位置調整として、cssの #screen span { の中の、top及びleftを0にしてください。
ご丁寧にありがとうございます！
無事解決することができました。
本当にありがとうございますm(__)m
どういたしまして。
今後も当サイトをご活用ください。
コメント失礼いたします。御サイト様のコードを利用させていただいております。こちらのコードに関しての質問なのですが、photo1のみ正常に反映されず、色々と試してみたのですがわからないので質問させていただきます。何卒初心者なもので、ご教授いただければ幸いです。
nanaさん、こんにちは。
＞photo1のみ正常に反映されず
ということですが、どのような状態なのかがわからないと、お答えが難しいです。
サムネイルまでは表示されるが、それをクリックしても全く反応しない、拡大はするが動かない、拡大しないで動くなどが考えられますが、いずれにしろ、photo1のみが正常でないとすれば、コードの中で、#r1:checked ~ #photo1,、あるいは、#r1:checked ~ #photo1 img,
が記述されているところに誤りがあるということです。よく確認するか、codeを打ち直してみてください。
ご回答ありがとうございます。ご指摘いただいた部分ではないのですが、間違いを発見し無事作動しました。これからも御サイト様を利用しコーディングを学んでいきたいと思います。ありがとうございました。
無事作動おめでとうございます。
今後も当サイトをよろしくお願いします。
質問です。サムネイルを２列、３列と下に並べるにはどうしたらいいですか？
いろいろ試してみましたが、うまくいかないので、教えていただけないでしょうか…
２列の例を、以下のページに示しました。参考にしてください。
（最初のｈは、全角ですので、半角にしてください）
ｈttp://css.programming.jp/pages/thumb_click_expand_2rows.html
ありがとうございました。
無事実装することができました！
どういたしまして。
ご活用ください。