サムネイルをクリックするとステージに該当する拡大写真が登場するタイプのフォトギャラリーに、「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を記述する必要がある。