左右スライド型フォトギャラリー

投稿日: 作成者:

画面下部に配置されたサムネイルをクリックすると、画面に表示された写真が左右にスライドして、サムネイルに該当する写真を表示するタイプのフォトギャラリー。表示写真は、最初に並べた順が変わらないので現表示写真から離れている写真ほど早いスピードで移動する。
css の transition プロパティーを使った例である。サムネイル用の小さなサイズの写真と、表示用の写真は別々のものを用意し使う。





本サンプル表示のHTML

<div id="stage">
  <input type="radio" id="r1" name="gal">
  <input type="radio" id="r2" name="gal">
  <input type="radio" id="r3" name="gal">
  <input type="radio" id="r4" name="gal">
  <input type="radio" id="r5" name="gal">
  <div id="thumbs">
    <label for="r1"><img src="wp-images/s1.jpg"></label>
    <label for="r2"><img src="wp-images/s2.jpg"></label>
    <label for="r3"><img src="wp-images/s3.jpg"></label>
    <label for="r4"><img src="wp-images/s4.jpg"></label>
    <label for="r5"><img src="wp-images/s5.jpg"></label>
  </div>
  <div id="photos">
    <div id="photo1"><img src="wp-images/1.jpg"></div>
    <div id="photo2"><img src="wp-images/2.jpg"></div>
    <div id="photo3"><img src="wp-images/3.jpg"></div>
    <div id="photo4"><img src="wp-images/4.jpg"></div>
    <div id="photo5"><img src="wp-images/5.jpg"></div>
  </div>
  <div id="cover_left"></div>
  <div id="cover_right"></div>
</div>

HTML概要説明

・ラジオボタンの設置と、サムネイルをlabelで関連付け・配置するところは、前項のスライドイン型と同じ。
・全ての表示写真（photo1,,,photo5）をphotosというdivision の中に入れる。
　（cssで横に一列に並べ帯状にし、これを左右に移動させて写真を切り替える）
・写真両脇のスペースに表示される他の写真を隠すカバーを配置する。

本サンプル表示のCSS

/*ギャラリー全体のコンテナー*/
#stage {
    position: relative;
    width: 660px;
    height: 440px;
    margin: 0 auto;
    overflow: hidden;
}
/*全サムネイルのコンテナー*/
#thumbs {
    position: absolute;
    width: 630px;  
    top: 360px;
    left: 20px;
}
/*サムネイルのマウスオーバーでポインターを手のひらに*/
#thumbs label img {
    cursor: pointer;
}
/*全表示写真のコンテナー*/
#photos {
    position:absolute;
    top:10px;
    left:30px;
    width:3000px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
/*表示写真をphotosの中に横並びで一列に並べる*/
#photo1, #photo2, #photo3, #photo4, #photo5 {
    position:relative;
    float:left;
}
/*ラジオボタンを非表示に*/
#r1, #r2, #r3, #r4, #r5 {
    display: none;
}
/*チェックされたサムネイルに相当する写真が画面中央になるようにphotosを移動*/
#r1:checked ~ #photos {
    left:30px;
}
#r2:checked ~ #photos {
    left:-570px;
}
#r3:checked ~ #photos {
    left:-1170px;
}
#r4:checked ~ #photos {
    left:-1770px;
}
#r5:checked ~ #photos {
    left:-2370px;
}
/*スクリーン左右のカバー*/
#cover_left,#cover_right {
    position:absolute;
    top:0;
    width:30px;
    height:348px;
    background-color:#FFF;
}
#cover_left {
    left:0;
    z-index:100;
}
#cover_right {
    left:630px;
    z-index:101;   
}

CSSのポイント説明

・全表示写真を格納したphotosを、１番目の写真が画面表示されるように配置する（left:30px）。
・２番目以降の写真の位置を隙間なく右方向に並ぶように photos 内の left 値をそれぞれに設定する。
・サムネイルがチェックされた時に該当写真が画面中央に来るように、photosの位置をそれぞれに設定する。
・画面両脇のスペースをカバーする矩形を背景色で配置する。

Share on Google+
share

コメント

左右スライド型フォトギャラリー — 10件のコメント

  1. こんにちわ。
    左右スライド型フォトギャラリーを参考にさせていただきたいと思うのですが、サムネイル画像をクリックしていない時は、メインの大きな画像部分を自動でスライドショーさせるといったことも技術的にできるのでしょうか？

    返信 ↓

  2. sunnyさん、こんにちは。
    スライダー（スライドショー＆ボタン送り）では、左右送りボタンによるスライド移動とスライドショーを混在させています。こちらのケースにも参考になると思います。

    ただし、cssではスライドショーがどちらの方向に移動しているかは判別できませんから、サムネイルクリックで、一方向（後で示すケースでは左から右）への移動となります。また、スライドショーでは、animationを使いますから、サムネイルクリックでのスライド移動は一枚前のスライドからの移動になります。

    htmlとcssの記述はとてもシンプルになりますが、ここで説明すると長くなりますので、サンプルを下記ページに載せましたので、そのソースを見てください。ソースを見れば理解できると思います。
    「http://css.programming.jp/pages/slider_slide2_slideshow.html」
    （「　」　は、外してください。）

    返信 ↓

  3. こんにちは。
    こちらのコメント欄の初期アニメーションつきサムネイルクリック型のスライドショーをサイズ等変えて使用させていただいております。
    質問なのですが、この『初期アニメーションつきサムネイルクリック型のスライドショー』をレスポンシブ対応にできないでしょうか？

    自分でやってみたのですがサムネイルの表示がうまくできませんでした（サムネイルが全く表示されない、見えない状態です）。

    返信 ↓

    • さたさん、こんにちは。
      どのようにおやりになっているか、こちらでは分かりませんが、
      <div style="padding:28%;"></div>
      と言う記述を使っていませんか。もしお使いなら、28->40とかに数値を変えてみてください。

      返信 ↓

      • すみません。
        解決しました。
        サムネイルのコンテナの位置をTOPから％で指定したら丁度いい感じになりました。
        お騒がせしました。

        返信 ↓

  4. 先ほど別ページでコメントさせていただきました。
    こちらのページを発見したので解決しました。
    ちなみにこちらはレスポンシブ対応にはならないのでしょうか？
    ご教授をお願いします。

    返信 ↓

    • Lizさんこんばんは。
      このページのまま、レスポンシブにすればよいのですね。
      以下のページに掲載しました。HTML、CSSを併記していますので、参考にしてください。
      　http://css.programming.jp/pages/thumb_click_slide_bothside_responsive.html

      返信 ↓

コメントを残す

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