ステージ下部に配置されたサムネイルをクリックすると、メイン画面に写真がフェイド・インして表示されるタイプのフォトギャラリーであり、css の transition プロパティーを使った例である。サムネイル用の小さなサイズの写真と、表示用の写真は別々のものを用意し使う。
サンプル
針ノ木岳から爺ヶ岳への縦走路にて
本サンプル表示のHTML
<div id="stage"><input id="r1" type="radio" name="gal" />
<input id="r2" type="radio" name="gal" />
<input id="r3" type="radio" name="gal" />
<input id="r4" type="radio" name="gal" />
<input id="r5" type="radio" name="gal" />
<div id="thumbs">
<label for="r1"><img alt="" src="wp-images/s1.jpg" /></label>
<label for="r2"><img alt="" src="wp-images/s2.jpg" /></label>
<label for="r3"><img alt="" src="wp-images/s3.jpg" /></label>
<label for="r4"><img alt="" src="wp-images/s4.jpg" /></label>
<label for="r5"><img alt="" src="wp-images/s5.jpg" /></label>
</div>
<div id="screen"><span id="title">針ノ木岳から爺ヶ岳への縦走路にて</span></div>
<div id="photo1"><img alt="" src="wp-images/1.jpg" /></div>
<div id="photo2"><img alt="" src="wp-images/2.jpg" /></div>
<div id="photo3"><img alt="" src="wp-images/3.jpg" /></div>
<div id="photo4"><img alt="" src="wp-images/4.jpg" /></div>
<div id="photo5"><img alt="" src="wp-images/5.jpg" /></div>
</div>
HTMLの概要説明
・ラジオボタンを写真の枚数分配置し、idをr1,r2,,,r5とする。
・サムネイル写真をラジオボタンのラベルとして配置し、for= を使って関連付ける。
（サムネイルをクリックすると、該当するラジオボタンがチェックされたことになる）
・表示させる写真をstage中央に全部重ねて配置する。
（cssで全部透明にして非表示にする）
本サンプル表示のCSS
/*ギャラリー全体のコンテナー*/
#stage {
position: relative;
width: 660px;
height: 440px;
margin: 0 auto;
}
/*全サムネイルのコンテナー*/
#thumbs {
position: absolute;
width: 630px;
top: 360px;
left: 20px;
}
/*サムネイルのマウスオーバーでポインターを手のひらに*/
#thumbs label img {
cursor: pointer;
}
/*初期画面*/
#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;
}
/*表示写真の初期配置（全部透明に）とtransition設定*/
#photo1, #photo2, #photo3, #photo4, #photo5 {
position: absolute;
left: 30px;
top: 10px;
opacity: 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
/*チェックされたサムネイルに相当する写真だけを表示*/
#r1:checked ~ #photo1, #r2:checked ~ #photo2, #r3:checked ~ #photo3, #r4:checked ~ #photo4, #r5:checked ~ #photo5 {
opacity: 1;
}
/*どれかがチェックされたらスクリーン上の文字を非表示に*/
#r1:checked ~ #screen, #r2:checked ~ #screen, #r3:checked ~ #screen, #r4:checked ~ #screen, #r5:checked ~ #screen {
opacity: 0;
}
CSSの説明
・表示させる写真（photo1 – photo5）の初期配置時の透明度（opacity）を 0 としておく
・それぞれの写真に、transition propaty をセットしておく(transition: all 1s ease;）
（ここでは要素として透明度しかないので、allはopacityでも可）
・#r1:checked ~ #photo1 { opacity:1;} は、
1番目のラジオボタン（サムネイル）がクリックされたら、1番目の写真の透明度を1秒掛けて1にするという意。