左右スライド型フォトギャラリー

画面下部に配置されたサムネイルをクリックすると、画面に表示された写真が左右にスライドして、サムネイルに該当する写真を表示するタイプのフォトギャラリー。表示写真は、最初に並べた順が変わらないので現表示写真から離れている写真ほど早いスピードで移動する。
css の transition プロパティーを使った例である。サムネイル用の小さなサイズの写真と、表示用の写真は別々のものを用意し使う。

本サンプル表示の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="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="photos">
    <div id="photo1"><img src="wp-images/1.jpg"></div>
    <div id="photo2"><img src="wp-images/2.jpg"></div>
    <div id="photo3"><img src="wp-images/3.jpg"></div>
    <div id="photo4"><img src="wp-images/4.jpg"></div>
    <div id="photo5"><img src="wp-images/5.jpg"></div>
  </div>
  <div id="cover_left"></div>
  <div id="cover_right"></div>
</div>

HTML概要説明

・ラジオボタンの設置と、サムネイルをlabelで関連付け・配置するところは、前項のスライドイン型と同じ。
・全ての表示写真（photo1,,,photo5）をphotosというdivision の中に入れる。
　（cssで横に一列に並べ帯状にし、これを左右に移動させて写真を切り替える）
・写真両脇のスペースに表示される他の写真を隠すカバーを配置する。

本サンプル表示のCSS

/*ギャラリー全体のコンテナー*/
#stage {
	position: relative;
	width: 660px;
	height: 440px;
	margin: 0 auto;
	overflow: hidden;
}
/*全サムネイルのコンテナー*/
#thumbs {
	position: absolute;
	width: 630px;	
	top: 360px;
	left: 20px;
}
/*サムネイルのマウスオーバーでポインターを手のひらに*/
#thumbs label img {
	cursor: pointer;
}
/*全表示写真のコンテナー*/
#photos {
	position:absolute;
	top:10px;
	left:30px;
    width:3000px;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
/*表示写真をphotosの中に横並びで一列に並べる*/
#photo1, #photo2, #photo3, #photo4, #photo5 {
	position:relative;
    float:left;
}
/*ラジオボタンを非表示に*/
#r1, #r2, #r3, #r4, #r5 {
	display: none;
}
/*チェックされたサムネイルに相当する写真が画面中央になるようにphotosを移動*/
#r1:checked ~ #photos {
	left:30px;
}
#r2:checked ~ #photos {
	left:-570px;
}
#r3:checked ~ #photos {
	left:-1170px; 
}
#r4:checked ~ #photos {
	left:-1770px;
}
#r5:checked ~ #photos {
	left:-2370px;
}
/*スクリーン左右のカバー*/
#cover_left,#cover_right {
	position:absolute;
	top:0;
	width:30px;
	height:348px;
	background-color:#FFF;
}
#cover_left {
	left:0;
	z-index:100;
}
#cover_right {
	left:630px;
	z-index:101;	
}

CSSのポイント説明

・全表示写真を格納したphotosを、１番目の写真が画面表示されるように配置する（left:30px）。
・２番目以降の写真の位置を隙間なく右方向に並ぶように photos 内の left 値をそれぞれに設定する。
・サムネイルがチェックされた時に該当写真が画面中央に来るように、photosの位置をそれぞれに設定する。
・画面両脇のスペースをカバーする矩形を背景色で配置する。