画面下部に配置されたサムネイルをクリックすると、そのサムネイルが拡大しながら移動し、画面中央に写真が表示されるタイプのフォトギャラリーである。
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）を設定する。