フェイドイン型フォトギャラリー（レスポンシブ）

　以前に投稿した「フェイドイン型フォトギャラリー」のレスポンシブ対応型である。
　拡大写真の大きさが、画面サイズに対応して600px以下で縮小するようにした。

レスポンシブ対応フェイドイン型フォトギャラリーサンプル

本サンプル表示用ＨＴＭＬ

<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">
  <img style="width:100%" src="wp-images/1.jpg">
  <div id="photo1" class="photo"><img src="wp-images/1.jpg"></div>
  <div id="photo2" class="photo"><img src="wp-images/2.jpg"></div>
  <div id="photo3" class="photo"><img src="wp-images/3.jpg"></div>
  <div id="photo4" class="photo"><img src="wp-images/4.jpg"></div>
  <div id="photo5" class="photo"><img src="wp-images/5.jpg"></div>
  <div style="padding:0 0;"></div>
  <div id="thumbs">
    <label for="r1"><img src="wp-images/s1.jpg"></label>
    <label for="r2"><img src="wp-images/s2.jpg"></label>
    <label for="r3"><img src="wp-images/s3.jpg"></label>
    <label for="r4"><img src="wp-images/s4.jpg"></label>
    <label for="r5"><img src="wp-images/s5.jpg"></label>
  </div>
</div>

ＨＴＭＬのポイント説明

・初期画面に1枚目の写真を表示している。
・サムネイルが、拡大写真の下に並ぶように、#thumbsをposition指定なしに、タグの下部に記述。
・このギャラリーの下に、他の要素を表示させる場合は、単に、このhtmlに続けて記述すればよい。

本サンプル表示用ＣＳＳ

/*ギャラリー全体のコンテナー*/
#stage {
	position: relative;
	max-width: 600px;
	margin: 0 auto;
}
/*全サムネイルのコンテナー*/
#thumbs {
	margin-left:2%;
}
/*サムネイルの幅、ポインターを手のひら*/
#thumbs label img {
	width:18.5%;
	cursor: pointer;
}
/*ラジオボタンを非表示に*/
#r1, #r2, #r3, #r4, #r5 {
	display: none;
}
/*表示写真の初期配置（全部透明に）とtransition設定*/
.photo {
	position: absolute;
	left: 0;
	top: 0;
}
.photo img {
	width:100%;
	opacity: 0;
	-webkit-transition: opacity 1s ease;
	transition: opacity 1s ease;
}
/*チェックされたサムネイルに相当する写真だけを表示*/
#r1:checked ~ #photo1 img, #r2:checked ~ #photo2 img, #r3:checked ~ #photo3 img, #r4:checked ~ #photo4 img, #r5:checked ~ #photo5 img {
	opacity: 1;
}

ＣＳＳのポイント説明

・#stageに、max-width を、拡大写真とサムネイルは、%指定のwidthを指定
・heightは全て無記述