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

 以前に投稿した「フェイドイン型フォトギャラリー」のレスポンシブ対応型である。  拡大写真の大きさが、画面サイズに対応して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は全て無記述

コメント

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

  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. なるほど!そんなやり方もあるのですね。たびたびご返信頂いて感謝しております。

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

  9. 初めまして。
    今回、こちらのフォトギャラリーを使用させて頂きました。
    素晴らしいアイディアを教えて頂き、本当に感謝しております。

    早速で申し訳ありませんが、ご質問させて下さい。

    今回使用している画像サイズが全て異なっており、
    checkedが入った場合に、親要素を透過設定しました。

    しかし、親要素のサイズが基準で表示されるので、
    レスポンシブした時に、はみ出したり余分な空白が出来ます。

    親要素を基準としている事は理解しておりますが、
    checkedが入った場合に、親要素ではなく
    absoluteのサイズに合わせて高さを可変する方法、
    またはそれに近い方法がありましたらご教授頂けないでしょうか?

    宜しくお願い致します。

    • こんにちは。

      ご質問の内容が十分理解できていないかもしれませんが、
      <img style="width:100%" src="img2/1.jpg">と言う記述をやめて、
      <div style="padding:0 0 25px 0;"> を、
      <div style="padding-top:60%;"> に代えると、高さが可変になります。
      60%は、表示を見ながら、適した値に変えてください。

      • 早速のご解答ありがとうございます。
        書き方が分かりづらく、大変申し訳ありませんでした。



        ②の画像サイズが①より小さいと、①②のheightの差分、②と③の間に余白がある様に見えるのを解消したいです。

        これは、やはり①と②の画像サイズは同じにしないと、難しいでしょうか?

        お手間を取らせて申し訳ございませんが、もし良い案がありましたらご教授お願い致します。

        • 余白が生じますが、それをどうしたいのでしょうか?

          .photo のcssに、width:100%; を加えますと、幅はサイズの大小にかかわらず、いっぱいに表示されます。
          ただし、スライドによって縦横比が違ってくると、高さはバラバラになり、高さが小さいものは、余白が生じます。余白の部分に見えるのは、③ではなく、
          <img style="width:100%" src="img2/1.jpg"> で指定した写真です(ここでは①)。
           したがって、この記述を削除し、代わりに同サイズの無地の四角形画像を表示すれば、それがスクリーンになって、余白はそれの一部が見えることになります。いかがでしょう。

          • ご解答ありがとうございます。

            「縦横比が違うので、高さはバラバラになり、高さが小さいものは、余白が生じます。」
             ↑ここで見えている背景①を、checkedになると②の高さになる様にしたいのです。。

            ①に同じサイズの無地の画像を挿入しても、②で指定する画像サイズがバラバラだと、
            やはり透過にしていても①が余白として見える事になりますよね?

            PCで見たときはそこまで気にならないのですが、スマホで見たときに、
            ②の画像が小さいとメイン画像とサムネイルの間にかなりの余白が出来てしまい、
            スクロールしないとサムネイルが表示されないので。。

            やはり、①の上に②を重ねて表示しているので、
            ②の高さに合わせて①の高さを変えるというのは難しいでしょうか?

            • 見えているスライド以外は、opacityが0ですから見えません。
              背景に見えているのは、初期画面が何もないと間が抜けるので、①をあらかじめ表示しているのです。
              ですから、無地の背景をと申し上げているのですが、どうしても初期画面に①を表示したいということであれば、
              <img style="width:100%" src="wp-images/1.jpg">をdivの中に入れて、idをphoto0として、全ての#rがcheckedになった時に、#photo0のopacityを0にすればいいと思います。

  10. はじめまして。
    会社のホームページに、こちらのHTMLとCSSを利用させて頂き、作成中です。
    同じページ内で別のフォトギャラリーを入れたいのですが、2個目のフォトギャラリーが綺麗に表示されません。
    動きは1個目と2個目、個別に動いています。
    が、2個目の固定で表示される1枚目がずっと表示されたまま&ラジオボタンが見えている・・・がどうしても直せません。

    1個目と2個目でCSSを2つ作り、
    2個目のCSSは「stage2」「thumbs2」「thumbs2 label img」「photob」「photob img」「photob span」と、名前が重なっているだろうところを変更。
    HTML内も、 と変えてみたのですが・・・HTMLで変え忘れているところがあるのでしょうか?

    • 富永さん、はじめまして。

      <input type="radio" id="r1" name="gal">
      <label for="r1"><img src="wp-images/s1.jpg"></label>
      の、r1,galはダブっていませんか。別々に定義し、別々に、display: none; の設定をしてください。
      お気づきのように、全ての要素について別々の定義が必要です。
      #r1:checked ~ の項目についても同様です。

      • 管理人様
        ご返信ありがとうございます!
        「r1」の部分は、「r9~r15」と名前を変えております。
        「gal」は、どうしてもHTML内でしか探せないのですが、CSS内にもあるのでしょうか??
        HTML内は「galb」としましたが、やはり1枚目の固定画像・ラジオボタンが消えません。

        • どのようにコードをお書きになったか、十分には把握できませんので、
          私の方で作った例を、以下のURLでお示ししますので、ソースを表示して参考にしてください。
          「http://css.programming.jp/pages/thumb_click_fade_responsive_multi.html」

  11. 管理人様
    見本のソースありがとうございます。
    色々試してみましたが、私の理解力が乏しいせいか、上手くできません・・・
    画像の下にテキストを入れるようにしているせいなのでしょうか・・・?

    こちらのURLに私が作ったタグをUPしましたので、
    大変お手数なのですが、お時間あるときにご確認いただけないでしょうか?
    「https://drive.google.com/open?id=1mI6yWDJVYtR25GkOxVoOd-nbxPcKK4i7」

    CSS、HTMLはあまり詳しくないので、分かりにくい状態になっているかも知れませんが・・・

    • このファイルではHTMLが分かりません。
      実際に、二つのギャラリーが載っているページを示してください。

      上にお知らせしたURLに、スライドの下に各スライドのテキストを加えた例を示しました。
      このHTML、CSSをベースに作成して見て下さい。

      • ありがとうございます。
        頂いたサンプルで、もう一度自分でやってみます!

        ちなみに、作っているページはこちらになります。
        <a href="http://www.fujiconcrete.co.jp/hp/job.html" rel="nofollow ugc">http://www.fujiconcrete.co.jp/hp/job.html</a>

        • 作成ページを拝見しました。

          2番目のギャラリーの
          「<input type="radio" id="r9" name="galb">」
          を1番目の記述と変えて、galをgalbのように代える必要があります。

          2番目のギャラリーの
          「<input type="radio" id="r16" name="gal">」
          が要りません。

          以上で正常に動くと思います。

          • 管理人様
            ページご確認頂いてありがとうございます!
            ご指摘の通り直しましたら、正常に表示されました!!

            CSS内に「gal」を見つけることができなかったので、HTML内でも変更必要ないと思っていたのですが、ここを変える必要があったのですね。

            ページ作成の期日が今週末でしたので、本当に助かりました!
            ありがとうございました♪♪

  12. サムネイル画像を隙間なく並べたいのですが、そういったことも可能でしょうか?
    このページを公開してから時間がたっての質問で申し訳御座いませんが、よろしくお願いいたします。

    • 佐藤さんはじめまして。
      サムネイルの記述を、
      <label for="r1"><img src="wp-images/s1.jpg"></label><label for="r2"><img src="wp-images/s2.jpg"></label>
      のように、全部くっつけて記述してください。

      • 管理人様
        ご挨拶もなしに質問してしまい申し訳御座いません。
        アドバイス通りに行ったところ、隙間なく並べることができました。
        本当にありがとうございます。
        また、こちらはクリックで表示の要素を残したまま、スライドショーのようにすることも可能でしょうか?

  13. 現在こちらのHTMLとcssを参考にせていただき、商品ページを作成しています。
    商品ごとにギャラリーを設置し、それぞれ画像を表示しています。
    他の方々からのご質問等も参考にさせていただきながら、なんとか形にすることができました。
    しかし、PCのchromeとIEでは正常に表示・作動するのですが、iphoneのchromeで見た場合は
    サムネイルをタッチし、メインの画像が切り替わると同時にその#stage全体が非表示になってしまします。
    画面をズームしたりスクロールしたりすると再度表示されます。
    html・cssを見直してはいるのですが、毎度同じ結果になってしまいます。
    なにか考えられる原因はありますでしょうか?

    •  私はiphoneユーザーではないので、友人のSEをちょっと借りてみましたが、safariでは正常表示されました。choromeをインストールしてみました。SEのせいか判然としませんが、確かに表示初期に不自然な表示になったような気がしますが、以後は、再読み込みしても正常表示されます。

       いずれにしろ、html、css的には見直しようがありませんので、私にはこれ以上のサジェスチョンはできません。OSとブラウザとの相性があるのでしょうか。

      • 早速のご返信ありがとうございます。
        iPhoneではchromeもSafariも同じ症状でした。
        念のためAndroidを使っている友人に試してもらったところ、Andoroid のchromeでは正常に表示されるようです。
        やはりOSとの関係なのでしょうか、、、当分様子を見てみたいと思います。
         こちらのhtmlとcssを公開していただき、自分のイメージするサイトに近づけられたので、非常に助かりました。ありがとうございます。
        また何かの時は参考にさせていただきます。

  14. はじめまして、WEB作成初心者です。
    こちらのフォトギャラリーを使わせて頂きまして、
    すごく助かりました!
    恐れ入りますが、一つ質問を聞かせて頂けませんか…

    イメージとしては大きくなった写真をもう一度クリックると
    他のサイトに飛べるようにしたいです

    <a href="https://sites…." rel="nofollow">

    上記ように、飛んでほしいサイトを五つの写真に設定しましたが
    どの写真をクリックしても、それぞれリンクさせたサイトに行けずに
    photo1にリンクさせたサイトにしか行かない状態です。

    お手隙の時で構いませんのでご教示頂ければと思います。宜しく願い致します。

    • div id="photo1" class="photo"とimg src="images.jpg"の間に
      a href="https://sites…." target="_blank
      を入れてます"

      • はじめまして。
        早速ですが、スライドは5枚重なっていて、opacityが0で見えないときでもphoto5が一番上になっています。したがって、どれをクリックしてもphoto5のリンク先が表示されます。
        z-indexを使って、クリックに相当する写真が一番上に来るようにすれば解決します。
        cssの.photo以下の記述を以下の様にしてください。
        .photo img {
        position: absolute;
        left: 0;
        top: 0;
        }
        .photo img {
        width:100%;
        opacity: 0;
          z-index:0;
        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;
        z-index:100;
        }

        • ご返信ありがとうございます!
          早速教えて頂いた方法で試してみしましたが
          今度は小さい写真をクリックしても上の写真が反応しなくなりました..
          GOOGLEサイトに埋め込みたいですけどそれは影響があるのでしょうか..?

          • 「https://sites.google.com/view/photogallery-with-link/」
            鍵かっこを外したアドレスのページに、Googlesiteに埋め込んだサンプルを掲載しました。
            HTML / CSS も記載しましたので参考にしてください。

コメントを残す

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