このエントリーをはてなブックマークに追加

Preview機能付クリック型ギャラリー/Photo Gallery #10

このサンプルは、NO hacks,NO javascript,XHTMLとCSSのみを使用して前の/次のPreview機能をもつイメージクリックギャラリー。
サムネイルの不透明度が変化してプレビューが表示されます。
サムネイルをクリックするとイメージが切り替わります。

スポンサーリンク

【DEMO】

【ディレクトリ構成例】

index.html (gallery.htmlギャラリートップページ)
　　　 |
　　　 +-- css / gallery10.css
　　　 |
　　　 |
　　　 +-- photo /pic1.jpg
　　　 　　　　　　　　 pic2.jpg
　　 　　　　　　　　　 pic3.jpg
　　 　　　　　　　　　 pic4.jpg
　　 　　　　　　　　　 pic5.jpg
　　 　　　　　　　　　 pic6.jpg
　　 　　　　　　　　　 pic7.jpg

【code】

編集・カスタマイズ等はエディタで開き修正をしてください。

【html】

HTMLファイルの<body></body>の間に下記のコードを入力します。

<img src="images/1.jpg(写真画像ファイル名)" alt="タイトル1(写真画像タイトル)" />

  • <div id="wrapper">
  • <div id="info">
  • <p class="info"></p>
  • <div id="gallery">
  • <div id="fullsize">

  • <div id="pic1">
  • <img src="photo/pic1.jpg" alt="タイトル #1" />
  • <a class="previous" href="#pic7"><img src="photo/pic7.jpg" alt="タイトル #7" /></a>
  • <a class="next" href="#pic2"><img src="photo/pic2.jpg" alt="タイトル #2" /></a>
  • <h3>タイトル #1</h3>
  • <p>イメージ画像説明文 #1</p>
  • </div>

  • <div id="pic2">
  • <img src="photo/pic2.jpg" alt="タイトル #2" />
  • <a class="previous" href="#pic1"><img src="photo/pic1.jpg" alt="タイトル #1" /></a>
  • <a class="next" href="#pic3"><img src="photo/pic3.jpg" alt="タイトル #3" /></a>
  • <h3>タイトル #2</h3>
  • <p>イメージ画像説明文 #2</p>
  • </div>

  • <div id="pic3">
  • <img src="photo/pic3.jpg" alt="タイトル #3" />
  • <a class="previous" href="#pic2"><img src="photo/pic2.jpg" alt="タイトル #2" /></a>
  • <a class="next" href="#pic4"><img src="photo/pic4.jpg" alt="タイトル #4" /></a>
  • <h3>タイトル #3</h3>
  • <p>イメージ画像説明文 #3</p>
  • </div>

  • <div id="pic4">
  • <img src="photo/pic4.jpg" alt="タイトル #4" />
  • <a class="previous" href="#pic3"><img src="photo/pic3.jpg" alt="タイトル #3" /></a>
  • <a class="next" href="#pic5"><img src="photo/pic5.jpg" alt="タイトル #5" /></a>
  • <h3>タイトル #4</h3>
  • <p>イメージ画像説明文 #4</p>
  • </div>

  • <div id="pic5">
  • <img src="photo/pic5.jpg" alt="タイトル #5" />
  • <a class="previous" href="#pic4"><img src="photo/pic4.jpg" alt="タイトル #4" /></a>
  • <a class="next" href="#pic6"><img src="photo/pic6.jpg" alt="タイトル #6" /></a>
  • <h3>タイトル #5</h3>
  • <p>イメージ画像説明文 #5</p>
  • </div>

  • <div id="pic6">
  • <img src="photo/pic6.jpg" alt="タイトル #6" />
  • <a class="previous" href="#pic5"><img src="photo/pic5.jpg" alt="タイトル #5" /></a>
  • <a class="next" href="#pic7"><img src="photo/pic7.jpg" alt="タイトル #7" /></a>
  • <h3>タイトル #6</h3>
  • <p>イメージ画像説明文 #6</p>
  • </div>

  • <div id="pic7">
  • <img src="photo/pic7.jpg" alt="タイトル #7" />
  • <a class="previous" href="#pic6"><img src="photo/pic6.jpg" alt="タイトル #6" /></a>
  • <a class="next" href="#pic1"><img src="photo/pic1.jpg" alt="タイトル #1" /></a>
  • <h3>タイトル #7</h3>
  • <p>イメージ画像説明文 #7</p>
  • </div>

  • </div>
  • </div>
  • </div>
  • </div>

【gallery10.css】

  • #gallery{
  • width: 100%;
  • height: 500px;
  • margin: 0 auto;
  • position: relative;
  • font-family: verdana, arial, sans-serif;
  • }
  • #gallery #fullsize{
  • position: absolute;
  • left: 0;
  • top: 0;
  • height: 500px;
  • width: 100%;
  • overflow: hidden;
  • text-align: center;
  • }
  • #gallery #fullsize div{
  • width: 100%;
  • height: 700px;
  • padding-top: 20px;
  • position: relative;
  • }
  • #gallery #fullsize div img{
  • clear: both;
  • display: block;
  • margin: 0 auto;
  • border: 5px solid #fff;
  • width: 500px;
  • height: 333px;
  • position: relative;
  • z-index: 500;
  • }
  • #gallery #fullsize div h3{
  • padding: 10px 0 0 0;
  • margin: 0;
  • font-size: 18px;
  • }
  • #gallery #fullsize div p{
  • padding: 5px 0;
  • margin: 0;
  • font-size: 12px;
  • line-height: 18px;
  • }
  • #gallery #fullsize a.previous{
  • display: block;
  • height: 120px;
  • width: 180px;
  • position: absolute;
  • left: 10px;
  • top: 100px;
  • z-index: 10;
  • border: 5px solid #fff;
  • }
  • #gallery #fullsize a.next{
  • display: block;
  • height: 120px;
  • width: 180px;
  • position: absolute;
  • right: 10px;
  • top: 100px;
  • z-index: 10;
  • border: 5px solid #fff;
  • }
  • #gallery #fullsize a.previous img, #gallery #fullsize a.next img{
  • width: 180px;
  • height: 120px;
  • border: 0;
  • display: block;
  • filter: alpha(opacity=40);
  • opacity: 0.4;
  • }
  • #gallery #fullsize a:hover{
  • direction: ltr;
  • z-index: 600;
  • }
  • #gallery #fullsize a:hover img{
  • filter: alpha(opacity=80);
  • opacity: 0.8;
  • }

【photo】

【Sample Code】

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • <html xmlns="http://www.w3.org/1999/xhtml">
  • <head>
  • <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
  • <title>フォト ギャラリー サンプル #10</title>
  • <link href="css/gallery10.css" rel="stylesheet" type="text/css" media="screen" />
  • </head>
  • <body>
  • <div id="wrapper">
  • <div id="info">
  • <p class="info"></p>
  • <div id="gallery">
  • <div id="fullsize">

  • <div id="pic1">
  • <img src="photo/pic1.jpg" alt="タイトル #1" />
  • <a class="previous" href="#pic7"><img src="photo/pic7.jpg" alt="タイトル #7" /></a>
  • <a class="next" href="#pic2"><img src="photo/pic2.jpg" alt="タイトル #2" /></a>
  • <h3>タイトル #1</h3>
  • <p>イメージ画像説明文 #1</p>
  • </div>

  • <div id="pic2">
  • <img src="photo/pic2.jpg" alt="タイトル #2" />
  • <a class="previous" href="#pic1"><img src="photo/pic1.jpg" alt="タイトル #1" /></a>
  • <a class="next" href="#pic3"><img src="photo/pic3.jpg" alt="タイトル #3" /></a>
  • <h3>タイトル #2</h3>
  • <p>イメージ画像説明文 #2</p>
  • </div>

  • <div id="pic3">
  • <img src="photo/pic3.jpg" alt="タイトル #3" />
  • <a class="previous" href="#pic2"><img src="photo/pic2.jpg" alt="タイトル #2" /></a>
  • <a class="next" href="#pic4"><img src="photo/pic4.jpg" alt="タイトル #4" /></a>
  • <h3>タイトル #3</h3>
  • <p>イメージ画像説明文 #3</p>
  • </div>

  • <div id="pic4">
  • <img src="photo/pic4.jpg" alt="タイトル #4" />
  • <a class="previous" href="#pic3"><img src="photo/pic3.jpg" alt="タイトル #3" /></a>
  • <a class="next" href="#pic5"><img src="photo/pic5.jpg" alt="タイトル #5" /></a>
  • <h3>タイトル #4</h3>
  • <p>イメージ画像説明文 #4</p>
  • </div>

  • <div id="pic5">
  • <img src="photo/pic5.jpg" alt="タイトル #5" />
  • <a class="previous" href="#pic4"><img src="photo/pic4.jpg" alt="タイトル #4" /></a>
  • <a class="next" href="#pic6"><img src="photo/pic6.jpg" alt="タイトル #6" /></a>
  • <h3>タイトル #5</h3>
  • <p>イメージ画像説明文 #5</p>
  • </div>

  • <div id="pic6">
  • <img src="photo/pic6.jpg" alt="タイトル #6" />
  • <a class="previous" href="#pic5"><img src="photo/pic5.jpg" alt="タイトル #5" /></a>
  • <a class="next" href="#pic7"><img src="photo/pic7.jpg" alt="タイトル #7" /></a>
  • <h3>タイトル #6</h3>
  • <p>イメージ画像説明文 #6</p>
  • </div>

  • <div id="pic7">
  • <img src="photo/pic7.jpg" alt="タイトル #7" />
  • <a class="previous" href="#pic6"><img src="photo/pic6.jpg" alt="タイトル #6" /></a>
  • <a class="next" href="#pic1"><img src="photo/pic1.jpg" alt="タイトル #1" /></a>
  • <h3>タイトル #7</h3>
  • <p>イメージ画像説明文 #7</p>
  • </div>

  • </div>
  • </div>
  • </div>
  • </div>
  • </body>
  • </html>
Copyright(C)2009 My Island All Rights Reserved.