Lightbox タイプ – 画面サイズ対応・Fadein型 –

投稿日: 作成者:
LightBox タイプのフォトギャラリーを、既に２つほど紹介したが、ここでは、画面のサイズに応じて表示写真の大きさが、最大サイズ以下の範囲で変化するものになっている。すなわち、フルＨＤの写真を使いたい場合や、小さな解像度のデバイス向けを考慮したい場合などを配慮したものである。ここで紹介するサンプルは、サムネイルクリックでフェイド・インする、あるいは、送りボタンでフェイド・インする大きなサイズの写真が、画面横幅の62％幅で表示されるようにしている。極端な場合は、幅1920pxの写真を用意すれば、100%表示も可能となる。

サンプル

1/5　　　朝焼けの焼岳
2/5　　　針ノ木岳、スバリ岳を背に岩小屋沢岳への登り
3/5　　　剣岳を真近に望む
4/5　　　鹿島槍ヶ岳、後立山連峰
5/5　　　岩小屋沢、鳴沢岳を背に岳爺ヶ岳への登り

本サンプル表示用HTML

<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">
<input type="radio" id="r6" name="gal">
<input type="radio" id="r7" 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>
<label for="r7">
	<div id="darkscreen"></div>
</label>
<div id="stage">
    <div id="photo1">
    	<img src="wp-images/m1.jpg">
        <span class="span_l">1/5　　　朝焼けの焼岳</span>
        <label for="r6"><span class="span_r">? 閉じる</span></label>
        <label for="r2"><div id="right1" class="cover_right"><span>＞</span></div></label>
        <label for="r5"><div id="left1" class="cover_left"><span>＜</span></div></label>
    </div>
    <div id="photo2">
    	<img src="wp-images/m2.jpg">
        <span class="span_l">2/5　　　針ノ木岳、スバリ岳を背に岩小屋沢岳への登り</span>
        <label for="r6"><span class="span_r">? 閉じる</span></label>
        <label for="r3"><div id="right2" class="cover_right"><span>＞</span></div></label>
        <label for="r1"><div id="left2" class="cover_left"><span>＜</span></div></label>
    </div>
    <div id="photo3">
    	<img src="wp-images/m3.jpg">
        <span class="span_l">3/5　　　剣岳を真近に望む</span>
        <label for="r6"><span class="span_r">? 閉じる</span></label>
        <label for="r4"><div id="right3" class="cover_right"><span>＞</span></div></label>
        <label for="r2"><div id="left3" class="cover_left"><span>＜</span></div></label>
    </div>
    <div id="photo4">
    	<img src="wp-images/m4.jpg">
    	<span class="span_l">4/5　　　鹿島槍ヶ岳、後立山連峰</span>
        <label for="r6"><span class="span_r">? 閉じる</span></label>
        <label for="r5"><div id="right4" class="cover_right"><span>＞</span></div></label>
        <label for="r3"><div id="left4" class="cover_left"><span>＜</span></div></label>
    </div>
    <div id="photo5">
    	<img src="wp-images/m5.jpg">
        <span class="span_l">5/5　　　岩小屋沢、鳴沢岳を背に岳爺ヶ岳への登り</span>
        <label for="r6"><span class="span_r">? 閉じる</span></label>
        <label for="r1"><div id="right5" class="cover_right"><span>＞</span></div></label>
        <label for="r4"><div id="left5" class="cover_left"><span>＜</span></div></label>
    </div> 
</div>

HTMLの概要説明

・ラジオボタン r1-r5 は、各スライドを FadeIn させるため、サムネイルとそのスライドを表示させるための送りボタンに関連付けている。
・ラジオボタン　r6,r7 は、それぞれ閉じるボタンと遮蔽スクリーンに関連付けられていて、このクリックで初期画面に戻る。
・photo1 - photo5 は、それぞれ、写真とキャプションと閉じるボタンを含んだdivで、この全体を切り替える方式になっている。
・ボタン領域とは、各写真の上層に配置した、左40%の領域を覆う矩形（cover_left）と、右40%の領域を覆う矩形（cover_right）で、各領域のマウスオーバーで左右の矢印が表示され、そのクリックで左右のスライドに表示が切り替わるもの。

本サンプル表示用CSS

/*全サムネイルのコンテナー*/
#thumbs {
	 position: relative;
	 max-width: 630px;
	 margin:5px auto;
	 z-index:85;
}
/*サムネイルのマウスオーバーでポインターを手のひら*/
#thumbs label img {
	 cursor: pointer;
}
/*ラジオボタンを非表示に*/
#r1, #r2, #r3, #r4, #r5, #r6, #r7 {
	 display: none;
}
/* 写真表示領域 */
#stage {
	position:fixed;
        left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:-1000;
}
/*表示写真の初期配置（全部透明に）*/
#photo1, #photo2, #photo3, #photo4, #photo5 {
　	position:absolute;
	max-width:1200px;
	width:62%;
	left:19%;
	top:100px;
	padding:5px 5px 10px 5px;
	background:#fff;
	margin-left:0;
	opacity:0;
	-webkit-transition: all 1s ease;
　　　　-moz-transition: all 1s ease;
    　　-o-transition: all 1s ease;
　　    transition: all 1s ease;
}
#photo1 img, #photo2 img, #photo3 img, #photo4 img, #photo5 img {
	max-width:1200px;
	width: 100%;
	height: auto;
}
/* 写真の表題・閉じるボタン */
.span_l { float:left; margin:5px 0 0 5px; }
.span_r { float:right; font-weight:bold;  margin:5px 10px 0 0; cursor:pointer;}
/*写真表示時の画面遮蔽スクリーン*/
#darkscreen {
　	position:fixed;
	position:absolute;
　　　　width:100%;
	height:100%;
	top:0;
	left:0;
　　	background:#000;
	opacity:0;
	z-index:-5;
}
/*ボタン領域の設定*/
.cover_left, .cover_right {
	position:absolute;
	top:0;
	width:40%;
	height:93%;
	cursor:pointer;
	z-index:1000;
}
.cover_left {
	left:0;
}
.cover_right {
	left:60%;
}
/* ボタン領域の最上面を非表示に */
#photo5 label .cover_left,#photo5 label .cover_right {
	display:none; 
}
/*ボタン領域内のボタン文字（＜、＞）の設定*/
.cover_left span, .cover_right span {
	position: absolute;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 40px;
	font-weight: bold;
	opacity:0;
	top: 45%;
}
.cover_left span {
	left: 5%;
}
.cover_right span {
　	left: 85%
}
/*ボタン領域hover時文字の設定*/
.cover_right:hover > span, .cover_left:hover > span {
　	opacity:1;
　	color:#EEE;
}
/* サムネイル、送りボタンチェックで#stageを表示 */
#r1:checked ~ #stage,#r2:checked ~ #stage,#r3:checked ~ #stage,#r4:checked ~ #stage,#r5:checked ~ #stage {
	z-index:100;
	opacity:1;
}
/* サムネイル、送りボタンチェックで#darkscreenを表示 */
#r1:checked ~ label #darkscreen, #r2:checked ~ label #darkscreen, #r3:checked ~ label #darkscreen, #r4:checked ~ label #darkscreen, #r5:checked ~ label #darkscreen {
　　　 opacity:0.6;
　　　 z-index:90;
}
/* 各サムネイルがチェックされた時の#photo の表示 */
#r1:checked ~ #stage #photo1,#r2:checked ~ #stage #photo2,#r3:checked ~ #stage #photo3,#r4:checked ~ #stage #photo4,#r5:checked ~ #stage #photo5 {
　　　opacity:1;
　　　display:block;
　　　z-index:101;
}
/* 各サムネイルがチェックされた時の#photo5のボタン領域を表示 */
#r1:checked ~ #stage #photo5 label .cover_left,#r1:checked ~ #stage #photo5 label .cover_right,#r2:checked ~ #stage #photo5 label .cover_left,#r2:checked ~ #stage #photo5 label .cover_right,#r3:checked ~ #stage #photo5 label .cover_left,#r3:checked ~ #stage #photo5 label .cover_right,#r4:checked ~ #stage #photo5 label .cover_left,#r4:checked ~ #stage #photo5 label .cover_right,#r5:checked ~ #stage #photo5 label .cover_left,#r5:checked ~ #stage #photo5 label .cover_right {
	display:block;
}

CSSのポイント説明

・#stage の position:fixed; はWorfpressやテンプレートの中で使う場合には、この設定がないと決められたdiv内の表示なってしまう。
・#photo1-#photo5 の
max-width:1200px;
width:62%;
left:19%;
　は、用意した写真の幅1200pxがフルサイズＨＤ解像度1920pxの62%であることから、画面の水平方向の中央に62%幅で表示されるように設定している。
・したがって、img の幅も width:100% として、画面サイズに応じて縮小するようにしている。
・#darkscreen も position:fixed; にして#srage と同様全画面に広がるようにしている。
・#photo5 label .cover_left,#photo5 label .cover_right {
display:none;
　}
　は、各写真の上層に配置されているボタン領域（cover_left, cover_right）の最上層（#photo5）のものを非表示にするため。これをしないと、アクティブなクリッカブル領域が生じてしまうため。
・transition の設定、各ラジオボタンクリックでの記述については、これまでの稿を参照のこと。

コメント

Lightbox タイプ – 画面サイズ対応・Fadein型 – — 4件のコメント

  1. 初めまして。
    HTML、CSS初心者です。こちらのサイトはすごくわかりやすく、
    また非常に使いやすく参考にさせていただいております。
    こちらのフォトギャラリーを上手く埋め込むことはできたのですが、
    写真の枚数を増やしたい場合、具体的にどのコードを変更すれば良いのかご教示いただけますと助かります。

    例えば６枚目を追加する場合、ラジオボタンも　r6, r7まであり、単純に#photo6 と増やすだけでは上手くいきませんでした。。

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

    返信 ↓

    • moonさん、はじめまして。当サイトをご活用くださいましてありがとうございます。
      早速ですが、r6は閉じるボタン、r7は写真周りの背景に対応しています。したがって、
      ・<label for="r6">のところを全部<label for="r7">に、<label for="r7">のところを<label for="r8">に代えてください。
      ・r6は#photo6に対応させます。
      ・htmlの#photo5#をphoto4にならって、#photo6を#photo5にならって記述します。
      ・cssでは、#photo6の記述を、#photo5の記述の後ろに加えてください。
      これでうまくいきますよ。

      返信 ↓

  2. オーナー様

    ご返信をありがとうございました！返信が早くてびっくりです。
    そして早速仰るとおりに試してみたところ、うまく１枚追加できました。
    （きちんと書いてあるにもかかわらず）ボタンの機能を
    私が把握していなかったのが原因ですね。すみませんでした。

    もう少し枚数を追加したいと思っているので引き続きトライしてみたいと思います。
    本当にありがとうございます！！

    返信 ↓

    • どういたしまして。
      仕組みをご理解いただけているようなので、枚数追加はうまくいくと思います。

      返信 ↓

コメントを残す

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