フェイドイン型フォトギャラリー

投稿日: 作成者:

ステージ下部に配置されたサムネイルをクリックすると、メイン画面に写真がフェイド・インして表示されるタイプのフォトギャラリーであり、css の transition プロパティーを使った例である。サムネイル用の小さなサイズの写真と、表示用の写真は別々のものを用意し使う。

サンプル





針ノ木岳から爺ヶ岳への縦走路にて

本サンプル表示のHTML

<div id="stage"><input id="r1" type="radio" name="gal" />
  <input id="r2" type="radio" name="gal" />
  <input id="r3" type="radio" name="gal" />
  <input id="r4" type="radio" name="gal" />
  <input id="r5" type="radio" name="gal" />
  <div id="thumbs">
    <label for="r1"><img alt="" src="wp-images/s1.jpg" /></label>
    <label for="r2"><img alt="" src="wp-images/s2.jpg" /></label>
    <label for="r3"><img alt="" src="wp-images/s3.jpg" /></label>
    <label for="r4"><img alt="" src="wp-images/s4.jpg" /></label>
    <label for="r5"><img alt="" src="wp-images/s5.jpg" /></label>
  </div>
  <div id="screen"><span id="title">針ノ木岳から爺ヶ岳への縦走路にて</span></div>
  <div id="photo1"><img alt="" src="wp-images/1.jpg" /></div>
  <div id="photo2"><img alt="" src="wp-images/2.jpg" /></div>
  <div id="photo3"><img alt="" src="wp-images/3.jpg" /></div>
  <div id="photo4"><img alt="" src="wp-images/4.jpg" /></div>
  <div id="photo5"><img alt="" src="wp-images/5.jpg" /></div>
</div>

HTMLの概要説明

・ラジオボタンを写真の枚数分配置し、idをr1,r2,,,r5とする。
・サムネイル写真をラジオボタンのラベルとして配置し、for= を使って関連付ける。
　（サムネイルをクリックすると、該当するラジオボタンがチェックされたことになる）
・表示させる写真をstage中央に全部重ねて配置する。
　（cssで全部透明にして非表示にする）

本サンプル表示のCSS

/*ギャラリー全体のコンテナー*/
#stage {
    position: relative;
    width: 660px;
    height: 440px;
    margin: 0 auto;
}
/*全サムネイルのコンテナー*/
#thumbs {
    position: absolute;
    width: 630px;  
    top: 360px;
    left: 20px;
}
/*サムネイルのマウスオーバーでポインターを手のひらに*/
#thumbs label img {
    cursor: pointer;
}
/*初期画面*/
#screen {
    position: absolute;
    left: 30px;
    top: 10px;
    width: 600px;
    height: 338px;
    background-color: #CCC;
}
/*初期画面上の文字*/
#screen span {
    position:absolute;
    top:130px;
    left:50px;
    font-size:32px;
}
/*ラジオボタンを非表示に*/
#r1, #r2, #r3, #r4, #r5 {
    display: none;
}
/*表示写真の初期配置（全部透明に）とtransition設定*/
#photo1, #photo2, #photo3, #photo4, #photo5 {
    position: absolute;
    left: 30px;
    top: 10px;
    opacity: 0;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
/*チェックされたサムネイルに相当する写真だけを表示*/
#r1:checked ~ #photo1, #r2:checked ~ #photo2, #r3:checked ~ #photo3, #r4:checked ~ #photo4, #r5:checked ~ #photo5 {
    opacity: 1;
}
/*どれかがチェックされたらスクリーン上の文字を非表示に*/
#r1:checked ~ #screen, #r2:checked ~ #screen, #r3:checked ~ #screen, #r4:checked ~ #screen, #r5:checked ~ #screen {
    opacity: 0;
}

CSSの説明

・表示させる写真（photo1 – photo5）の初期配置時の透明度（opacity）を 0 としておく
・それぞれの写真に、transition propaty をセットしておく(transition: all 1s ease;）
　（ここでは要素として透明度しかないので、allはopacityでも可）
・#r1:checked ~ #photo1 { opacity:1;}　は、
1番目のラジオボタン（サムネイル）がクリックされたら、1番目の写真の透明度を1秒掛けて1にするという意。

Share on Google+
share

コメント

フェイドイン型フォトギャラリー — 7件のコメント

  1. 某有名ネットショッピングサイトに初出店するものです。
    検索にてこちらにたどり着き、早速タグを使わせていただきました。
    ありがとうございました。
    ページ作成は初心者で、初歩の初歩の初歩くらい(以下だとは思いますが)しか知識もありません。
    フェイドイン、アウトのスライドショーにプラス、サムネイルを付けて、サムネイルをクリックでその画像が大きくスライド部分に表示されるようにしたいのですが、どう組み合わせればいいのか皆目見当もつきません。
    ご教授いただけないでしょうか。
    よろしくお願いいたします。

    返信 ↓

    • N.Tさん初めまして。
      確かにこのサイトにあってもいいようなスタイルのスライドショーですね。

      このサイトの、フェイドインアウト型のスライダー（スライドショー＆送りボタン）が参考になると思います。送りボタンの代わりに、サムネイルを関連付ければいいわけです。

      時間ができれば、なるべく早く作成して、一項目として投稿したいと思います。

      返信 ↓

      • N.Tさん
        サンプルを作り、投稿しました。
        どのようなタイプにするか迷いましたが、SlideShowボタンを設けるシンプルなタイプにしました。

        返信 ↓

  2. 初めまして、いつも参考にさせていただいております。

    『Ie（及び最近のFirefox）向けのＣＳＳ記述になっていて、Chrome 向けには、ベンダープレフィックス(-webkit-)をつけた記述を加える必要がある。』
    とのことですが、

    Ie（及び最近のFirefox）と、Chromeの両方に
    対応させる方法はあるでしょうか。
    よろしくお願い致します。

    返信 ↓

    • Nさんこんにちは。
      両方に対応させるには、両方向けの記述をすればよいということです。
      他の例を見てください。ここでは長ったらしくなるので、省略しているということです。

      他の例では、例えば、以下のように両方の記述をしています。
      -webkit-animation: expand 2s ease;
      animation: expand 2s ease;

      返信 ↓

コメントを残す

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