サムネイル移動表示・Fade-In型フォトギャラリー

 これまで、サムネイルの数が5つの場合についてサンプルを作成してきた。もっとスライドの数が増えた場合(この例では10枚)の対処として、サムネイルが左右に移動して全部が現れるようにし、サムネイルのマウスオーバー時に、サムネイルの移動が止まるようにしたタイプのフォトギャラリーである。  もちろん、サムネイルのサイズを落としたり、サムネイルを2段に表示したりすれば解決するのだが、場合によっては、このようなスタイルもありうるのではないかと思い作成した。

サンプル(DEMO)



本サンプル表示用HTML

<div id="stage" style="clear:all;">
  <img style="width:100%" src="wp-images/img/4.jpg">
  <div id="photo1" class="photo"><img src="wp-images/img/1.jpg"></div>
  <div id="photo2" class="photo"><img src="wp-images/img/2.jpg"></div>
  <div id="photo3" class="photo"><img src="wp-images/img/3.jpg"></div>
  <div id="photo4" class="photo"><img src="wp-images/img/4.jpg"></div>
  <div id="photo5" class="photo"><img src="wp-images/img/5.jpg"></div>
  <div id="photo6" class="photo"><img src="wp-images/img/6.jpg"></div>
  <div id="photo7" class="photo"><img src="wp-images/img/7.jpg"></div>
  <div id="photo8" class="photo"><img src="wp-images/img/8.jpg"></div>
  <div id="photo9" class="photo"><img src="wp-images/img/9.jpg"></div>
  <div id="photo10" class="photo"><img src="wp-images/img/10.jpg"></div>
  <div style="padding:0 0 7px 0;"></div>
  <div id="thumbs">
  	<a href="#photo1"><img src="wp-images/img/s1.jpg"></a>
  	<a href="#photo2"><img src="wp-images/img/s2.jpg"></a>
  	<a href="#photo3"><img src="wp-images/img/s3.jpg"></a>
  	<a href="#photo4"><img src="wp-images/img/s4.jpg"></a>
  	<a href="#photo5"><img src="wp-images/img/s5.jpg"></a>
  	<a href="#photo6"><img src="wp-images/img/s6.jpg"></a>
  	<a href="#photo7"><img src="wp-images/img/s7.jpg"></a>
  	<a href="#photo8"><img src="wp-images/img/s8.jpg"></a>
  	<a href="#photo9"><img src="wp-images/img/s9.jpg"></a>
  	<a href="#photo10"><img src="wp-images/img/s10.jpg"></a>
  </div>
</div>

HTMLのポイント説明

・表示用の写真にid(photo1,photo2,,,)を付け、サムネイル画像からリンクを貼っている。
・CSSで、クリックされたサムネイルを :target で認識し該当する写真を opacity:1; で表示させる。

本サンプル表示用CSS

/*ギャラリー全体のコンテナー*/
#stage {
	position: relative;
	background:#ccc;
	max-width: 600px;
	margin: 0 auto;
	overflow:hidden;
}
/*全サムネイルのコンテナー animation設定*/
#thumbs {
	width: 200%;
	left: -45%;
	animation:recipro ease 12s infinite;
}
/*サムネイルのマウスオーバーでポインターを手のひら*/
#thumbs:hover {
	animation-play-state:paused;
}
#thumbs img {
	width:9.6%;
}
/*表示写真の初期配置(全部透明に)とtransition(fade)設定*/
.photo {
	position: absolute;
	left: 0;
	top: 0;
}
.photo img {
	width:100%;
	opacity: 0;
	-webkit-transition: opacity 1s ease;
	-moz-transition: opacity 1s ease;
	-o-transition: opacity 1s ease;
	transition: opacity 1s ease;
}
/* クリックされたサムネイルの対応写真を表示 */
.photo:target > img {
	opacity:1; 
}

/* サムネイル群の左右往復animation */
@keyframes recipro {
	0% { margin-left:0%; }
	50% { margin-left:-98%; }
	100% { margin-left:0%; }
}

CSSのポイント説明

・写真を表示させる枠の下に、サムネイルを水平に一列に並べる(#thumbs)。
・#thumbsをanimationで、左右に往復移動させる。
・#thumbsのマウスオーバーで、動きを止める(animation-play-state:paused;)。
・クリックされたサムネイルに相当する写真(.photo:target)のopacityを1にして、その写真を表示させる。
・写真の表示は、transitionの設定で、フェイドイン効果が付与される。

コメント

サムネイル移動表示・Fade-In型フォトギャラリー — 2件のコメント

  1. CSS初心者の為、つかぬ事をお聞きするようで大変申し訳ありませんが
    サムネイル移動表示・Fade-In型フォトギャラリーの形で表示された画像に
    対してリンクを貼る事などは出来るのでしょうか?
    <a href="URL" rel="nofollow"></a>
    では機能しませんでした。
    この場合どういったタグを差し込めば可能でしょうか?

    •  このFadeIN/OUT型では、全てのスライドをopacity:0にして重ねて配置し、クリックされたされたサムネイルに該当するスライドをopacity:1にして表示させています。
       したがって、このままですと、一番上にあるスライド(10.jpg)だけがクリックに反応することになります。次のように、cssを書き換え、HTMLでリンクを貼ります。
      CSS:
       .photo:target { z-index:100; } を追加
       .photo内に、z-index:10;を追加
       .photo {
      position: absolute;
      left: 0;
      top: 0;
      z-index:10;
       }
      HTML:
       以下のようにリンクを貼る。
       <a href="http://www.yahoo.co.jp" rel="nofollow"><div id="photo1" class="photo"><img src="img2/1.jpg"></div></a>

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

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

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