複数シリーズ切換え型ギャラリー

 複数シリーズのサムネイル群を、ボタンクリックで切り替え、サムネイルのクリックで写真がFadeIn表示されるタイプのギャラリーである。
 サムネイル群が、切換えボタンの位置から、表示位置まで舞い降りるアニメーションを付加した。

SAMPLE

  こちらの別ページに示した。

作成準備

・各シリーズ(ここでは3シリーズ)の写真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>
  <!-- シリーズ1 -->
  <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>
  <!-- シリーズ2 -->
  <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>
  <!-- シリーズ3 -->
  <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の指定も%指定とする。


コメント

複数シリーズ切換え型ギャラリー — 7件のコメント

  1. ソースを参照さていただいています。ただ &lt;a href="#p**" rel="nofollow"&gt;の使い方がわかりません。
    お手数でしょうがご教示くださればありがたいです。

    • 伊達さんこんにちは。
      rel=”nofollow ? どこにありますか?
      a href="#p**" は、#P*_*(サムネイル)をクリックすると、#p**(大きな写真)を表示するという使い方です。どのサムネイルがクリックされたかを :target で感知するための手法です。

  2. ソースのhtmlについて質問があります。labelの&lt;div id=&quot;p11&quot; はどこから来たのでしょうか。また、下に表示される画像をクリックしても、画像がscreenに表示されないのですが、どこに問題があるかわかりますか?

    • 申さんこんにちは。
      >labelの&lt;div id=&quot;p11&quot; はどこから来たのでしょうか。
      ご質問の趣旨がよくわかりません。もう少し説明してください。

      >画像をクリックしても、画像がscreenに表示されない
      1.html、cssに記述ミスがないかどうか確認してください。
      2.画像用ファイルが、srcで引用した場所(フォルダ)にあるかどうか確認してください。

Jessie にコメントする コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>