グリッドサムネイル伸縮型フォトギャラリー

 格子状に配置されたサムネイルをロールオーバーすると、マウスがのったサムネイルが拡大し、その他のサムネイルが縮んで全体の格子の幅・高さは変わらないという効果を持つサムネイルクリック型のフォトギャラリーである。拡大したサムネイルをクリックすると、格子幅・高さいっぱいに画像が拡大される。

サンプル(DEMO)



本サンプル表示用HTML

<div id="container">
<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">
<input id="r6" type="radio" name="gal">
<input id="r7" type="radio" name="gal">
<input id="r8" type="radio" name="gal">
<input id="r9" type="radio" name="gal">
<input id="r10" type="radio" name="gal">
<input id="r11" type="radio" name="gal">
<input id="r12" type="radio" name="gal">
<input id="r13" type="radio" name="gal">
<input id="r14" type="radio" name="gal">
<input id="r15" type="radio" name="gal">
<input id="r16" type="radio" name="gal">
<input id="r20" type="radio" name="gal">
<!-- テーブル(グリッド) -->
<div id="stage">
<!-- 行・行内に4つのセル(それぞれに写真) -->
<div id="row1" class="row">
    <label for="r1" class="cell1"><img src="wp-images/img10/1.jpg" alt="" /></label>
    <label for="r2" class="cell2"><img src="wp-images/img10/2.jpg" alt="" /></label>
    <label for="r3" class="cell3"><img src="wp-images/img10/3.jpg" alt="" /></label>
    <label for="r4" class="cell4"><img src="wp-images/img10/4.jpg" alt="" /></label>
</div>
<div id="row2"  class="row">
    <label for="r5" class="cell1"><img src="wp-images/img10/5.jpg" alt="" /></label>
    <label for="r6" class="cell2"><img src="wp-images/img10/6.jpg" alt="" /></label>
    <label for="r7" class="cell3"><img src="wp-images/img10/7.jpg" alt="" /></label>
    <label for="r8" class="cell4"><img src="wp-images/img10/8.jpg" alt="" /></label>
</div>
<div id="row3" class="row">
    <label for="r9" class="cell1"><img src="wp-images/img10/9.jpg" alt="" /></label>
    <label for="r10" class="cell2"><img src="wp-images/img10/10.jpg" alt="" /></label>
    <label for="r11" class="cell3"><img src="wp-images/img10/11.jpg" alt="" /></label>
    <label for="r12" class="cell4"><img src="wp-images/img10/12.jpg" alt="" /></label>
</div>
<div id="row4"  class="row">
    <label for="r13" class="cell1"><img src="wp-images/img10/13.jpg" alt="" /></label>
    <label for="r14" class="cell2"><img src="wp-images/img10/14.jpg" alt="" /></label>
    <label for="r15" class="cell3"><img src="wp-images/img10/15.jpg" alt="" /></label>
    <label for="r16" class="cell4"><img src="wp-images/img10/16.jpg" alt="" /></label>
</div>
</div>
<!-- 閉じるボタン -->
<div id="close_btn"><label for="r20">×</label></div>
</div>

本サンプル表示用CSS

/* ラジオボタンを非表示に */
#r1,#r2,#r3,#r4,#r5,#r6,#r7,#r8,#r9,#r10,#r11,#r12,#r13,#r14,#r15,#r16,#r17,#r18,#r19,#r20 { display:none; }
/* 表示枠 */
#container { position:relative; max-width:600px;max-height:600px; }
/* 枠内一杯にテーブル */
#stage { position:relative;display:table;width:100%;}
/* 行 */
#stage .row { display:table-row; }
/* セル(辺が150pxの正方形に設定し、transitionを設定) */
#stage .row label { display:table-cell;width:150px;height:150px;border:#fff 1px solid;
    transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s; }
/* セル内にセルの大きさで写真を表示、サムネイル下の隙間を削除 */
#stage .row label img { width:100%;height:100%;vertical-align: bottom; }
/* テーブルhoverですべてのセルを縮小 */
#stage:hover > div label { width:80px; height:80px; cursor:pointer; }
/* 行hoverでその行だけ高さを拡大 */
#stage .row:hover > label  { height:360px; }
/* セルhoverで、そのセルの列だけ幅を拡大 */
#stage .row .cell1:hover { width:360px; }
#stage .row .cell2:hover { width:360px; }
#stage .row .cell3:hover { width:360px; }
#stage .row .cell4:hover { width:360px; }
/* サムネイルクリックでその写真を画面いっぱいに拡大表示し、
  その他のサムネイル格納セルの幅・高さを0にして枠線をなくし、写真を非表示にする */
#r1:checked ~ #stage .row label[for="r1"] { width:600px;height:600px; }
#r1:checked ~ #stage .row label:not([for="r1"]) { width:0;height:0;border:none; }
#r1:checked ~ #stage .row label:not([for="r1"]) img { display:none; }
#r2:checked ~ #stage .row label[for="r2"] { width:600px;height:600px; }
#r2:checked ~ #stage .row label:not([for="r2"]) { width:0;height:0;border:none; }
#r2:checked ~ #stage .row label:not([for="r2"]) img { display:none; }
#r3:checked ~ #stage .row label[for="r3"] { width:600px;height:600px; }
#r3:checked ~ #stage .row label:not([for="r3"]) { width:0;height:0;border:none; }
#r3:checked ~ #stage .row label:not([for="r3"]) img { display:none; }
#r4:checked ~ #stage .row label[for="r4"] { width:600px;height:600px; }
#r4:checked ~ #stage .row label:not([for="r4"]) { width:0;height:0;border:none; }
#r4:checked ~ #stage .row label:not([for="r4"]) img { display:none; }
#r5:checked ~ #stage .row label[for="r5"] { width:600px;height:600px; }
#r5:checked ~ #stage .row label:not([for="r5"]) { width:0;height:0;border:none; }
#r5:checked ~ #stage .row label:not([for="r5"]) img { display:none; }
#r6:checked ~ #stage .row label[for="r6"] { width:600px;height:600px; }
#r6:checked ~ #stage .row label:not([for="r6"]) { width:0;height:0;border:none; }
#r6:checked ~ #stage .row label:not([for="r6"]) img { display:none; }
#r7:checked ~ #stage .row label[for="r7"] { width:600px;height:600px; }
#r7:checked ~ #stage .row label:not([for="r7"]) { width:0;height:0;border:none; }
#r7:checked ~ #stage .row label:not([for="r7"]) img { display:none; }
#r8:checked ~ #stage .row label[for="r8"] { width:600px;height:600px; }
#r8:checked ~ #stage .row label:not([for="r8"]) { width:0;height:0;border:none; }
#r8:checked ~ #stage .row label:not([for="r8"]) img { display:none; }
#r9:checked ~ #stage .row label[for="r9"] { width:600px;height:600px; }
#r9:checked ~ #stage .row label:not([for="r9"]) { width:0;height:0;border:none; }
#r9:checked ~ #stage .row label:not([for="r9"]) img { display:none; }
#r10:checked ~ #stage .row label[for="r10"] { width:600px;height:600px; }
#r10:checked ~ #stage .row label:not([for="r10"]) { width:0;height:0;border:none; }
#r10:checked ~ #stage .row label:not([for="r10"]) img { display:none; }
#r11:checked ~ #stage .row label[for="r11"] { width:600px;height:600px; }
#r11:checked ~ #stage .row label:not([for="r11"]) { width:0;height:0;border:none; }
#r11:checked ~ #stage .row label:not([for="r11"]) img { display:none; }
#r12:checked ~ #stage .row label[for="r12"] { width:600px;height:600px; }
#r12:checked ~ #stage .row label:not([for="r12"]) { width:0;height:0;border:none; }
#r12:checked ~ #stage .row label:not([for="r12"]) img { display:none; }
#r13:checked ~ #stage .row label[for="r13"] { width:600px;height:600px; }
#r13:checked ~ #stage .row label:not([for="r13"]) { width:0;height:0;border:none; }
#r13:checked ~ #stage .row label:not([for="r13"]) img { display:none; }
#r14:checked ~ #stage .row label[for="r14"] { width:600px;height:600px; }
#r14:checked ~ #stage .row label:not([for="r14"]) { width:0;height:0;border:none; }
#r14:checked ~ #stage .row label:not([for="r14"]) img { display:none; }
#r15:checked ~ #stage .row label[for="r15"] { width:600px;height:600px; }
#r15:checked ~ #stage .row label:not([for="r15"]) { width:0;height:0;border:none; }
#r15:checked ~ #stage .row label:not([for="r15"]) img { display:none; }
#r16:checked ~ #stage .row label[for="r16"] { width:600px;height:600px; }
#r16:checked ~ #stage .row label:not([for="r16"]) { width:0;height:0;border:none; }
#r16:checked ~ #stage .row label:not([for="r16"]) img { display:none; }
/* 閉じるボタンの設定 */
#close_btn {
	display:block;
	color:#fdd;font-size:50px; font-weight:bold;
	position:absolute;top:5px;right:10px;
	z-index:100;
}
#close_btn:hover { color:#f00; cursor:pointer; }

コメント

グリッドサムネイル伸縮型フォトギャラリー — 2件のコメント

  1. 一番左の画像だけ常に反応されません。
    コードを載せるので改善点を教えていただきたいです。

    <!– テーブル(グリッド) –>

    <!– 行・行内に4つのセル(それぞれに写真) –>

    <!– 閉じるボタン –>
    ×

    /* ラジオボタンを非表示に */
    #r1,#r2,#r3,#r4,#r5,#r6,#r7,#r8,#r9,#r10,#r11,#r12,#r13,#r14,#r15,#r16,#r17,#r18,#r19,#r20 { display:none; }
    /* 表示枠 */
    #container { position:relative; width:100%; margin-top: 50px; margin-bottom: 50px;}
    /* 枠内一杯にテーブル */
    #stage { position:relative;width:100%; height: auto;}
    /* セル(辺が150pxの正方形に設定し、transitionを設定) */
    #stage .row label {width:24.775%;height:300px;border:#fff 1px solid;
    transition: all ease 0.1s;
    -webkit-transition: all ease 0.1s; }
    /* セル内にセルの大きさで写真を表示、サムネイル下の隙間を削除 */
    #stage .row label img { width:100%;vertical-align: bottom; }
    /* テーブルhoverですべてのセルを縮小 */
    #stage:hover &lt; div label { width:100%;}
    /* 行hoverでその行だけ高さを拡大 */
    #stage .row:hover &lt; label { height:360px; }
    /* セルhoverで、そのセルの列だけ幅を拡大 */
    #stage .row .cell1:hover { width:360px; }
    #stage .row .cell2:hover { width:360px; }
    #stage .row .cell3:hover { width:360px; }
    #stage .row .cell4:hover { width:360px; }
    /* サムネイルクリックでその写真を画面いっぱいに拡大表示し、
      その他のサムネイル格納セルの幅・高さを0にして枠線をなくし、写真を非表示にする */
    #r1:checked ~ #stage .row label[for=&quot;r1&quot;] { width:100%;height:1300px; }
    #r1:checked ~ #stage .row label:not([for=&quot;r1&quot;]) { width:0;height:0;border:none; }
    #r1:checked ~ #stage .row label:not([for=&quot;r1&quot;]) img { display:none; }
    #r2:checked ~ #stage .row label[for=&quot;r2&quot;] { width:100%;height:1300px; }
    #r2:checked ~ #stage .row label:not([for=&quot;r2&quot;]) { width:0;height:0;border:none; }
    #r2:checked ~ #stage .row label:not([for=&quot;r2&quot;]) img { display:none; }
    #r3:checked ~ #stage .row label[for=&quot;r3&quot;] { width:100%;height:1300px; }
    #r3:checked ~ #stage .row label:not([for=&quot;r3&quot;]) { width:0;height:0;border:none; }
    #r3:checked ~ #stage .row label:not([for=&quot;r3&quot;]) img { display:none; }
    #r4:checked ~ #stage .row label[for=&quot;r4&quot;] { width:100%;height:1300px; }
    #r4:checked ~ #stage .row label:not([for=&quot;r4&quot;]) { width:0;height:0;border:none; }
    #r4:checked ~ #stage .row label:not([for=&quot;r4&quot;]) img { display:none; }
    #r5:checked ~ #stage .row label[for=&quot;r5&quot;] { width:100%;height:1300px; }
    #r5:checked ~ #stage .row label:not([for=&quot;r5&quot;]) { width:0;height:0;border:none; }
    #r5:checked ~ #stage .row label:not([for=&quot;r5&quot;]) img { display:none; }
    #r6:checked ~ #stage .row label[for=&quot;r6&quot;] { width:100%;height:1300px; }
    #r6:checked ~ #stage .row label:not([for=&quot;r6&quot;]) { width:0;height:0;border:none; }
    #r6:checked ~ #stage .row label:not([for=&quot;r6&quot;]) img { display:none; }
    #r7:checked ~ #stage .row label[for=&quot;r7&quot;] { width:100%;height:1300px; }
    #r7:checked ~ #stage .row label:not([for=&quot;r7&quot;]) { width:0;height:0;border:none; }
    #r7:checked ~ #stage .row label:not([for=&quot;r7&quot;]) img { display:none; }
    #r8:checked ~ #stage .row label[for=&quot;r8&quot;] { width:100%;height:1300px; }
    #r8:checked ~ #stage .row label:not([for=&quot;r8&quot;]) { width:0;height:0;border:none; }
    #r8:checked ~ #stage .row label:not([for=&quot;r8&quot;]) img { display:none; }
    #r9:checked ~ #stage .row label[for=&quot;r9&quot;] { width:100%;height:1300px; }
    #r9:checked ~ #stage .row label:not([for=&quot;r9&quot;]) { width:0;height:0;border:none; }
    #r9:checked ~ #stage .row label:not([for=&quot;r9&quot;]) img { display:none; }
    #r10:checked ~ #stage .row label[for=&quot;r10&quot;] { width:100%;height:1300px; }
    #r10:checked ~ #stage .row label:not([for=&quot;r10&quot;]) { width:0;height:0;border:none; }
    #r10:checked ~ #stage .row label:not([for=&quot;r10&quot;]) img { display:none; }
    #r11:checked ~ #stage .row label[for=&quot;r11&quot;] { width:100%;height:1300px; }
    #r11:checked ~ #stage .row label:not([for=&quot;r11&quot;]) { width:0;height:0;border:none; }
    #r11:checked ~ #stage .row label:not([for=&quot;r11&quot;]) img { display:none; }
    #r12:checked ~ #stage .row label[for=&quot;r12&quot;] { width:100%;height:1300px; }
    #r12:checked ~ #stage .row label:not([for=&quot;r12&quot;]) { width:0;height:0;border:none; }
    #r12:checked ~ #stage .row label:not([for=&quot;r12&quot;]) img { display:none; }
    #r13:checked ~ #stage .row label[for=&quot;r13&quot;] { width:100%;height:1300px; }
    #r13:checked ~ #stage .row label:not([for=&quot;r13&quot;]) { width:0;height:0;border:none; }
    #r13:checked ~ #stage .row label:not([for=&quot;r13&quot;]) img { display:none; }
    #r14:checked ~ #stage .row label[for=&quot;r14&quot;] { width:100%;height:1300px; }
    #r14:checked ~ #stage .row label:not([for=&quot;r14&quot;]) { width:0;height:0;border:none; }
    #r14:checked ~ #stage .row label:not([for=&quot;r14&quot;]) img { display:none; }
    #r15:checked ~ #stage .row label[for=&quot;r15&quot;] { width:100%;height:1300px; }
    #r15:checked ~ #stage .row label:not([for=&quot;r15&quot;]) { width:0;height:0;border:none; }
    #r15:checked ~ #stage .row label:not([for=&quot;r15&quot;]) img { display:none; }
    #r16:checked ~ #stage .row label[for=&quot;r16&quot;] { width:100%;height:1300px; }
    #r16:checked ~ #stage .row label:not([for=&quot;r16&quot;]) { width:0;height:0;border:none; }
    #r16:checked ~ #stage .row label:not([for=&quot;r16&quot;]) img { display:none; }
    /* 閉じるボタンの設定 */
    #close_btn {
    display:block;
    color:#fdd;font-size:50px; font-weight:bold;
    position:absolute;top:5px;left:10px;
    z-index:100;
    }
    #close_btn:hover { color:#f00; cursor:pointer; }

    • motoさん

      このコードは、オリジナルのものに改変を加えていますね(tablecellではなくなっている)。
      HTMLはどうなっていますか?
      どのような表示に変えたいのでしょうか。

      HTMLとCSSのファイルをメールで送るか、サーバーに仮アップしたもののアドレスを教えてください。検証してみます。
      メールアドレス:tyosbb@ybb.ne.jp

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

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

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