フェイドイン型フォトギャラリー(レスポンシブ)

 以前に投稿した「フェイドイン型フォトギャラリー」のレスポンシブ対応型である。  拡大写真の大きさが、画面サイズに対応して600px以下で縮小するようにした。

レスポンシブ対応フェイドイン型フォトギャラリーサンプル



本サンプル表示用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">
  <img style="width:100%" src="wp-images/1.jpg">
  <div id="photo1" class="photo"><img src="wp-images/1.jpg"></div>
  <div id="photo2" class="photo"><img src="wp-images/2.jpg"></div>
  <div id="photo3" class="photo"><img src="wp-images/3.jpg"></div>
  <div id="photo4" class="photo"><img src="wp-images/4.jpg"></div>
  <div id="photo5" class="photo"><img src="wp-images/5.jpg"></div>
  <div style="padding:0 0;"></div>
  <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>

HTMLのポイント説明

・初期画面に1枚目の写真を表示している。
・サムネイルが、拡大写真の下に並ぶように、#thumbsをposition指定なしに、タグの下部に記述。
・このギャラリーの下に、他の要素を表示させる場合は、単に、このhtmlに続けて記述すればよい。

本サンプル表示用CSS

/*ギャラリー全体のコンテナー*/
#stage {
	position: relative;
	max-width: 600px;
	margin: 0 auto;
}
/*全サムネイルのコンテナー*/
#thumbs {
	margin-left:2%;
}
/*サムネイルの幅、ポインターを手のひら*/
#thumbs label img {
	width:18.5%;
	cursor: pointer;
}
/*ラジオボタンを非表示に*/
#r1, #r2, #r3, #r4, #r5 {
	display: none;
}
/*表示写真の初期配置(全部透明に)とtransition設定*/
.photo {
	position: absolute;
	left: 0;
	top: 0;
}
.photo img {
	width:100%;
	opacity: 0;
	-webkit-transition: opacity 1s ease;
	transition: opacity 1s ease;
}
/*チェックされたサムネイルに相当する写真だけを表示*/
#r1:checked ~ #photo1 img, #r2:checked ~ #photo2 img, #r3:checked ~ #photo3 img, #r4:checked ~ #photo4 img, #r5:checked ~ #photo5 img {
	opacity: 1;
}

CSSのポイント説明

・#stageに、max-width を、拡大写真とサムネイルは、%指定のwidthを指定
・heightは全て無記述

コメント

フェイドイン型フォトギャラリー(レスポンシブ) — 29件のコメント

  1. 初めまして。
    CSSの素晴らしいアイデアにいつも拝見し感動してます。
    難しいことは解りませんので申し訳ないと思いつつ、
    コスペでとっても便利に利用させて頂いております。
    丁寧な解説、本当に感謝です。ありがとうございます。

    • yumikoさん、はじめまして。
      あたたかいお言葉ありがとうございます。
      お役に立てば幸いです。
      最近、アイデアは浮かんでもなかなか進まない状態ですが、yumikoさんのお言葉を励みに、また、頑張っていきます。

  2. お世話になっています。
    こちらのスライドショーがすごく使いやすかったので、コピペで使用させていただきました。
    ありがとうございます。本当に助かっています。
    ひとつ質問ですが、同じページ内にスライドショーを複数の場所に入れることができますか?
    例えば、上部に5枚で下部2枚でタイミングを変えて表示したり、上部はフェイドイン下部はスライドインにするなどをしたいと考えております。
    2つのcssのソースをコピペし、後に追加入力したほうが表示されるしまうため困っています。
    どのように入力すれば2つとも別々のタイミングで表示されるのか教えていただくと大変助かります。
    よろしくお願いします。

    • この項は、スライドショーではありませんが、ギャラリーでも同じなので、ご質問にお答えします。
      このサイトでは、各項に共通したネイミングで、HTML、CSSを記述しています。
      したがって、コピペしたままだと、二つのスライドショーに混戦が起こります。
      二つ目の記述を、例えば、#stage を、#stage2 などと違うネイミングにしてください。HTML、CSSいずれもです。これで、解決するはずです。

  3. はじめまして。素晴らしいアイデアと解説ををいつも参考にさせていただいております。
    こちらのギャラリーなのですが、拡大画像の下などに1~2行程度のキャプションを付けることは可能でしょうか。
    各サムネイルをクリックするとそれぞれの画像に付けられたキャプションも切り替わるものになります。
    お手数でなければ、ご教示のほどよろしくお願いいたします。

    • はじめまして。
      可能です。
      まず、キャプションを次のようにそれぞれのphotoについて挿入します。
      <div id="photo1" class="photo"><img src="img2/1.jpg"><span>キャプション1</span></div>
      次に、挿入場所を開けるため、
      <div style="padding:0 0;"></div> を、<div style="padding:0 0 25px 0;"></div> に代えます。
      次に、CSSで以下を挿入します。
      .photo span { display:none; }
      #photo1 span { display:block; }
      #r1:checked ~ #photo1 span { display:block; }
      #r2:checked ~ #photo2 span { display:block; }
      #r3以降も同様。
      なお、キャプションの位置やスタイルは、cssで好みのように設定してください。

      • お世話になります。
        上記の方法でキャプションを入れることができたのですが、
        2枚目以降の画像を表示した場合に、1枚目のキャプションが残っていて、
        そこに2枚目以降のキャプションが」重なってしまいます。
        これを回避する方法はないでしょうか?
        どうぞよろしくお願い致します。

        • 確かにそうでしたね。ご迷惑かけました。
          CSSで、クリック時に他のキャプションを消さないといけません。
          以下の記述に代えてください。

          .photo span { display:none; }
          #photo1 span { display:block; }
          #r1:checked ~ .photo span,#r2:checked ~ .photo span,#r3:checked ~ .photo span,#r4:checked ~ .photo span,#r5:checked ~ .photo span { display:none; }
          #r1:checked ~ #photo1 span { display:block; }
          #r2:checked ~ #photo2 span { display:block; }
          #r3:checked ~ #photo3 span { display:block; }
          #r4:checked ~ #photo4 span { display:block; }
          #r5:checked ~ #photo5 span { display:block; }

  4. 先日よりお世話になっております。
    二つ目のフォトギャラリーに取り掛かっており、
    恐れ入りますが再度お助けいただけると幸いです。

    こちらのフェイドイン型フォトギャラリーをサイト埋め込み、
    それぞれの写真をクリックすると大きな画面にきちんと出てきます。
    ですがなぜかサムネイルが縦1列にならび、横にならんでくれません。

    #thumbs label img へ float: left; を追加してみましたが、解決できず。。
    もしかするとウェブサイト本体へのCSSが邪魔してしまっているのかもしれませんが、
    なんとかフォトギャラリーだけでも限定して変更することは可能でしょうか?

    すみませんが、お知恵をお貸しいただけると幸いです。
    どうぞ宜しくお願いいたします。

    • どうしてでしょうかね。
      #thumbs に、float:left !important; を追加したらいかがでしょうか。

      どうしてもだめなら、#thumbsに、display:table;、labelに、display:table-cell; を設定して横並びにする方法もあるかと思います。

      • オーナー様

        早速のご返答ありがとうございました。
        昨日から仰るとおりにやってみているのですが、どうにもならず仕舞いです。
        サーバーにアップしているのですが、会社のサイトのためこちらでの公開はいたしかねます。
        もし宜しければ、メールのやりとりでコードを見ていただくことは可能でしょうか?

        どうぞ宜しくお願いいたします。

        • ファイルを添付して、tyosbb@ybb.ne.jp 宛にメールください。確認してみます。
          ただし、貴サイト環境での現象であれば、こちらでは分かりかねますのでご了承ください。

  5. 初めまして。
    こちらのフォトギャラリーを使わせて頂きました。css歴1ヶ月と未熟者で分からない事だらけですが、何とか設置出来ました。ありがとうございます。
    いくつか質問があります。
    サムネイル画像に、現在選択(表示)されている画像が見た目で分かるような表示。
    クリックではなくマウスオーバーで。
    といった事が出来ますでしょうか?

    すみませんが、宜しくお願い致します。

    • minさん、はじめまして。
      当サイトをご活用くださりありがとうございます。

      >サムネイル画像に、現在選択(表示)されている画像が見た目で分かるような表示。
      クリックではなくマウスオーバーで。
      とありますが、ご趣旨が今一つはっきりしません。もう少し具体的に書いてもらえませんか?

      • 言葉足らずですみません。
        サムネイルに枠を付けられるかと、いう事です。初期表示は一番目の画像にのみ付いていて、クリックしたらクリックした画像に枠が付くといった感じです。

        マウスオーバーは、クリック型ではなくサムネイル部分にマウスを乗せると画像が変わるホバーエフェクトでという事です。

        勉強不足で申し訳ないのですが、再度考察頂けると幸いです。

        • よくわかりました。
          以下のページに示しました(「」を外したURLのみをブラウザに貼りつけてください)
          「http://css.programming.jp/pages/thumb_hover_fade_responsive.html」

          HTML、CSSをご覧になればわかると思います。
          ただし、初期状態で枠をつけることができていませんのご了承ください。

          • ありがとうございます。
            ページ拝見し、早速設置して良い感じになったので嬉しいです。
            他にも使ってみたいものがあるので、また利用させて下さい。
            ありがとうございました!

  6. 初めまして。WEB作成初心者です。こちらのフォトギャラリーを使用させて頂き、他のページも参考にさせて頂いております。ありがとうございます。
    ひとつ質問させて下さい。
    本当に初心者な質問で申し訳ないのですが、こちらのフォトギャラリーをtable要素やbox要素などで囲んでレイアウトしたいのですが、可能でしょうか?何度か挑戦しているのですが、paddingやmarginでしか位置調整出来ず、行き詰っております。
    厚かましいお願いですが、何卒お知恵を拝借出来ればと存じます‥。

    • emyさん、はじめまして。
      さて、本div(#stage)をtable要素の<td>  </td>内に挿入すれば、そのまま表示されるはずです。
      table要素に入れるということは、他のセル内の要素と並べたりしてレイアウトするということだと思うのですが、
      そのtableやtdにCSSが定義されていれば、その影響を受けることになります。

      どういう不具合なのかが、いまひとつわかりませんので、、、、

  7. tyosbb様。早速のご返信ありがとうございます。
    仰る通り別のcssからの影響が原因でした。白紙の状態から作り直した所、無事にレイアウト出来そうです。ありがとうございました。
    すみません。あと一点質問なのですが、こちらのcssとhtmlを使わせて頂いているのですが、最初の写真が消えず、その上にクリックした画像が表示されてしまいます。上記の質問欄に似たようなやり取りがありましたので、そちらのCSSの記述も追加してみたのですが、やはり消えません。
    (キャプションと書いてあるので、画像とは違うのかもしれません)
    お手隙の時で構いませんのでご教示頂ければと思います。よろしくお願いいたします。

    • レイアウトが解決してよかったですね。
      さて、最初の写真は下敷きのようなもので、消えません。
      しかし、他の写真が上に乗るので、見えなくなり不自然ではないはずですが。
      (キャプションの項は、関係ありません。キャプションは、メモ書きのような説明文です。)
      どのような不具合があるのでしょうか?
      最初の写真は、初期画面に何も表示されていないのが寂しいので表示させています。
      同じサイズの、例えば黒色のスクリーン画像を表示させておいて、そこに説明文などを書いておくのもいいかもしれません。

      • 元々消えないものなのですね。
        当方としての不具合なのですが、縦横比の違うサイズの画像を表示させているので、クリックした画像の下から、下敷き画像が横や下などから見えてしまう事です。
        黒色のスクリーンで対応‥も、やはり見えてしまいますよね。画像サイズは統一しないと無理でしょうか。

        • 消えるようにできなくもないのですが、手っ取り早いのは、
          背景色と同じ色のスクリーンを置くことです。

  8. なるほど!そんなやり方もあるのですね。たびたびご返信頂いて感謝しております。

    さきほど、レスポンシブではない方のフェイドイン型フォトギャラリーを参考にしまして、文字を画像に差し替えた所、うまく行きました!
    このようなやり方を公開して頂いた上、ご相談にも乗って下さり感謝のしようもございません。
    ありがとうございます。

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

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

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