サムネイル移動表示・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型フォトギャラリー — 9件のコメント

  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>

  2. 自己紹介ホームページ作成やサークル紹介ホームページ作成のために本ホームページのソースコードを参考にさせていただいてます。お世話になっております。とてもありがたいです。

    • まっちゃん、こんにちは。

      当サイトを参考にしていただいてありがとうございます。
      いいホームページの作成にお役に立てれば幸いです。

  3. ソースを今回初めて使わせていただきました。css初心者です。
    サムネイルのマウスポインタが表示されないのでクリックできないのですが
    どうしてでしょうか?

    • anationさん、初めまして。

      どうしてでしょうね。
      サムネイルは、移動していて、マウスがのると止まりますか?
      いずれにしろ、どこか記述に間違いがあるとしか申し上げようがありません。
      もう一度、記述を見直してください。

  4. css初心者なのですが、画像が大きいものも、中ぐらいなものも表示サイズを統一させたいのですが画像を枠内で表示サイズを収めるにはどう記述したらいいのでしょうか

    • このサンプルは、レスポンシブ(画面サイズ対応)になっていて、
      .photo img { width:100%; } となっています。
      例えば、width:600px; とすれば、画像サイズを一定にできます。

      それよりも、あらかじめ画像サイズを同一にできないのでしょうか。

      • イラストなどもあるのでなるべく画像は生のまま画像変更せずに保存したいのです。
        ありがとうございました確認してみます

tyosbb へ返信する コメントをキャンセル

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