複数シリーズのサムネイル群を、ボタンクリックで切り替え、サムネイルのクリックで写真がFadeIn表示されるタイプのギャラリーである。
サムネイル群が、切換えボタンの位置から、表示位置まで舞い降りるアニメーションを付加した。
SAMPLE
作成準備
・各シリーズ（ここでは３シリーズ）の写真5-7枚（900px*507px）、サムネイル（120*67）を、フォルダimg1-img3内に置く。
・切換えボタン用に各シリーズの表題を記した、サムネイルと同サイズの矩形画像（nav1.jpg-nav3.jpg）、及びロールオーバー時に表示するそれぞれの画像（nav1_2.jpg-nav3_2.jpg）をフォルダimages内に置く。
・写真表示部として、写真と同サイズの灰色（ここでは#777）矩形画像（screen.jpg）をフォルダimagesに置く。
本サンプル表示用HTML
<div id="stage"> <!-- 切換え用ラジオボタン --> <input id="r1" type="radio" name="b1"> <input id="r2" type="radio" name="b1"> <input id="r3" type="radio" name="b1"> <!-- 表示部スクリーン --> <div class="screen"><img src="images/screen.jpg"></div> <!-- シリーズ１ --> <div id="p1_1" class="t_img1"><a href="#p11"><img src="img1/s1.jpg"></a></div> <div id="p1_2" class="t_img1"><a href="#p12"><img src="img1/s2.jpg"></a></div> <div id="p1_3" class="t_img1"><a href="#p13"><img src="img1/s3.jpg"></a></div> <div id="p1_4" class="t_img1"><a href="#p14"><img src="img1/s4.jpg"></a></div> <div id="p1_5" class="t_img1"><a href="#p15"><img src="img1/s5.jpg"></a></div> <label for="r1"> <div class="item1_2"><img src="images/nav1_2.jpg"></div> <div class="item1"><img src="images/nav1.jpg"></div> </label> <div id="p11" class="photo1"><img src="img1/1.jpg"></div> <div id="p12" class="photo1"><img src="img1/2.jpg"></div> <div id="p13" class="photo1"><img src="img1/3.jpg"></div> <div id="p14" class="photo1"><img src="img1/4.jpg"></div> <div id="p15" class="photo1"><img src="img1/5.jpg"></div> <!-- シリーズ２ --> <div id="p2_1" class="t_img2"><a href="#p21"><img src="img2/s1.jpg"></a></div> <div id="p2_2" class="t_img2"><a href="#p22"><img src="img2/s2.jpg"></a></div> <div id="p2_3" class="t_img2"><a href="#p23"><img src="img2/s3.jpg"></a></div> <div id="p2_4" class="t_img2"><a href="#p24"><img src="img2/s4.jpg"></a></div> <div id="p2_5" class="t_img2"><a href="#p25"><img src="img2/s5.jpg"></a></div> <div id="p2_6" class="t_img2"><a href="#p26"><img src="img2/s6.jpg"></a></div> <div id="p2_7" class="t_img2"><a href="#p27"><img src="img2/s7.jpg"></a></div> <label for="r2"> <div class="item2_2"><img src="images/nav2_2.jpg"></div> <div class="item2"><img src="images/nav2.jpg"></div> </label> <div id="p21" class="photo2"><img src="img2/1.jpg"></div> <div id="p22" class="photo2"><img src="img2/2.jpg"></div> <div id="p23" class="photo2"><img src="img2/3.jpg"></div> <div id="p24" class="photo2"><img src="img2/4.jpg"></div> <div id="p25" class="photo2"><img src="img2/5.jpg"></div> <div id="p26" class="photo2"><img src="img2/6.jpg"></div> <div id="p27" class="photo2"><img src="img2/7.jpg"></div> <!-- シリーズ３ --> <div id="p3_1" class="t_img3"><a href="#p31"><img src="img3/s1.jpg"></a></div> <div id="p3_2" class="t_img3"><a href="#p32"><img src="img3/s2.jpg"></a></div> <div id="p3_3" class="t_img3"><a href="#p33"><img src="img3/s3.jpg"></a></div> <div id="p3_4" class="t_img3"><a href="#p34"><img src="img3/s4.jpg"></a></div> <div id="p3_5" class="t_img3"><a href="#p35"><img src="img3/s5.jpg"></a></div> <div id="p3_6" class="t_img3"><a href="#p36"><img src="img3/s6.jpg"></a></div> <label for="r3"> <div class="item3_2"><img src="images/nav3_2.jpg"></div> <div class="item3"><img src="images/nav3.jpg"></div> </label> <div id="p31" class="photo3"><img src="img3/1.jpg"></div> <div id="p32" class="photo3"><img src="img3/2.jpg"></div> <div id="p33" class="photo3"><img src="img3/3.jpg"></div> <div id="p34" class="photo3"><img src="img3/4.jpg"></div> <div id="p35" class="photo3"><img src="img3/5.jpg"></div> <div id="p36" class="photo3"><img src="img3/6.jpg"></div></div> |
本サンプル表示用CSS
body { background:#000; }/* ギャラリーの総枠 */#stage { max-width:1000px;margin:1% auto 0 auto;height:100%;position:relative;}/* ラジオボタンを非表示 */#r1,#r2,#r3 { display:none; }/* サムネイルの初期位置 */.t_img1,.t_img2,.t_img3 { position:absolute; width:10%;}.t_img1 { top:0;left:0; }.t_img2 { top:15%;left:0; }.t_img3 { top:30%;left:0; }/* サムネイルサイズを可変に */.t_img1 img,.t_img2 img,.t_img3 img { width:100%; }/* シリーズのタイトル設定 */.item1,.item2,.item3,.item1_2,.item2_2,.item3_2 { position:absolute; width:10%; color:#fff;}.item1,.item1_2 { top:0;left:0; }.item2,.item2_2 { top:15%;left:0; }.item3,.item3_2 { top:30%;left:0; }.item1:hover,.item2:hover,.item3:hover { cursor:pointer; }.item1 img,.item2 img,.item3 img,.item1_2 img,.item2_2 img,.item3_2 img { width:100%; }.item1 img:hover,.item2 img:hover,.item3 img:hover { opacity:0; }/* 写真表示部 */.screen { max-width:900px;margin-left:12%; }.screen img { width:100%; }/* サムネイル移動のtransition設定 */#p1_1 { transition:all 1s 0.4s ease-out ; }#p1_2 { transition:all 1s 0.3s ease-out ; }#p1_3 { transition:all 1s 0.2s ease-out ; }#p1_4 { transition:all 1s 0.1s ease-out ; }#p1_5 { transition:all 1s 0.0s ease-out ; }#p2_1 { transition:all 1s 0.6s ease-out ; }#p2_2 { transition:all 1s 0.5s ease-out ; }#p2_3 { transition:all 1s 0.4s ease-out ; }#p2_4 { transition:all 1s 0.3s ease-out ; }#p2_5 { transition:all 1s 0.2s ease-out ; }#p2_6 { transition:all 1s 0.1s ease-out ; }#p2_7 { transition:all 1s 0.0s ease-out ; }#p3_1 { transition:all 1s 0.5s ease-out ; }#p3_2 { transition:all 1s 0.4s ease-out ; }#p3_3 { transition:all 1s 0.3s ease-out ; }#p3_4 { transition:all 1s 0.2s ease-out ; }#p3_5 { transition:all 1s 0.1s ease-out ; }#p3_6 { transition:all 1s 0.0s ease-out ; }/* シリーズタイトルクリック時のイベント、サムネイルの移動設定 */#r1:checked ~ #p1_1,#r2:checked ~ #p2_1,#r3:checked ~ #p3_1 { top:101%;left:12%; }#r1:checked ~ #p1_2,#r2:checked ~ #p2_2,#r3:checked ~ #p3_2 { top:101%;left:22.3%; }#r1:checked ~ #p1_3,#r2:checked ~ #p2_3,#r3:checked ~ #p3_3 { top:101%;left:32.6%; }#r1:checked ~ #p1_4,#r2:checked ~ #p2_4,#r3:checked ~ #p3_4 { top:101%;left:42.9%; }#r1:checked ~ #p1_5,#r2:checked ~ #p2_5,#r3:checked ~ #p3_5 { top:101%;left:53.2%; }#r1:checked ~ #p1_6,#r2:checked ~ #p2_6,#r3:checked ~ #p3_6 { top:101%;left:63.5%; }#r1:checked ~ #p1_7,#r2:checked ~ #p2_7,#r3:checked ~ #p3_7 { top:101%;left:73.8%; }/* 別シリーズのクリック時に、表示されている写真を消す */#r1:checked ~ .photo2,#r1:checked ~ .photo3 { opacity:0; }#r2:checked ~ .photo1,#r2:checked ~ .photo3 { opacity:0; }#r3:checked ~ .photo1,#r3:checked ~ .photo2 { opacity:0; }/* 写真の初期設定、transition設定 */.photo1,.photo2,.photo3 { opacity:0; position:absolute; top:0; left:12%; max-width:900px; transition:all 1s ease-out;}/* クリックされた該当写真を表示 */:target { opacity:1;}/* 写真サイズを画面に合わせて可変に */.photo1 img,.photo2 img,.photo3 img { width:100%;} |
CSSのポイント説明
・ギャラリー表示の総枠(#stage)は、幅のMaxが1000pxとしているが、作成ページによって調整する。
・#stage内に切換えボタン、スクリーン、サムネイル、写真をposition:absolute;で配置する。
サムネイル、写真は、すべて同じ位置に重ねて配置する。
・ボタン、サムネイル、写真のサイズは%指定とする（画面サイズに対応させるため）。
・marginの指定も％指定とする。
ソースを参照さていただいています。ただ <a href="#p**" rel="nofollow">の使い方がわかりません。
お手数でしょうがご教示くださればありがたいです。
伊達さんこんにちは。
rel=”nofollow ？ どこにありますか？
a href="#p**" は、#P*_*（サムネイル）をクリックすると、#p**（大きな写真）を表示するという使い方です。どのサムネイルがクリックされたかを :target で感知するための手法です。
ソースのhtmlについて質問があります。labelの<div id="p11" はどこから来たのでしょうか。また、下に表示される画像をクリックしても、画像がscreenに表示されないのですが、どこに問題があるかわかりますか？
申さんこんにちは。
＞labelの<div id="p11" はどこから来たのでしょうか。
ご質問の趣旨がよくわかりません。もう少し説明してください。
＞画像をクリックしても、画像がscreenに表示されない
１．html、cssに記述ミスがないかどうか確認してください。
２．画像用ファイルが、srcで引用した場所（フォルダ）にあるかどうか確認してください。
ありがとうございます。もう一度確認してみます
Your answer shows real ineillegenct.
Great thanks.
いつも参考にさせていただいています。
ease-outがIEだとうまく動作しないのですが、どうしたらよいでしょうか。
お手すきの時がありましたらよろしくお願いします。
IEだとうまく動作しない、と言うこと自体、私には判然としませんし、
IEの特性だとしたら、申し訳ありませんが、私にもわかりません。