--> ↓

フォトギャラリー・スライドショー両用型（フェイドイン・アウト型）

投稿日:2015年4月7日作成者: tyosbb

　サムネイルをクリックするとステージに該当する拡大写真が登場するタイプのフォトギャラリーに、「Slide Show」ボタンをクリックするとスライドショーが開始される機能を加えたものである。　写真の登場・退場には、フェイドイン・アウト効果を使っている。

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

<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">
  <input type="radio" id="sson" name="gal">
  <div id="thumbs">
    <label for="r1"><img src="img2/s1.jpg" width="115"></label>
    <label for="r2"><img src="img2/s2.jpg" width="115"></label>
    <label for="r3"><img src="img2/s3.jpg" width="115"></label>
    <label for="r4"><img src="img2/s4.jpg" width="115"></label>
    <label for="r5"><img src="img2/s5.jpg" width="115"></label>
  </div>
  <div id="screen"><span id="title">針ノ木岳から爺ヶ岳への縦走路にて</span></div>
  <div id="photos">
    <div id="photo1" class="photo"><img src="img2/1.jpg"></div>
    <div id="photo2" class="photo"><img src="img2/2.jpg"></div>
    <div id="photo3" class="photo"><img src="img2/3.jpg"></div>
    <div id="photo4" class="photo"><img src="img2/4.jpg"></div>
    <div id="photo5" class="photo"><img src="img2/5.jpg"></div>
  </div>
  <label for="sson"><span>>> Slide Show >></span></label></div>
</div>

HTMLのポイント説明

・ラジオボタン #r1 - #r5 を各サムネイルに関連付け、#sson をSlide Show ボタンに関連付けている。
・#r1 - #r5 は、サムネイルクリックで拡大写真の表示transitionのトリガーとして、#sson はスライドショーanimationの開始に機能させている。
・このサンプルでは、スライドショーは全て１枚目からスタートするように設定しているが、表示スライドから開始させるようにしたい場合は、各スライドそれぞれに付随したSlideShowボタンを表示させなければならない。
（各スライドのDIV、例えば、#photo1内に、labelとしてsson1などとして独自のSlideShowボタンを置く）

本サンプル表示用ＣＳＳ

#stage {
	position: relative;
	width: 600px;
	height: 455px;
	overflow: hidden;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	background-color:#000;
}
/*全サムネイルのコンテナー*/
#thumbs {
	position: absolute;
	width: 630px;	
	top: 380px;
	left: 5px;
}
/*サムネイルのマウスオーバーでポインターを手のひら*/
#thumbs label img {
	cursor: pointer;
}
/*初期画面*/
#screen {
	position: absolute;
	top: 10px;
	width: 600px;
	height: 338px;
	background-color: #CCC;
	z-indes:-10;
}
/*初期画面上の文字*/
#screen span {
	position:absolute;
	top:130px;
	left:50px;
	font-size:32px;
}
/*ラジオボタンを非表示に*/
#r1, #r2, #r3, #r4, #r5, #s1, #s2, #s3, #s4, #s5, #sson {
	display: none;
}
/* 拡大写真を水平帯状に並べるコンテナー */
#photos {
	position:absolute;
	top:10px;
	width:3000px;
	height:380px;
}
/*表示写真の初期配置（全部透明に）とtransition設定*/
.photo {
	position:relative;
	float:left;
}
.photo {
	opacity: 0;
	-webkit-transition: opacity 1s ease;
	-moz-transition: opacity 1s ease;
	-o-transition: opacity 1s ease;
	transition: opacity 1s ease;
}
/* Slide Show ボタン */
#stage label span {
	position:absolute;
	top:355px;
	left:440px;
	cursor:pointer;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:#fff;
}
/* サムネイルクリックで、該当するスライドを表示させる */
#r1:checked ~ #photos #photo1,#r2:checked ~ #photos #photo2,#r3:checked ~ #photos #photo3, #r4:checked ~ #photos #photo4, #r5:checked ~ #photos #photo5 {
	opacity: 1;
}
/* サムネイルクリックで、が該当スライドの位置を画面中央に */
#r2:checked ~ #photos {
	left:-100%;
}
#r3:checked ~ #photos {
	left:-200%;
}
#r4:checked ~ #photos {
	left:-300%;
}
#r5:checked ~ #photos {
	left:-400%;
}
/*どれかがチェックされたらスクリーン上の文字を非表示に*/
#r1:checked ~ #screen, #r2:checked ~ #screen, #r3:checked ~ #screen, #r4:checked ~ #screen, #r5:checked ~ #screen, #sson:checked ~ #screen {
	opacity: 0;
}
/* ssonボタンクリックで拡大写真のopacityを1に */
#sson:checked ~ #photos .photo, #s2:checked ~ #photos .photo, #s3:checked ~ #photos .photo, #s4:checked ~ #photos .photo, #s5:checked ~ #photos .photo {
	opacity:1;
}
/* ssonボタンクリックでスライドショーを開始 */
#sson:checked ~ #photos {
	animation:imgPassToLeft 30s infinite;
	-webkit-animation:imgPassToLeft 30s infinite;
}
/* animation設定 */
@keyframes imgPassToLeft {
	0%  {   left:   0%;opacity:0;}
	4%  {   left:   0%;opacity:1;}
	16% {   left:   0%;opacity:1;}
	19.99%{ left:   0%;opacity:0;}
	20% {   left:-100%;opacity:0;}
	24% {   left:-100%;opacity:1;} 
	36% {   left:-100%;opacity:1;}
	39.99%{ left:-100%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-300%;opacity:0;}
	64% {   left:-300%;opacity:1;}
	76% {   left:-300%;opacity:1;} 
	79.99%{ left:-300%;opacity:0;}
	80% {   left:-400%;opacity:0;}
	84% {   left:-400%;opacity:1;}
	96% {   left:-400%;opacity:1;}
	99.99%{ left:-400%;opacity:0;}
	100% {  left:   0%;opacity:0;}
}
@-webkit-keyframes imgPassToLeft {
	0%  {   left:   0%;opacity:0;}
	4%  {   left:   0%;opacity:1;}
	16% {   left:   0%;opacity:1;}
	19.99%{ left:   0%;opacity:0;}
	20% {   left:-100%;opacity:0;}
	24% {   left:-100%;opacity:1;} 
	36% {   left:-100%;opacity:1;}
	39.99%{ left:-100%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-300%;opacity:0;}
	64% {   left:-300%;opacity:1;}
	76% {   left:-300%;opacity:1;} 
	79.99%{ left:-300%;opacity:0;}
	80% {   left:-400%;opacity:0;}
	84% {   left:-400%;opacity:1;}
	96% {   left:-400%;opacity:1;}
	99.99%{ left:-400%;opacity:0;}
	100% {  left:   0%;opacity:0;}
}

ＣＳＳのポイント説明

・スライド（拡大写真）を水平帯状に並べて置き、サムネイルクリックで、該当スライドがステージに表示されるように位置を設定する。
・スライドショーは、SlideShow ボタンクリックで、１枚目をスタートとするanimationを開始させる。
・スライドショーを表示スライドから始めたい場合は、各スライド独自の（そのスライドを起点とする）animationを記述する必要がある。

コメントを残すコメントをキャンセル

↑