LightBox タイプフォトギャラリー

皆様おなじみのLightBox（画面はそのままで、画面中央に大きいイメージを表示するのに使用されるJavaScriptアプリケーション）タイプのフォトギャラリーである。

本サンプル表示用HTML

  <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">
  <input type="radio" id="r6" name="gal">
  <input type="radio" id="r7" name="gal">
  <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 id="frame">
  <div id="photo1"><img src="wp-images/1.jpg"><span class="title">1/5　　　朝焼けの焼岳</span></div>
  <div id="photo2"><img src="wp-images/2.jpg"><span class="title">2/5　　　針ノ木岳、スバリ岳を背に岩小屋沢岳への登り</span></div>
  <div id="photo3"><img src="wp-images/3.jpg"><span class="title">3/5　　　剣岳を真近に望む</span></div>
  <div id="photo4"><img src="wp-images/4.jpg"><span class="title">4/5　　　鹿島槍ヶ岳、後立山連峰</span></div>
  <div id="photo5"><img src="wp-images/5.jpg"><span class="title">5/5　　　岩小屋沢、鳴沢岳を背に岳爺ヶ岳への登り</span></div>
  <div id="close_btn"><label for="r6">? 閉じる</label></div>  </div>
  <label for="r7"><div id="darkscreen"></div></label>

HTMLの概要説明

・ラジオボタン r1 – r5 は表示写真用、r6 は閉じるボタン用、r7 はダークスクリーン用にそれぞれ割り付ける
・r6、r7は、写真のアニメーションには関連付けていないので、これをクリックすると元の状態に戻る。
　（拡大写真が消え、サムネイル表示画面に戻る）
・写真は、#frameに全部重ねて配置しておき、サムネイルクリックで該当する写真をcss transition でフェイド・インさせる。

本写真表示用CSS

/*ラジオボタンを非表示に*/
#r1, #r2, #r3, #r4, #r5,#r6,#r7 {
	display: none;
}
/*全サムネイルのコンテナー*/
#thumbs {
	position: relative;
	width: 630px;
	left: 20px;
	margin:0 auto;
}
/*サムネイルのマウスオーバーでポインターを手のひら*/
#thumbs label img {
	cursor: pointer;
}
/*表示写真の初期配置（全部透明に）とtransition設定*/
#photo1, #photo2, #photo3, #photo4, #photo5 {
	position: absolute;
	top:0;
	margin:5px 5px 0 5px;
	opacity: 0;
	-webkit-transition: opacity 1s ease;
	-moz-transition: opacity 1s ease;
	-o-transition: opacity 1s ease;
	transition: opacity 1s ease;
}
/* サムネイルがクリックされたら#frame を表示 */
#r1:checked ~ #frame,#r2:checked ~ #frame,#r3:checked ~ #frame,#r4:checked ~ #frame,#r5:checked ~ #frame {
	opacity:1;
	z-index:95;
}
/*チェックされたサムネイルに相当する写真だけを表示*/
#r1:checked ~ #frame #photo1, #r2:checked ~ #frame #photo2, #r3:checked ~ #frame #photo3, #r4:checked ~ #frame #photo4, #r5:checked ~ #frame #photo5 {
	opacity: 1;
	z-index:100;
}
/* サムネイルがクリックされたら#darkscreen を表示 */
#r1:checked ~ label #darkscreen,#r2:checked ~ label #darkscreen,#r3:checked ~ label #darkscreen,#r4:checked ~ label #darkscreen,#r5:checked ~ label #darkscreen {
	opacity:0.6;
	z-index:90;
}
/* #frame */
#frame {
	position:fixed !important;
	position:absolute;
	background:#fff;
	width:610px;
	height:370px;
	left:50%;
	top:50%;
	margin-left:-305px;
	margin-top:-170px;
	opacity:0;
	z-index:-11;
}
/* 写真の下に表示するタイトル */
.title {
	position:absolute;
	left:10px;
	top:345px;
	font-size:12px;
}
/* 右下に表示する閉じるボタン */
#close_btn label {
	position:absolute;
	left:540px;
	top:350px;
	font-size:14px;
	font-weight:bold;
	cursor:pointer;
}
/*写真表示時の画面遮蔽スクリーン*/
#darkscreen {
	position:fixed !important;
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background:#000;
	opacity:0;
	z-index:-5;
}

CSSのポイント説明

・サムネイルがクリックされたら、#frame を画面中央に表示させ、その中に該当する番号の写真を表示させる。
・拡大写真表示時の重ね順は、下から、#darkscreen -> #frame -> photo　とする。
・#frameの大きさや、関連する位置データなどは、拡大写真のサイズに合わせて設定しているので、表示写真の大きさに応じて替える必要がある。