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

クリック型スクリーンギャラリー/Photo Gallery #02

このサンプルは、シングルイメージまたはイメージをグループ化してWebページに表示します。
イメージのサムネイルをクリックするとイメージを拡大して表示します。
拡大表示されたイメージを閉じるには[CLOSE X]をクリックします。
イメージの右側にマウスを移動すると[NEXT]、左側にマウスを移動すると[PREV]ボタンが表示されますのでイメージを自由に切り替えることができます。

スポンサーリンク

【DEMO】

【ディレクトリ構成例】

index.html (gallery.htmlギャラリートップページ)
　　　 |
　　　 +-- css / style.css
　　　 | 　　 　　　 lightbox.css
　　　 |
　　　 +-- js / lightbox.js
　　　 | 　　　 　 builder.js
　　　 | 　　　 　 effects.js
　　　 | 　　　 　 prototype.js
　　　 | 　　　 　 scriptaculous.js
　　　 |
　　　 +-- images /bullet.gif
　　　 | 　　　　　　　　 close.gif
　　　 | 　　　　　　　　 closelabel.gif
　　　 | 　　　　　　　　 loading.gif
　　　 | 　　　　　　　　 nextlabel.gif
　　　 | 　　　　　　　　 prevlabel.gif
　　　 |
　　　 +-- photos /1_s.jpg
　　　 　　　　　　　　　 1_b.jpg
　　　 　　　　　　　　　 2_s.jpg
　　　 　　　　　　　　　 2_b.jpg
　　　 　　　　　　　　　 3_s.jpg
　　　 　　　　　　　　　 3_b.jpg
　　　 　　　　　　　　　 4_s.jpg
　　　 　　　　　　　　　 4_b.jpg
　　　 　　　　　　　　　 5_s.jpg
　　　 　　　　　　　　　 5_b.jpg
　　　 　　　　　　　　　 6_s.jpg
　　　 　　　　　　　　　 6_b.jpg
　　　 　　　　　　　　　 7_s.jpg
　　　 　　　　　　　　　 7_b.jpg
　　　 　　　　　　　　　 8_s.jpg
　　　 　　　　　　　　　 8_b.jpg
　　　 　　　　　　　　　 9_s.jpg
　　　 　　　　　　　　　 9_b.jpg

【code】

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

【html】

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

<a href="photos/1_b.jpg(写真画像大ファイル名)" rel="lightbox[CategoryA]"><img class="smallimage" src="photos/1_s.jpg(写真画像小ファイル名)" width="150(サムネイル幅)" height="99(サムネイル縦)" alt="タイトル #1(写真画像タイトル)" /></a>

  • <div id="wrap">
  • <a href="photos/1_b.jpg" rel="lightbox[CategoryA]"><img class="smallimage" src="photos/1_s.jpg" width="150" height="99" alt="タイトル #1" /></a>
  • <a href="photos/2_b.jpg" rel="lightbox[CategoryA]"><img class="smallimage" src="photos/2_s.jpg" width="150" height="99" alt="タイトル #2" /></a>
  • <a href="photos/3_b.jpg" rel="lightbox[CategoryA]"><img class="smallimage" src="photos/3_s.jpg" width="150" height="99" alt="タイトル #3" /></a>
  • <a href="photos/4_b.jpg" rel="lightbox[CategoryA]"><img class="smallimage" src="photos/4_s.jpg" width="150" height="99" alt="タイトル #4" /></a>
  • <a href="photos/5_b.jpg" rel="lightbox[CategoryA]"><img class="smallimage" src="photos/5_s.jpg" width="150" height="99" alt="タイトル #5" /></a>
  • <a href="photos/6_b.jpg" rel="lightbox[CategoryA]"><img class="smallimage" src="photos/6_s.jpg" width="150" height="99" alt="タイトル #6" /></a>
  • <a href="photos/7_b.jpg" rel="lightbox[CategoryA]"><img class="smallimage" src="photos/7_s.jpg" width="150" height="99" alt="タイトル #7" /></a>
  • <a href="photos/8_b.jpg" rel="lightbox[CategoryA]"><img class="smallimage" src="photos/8_s.jpg" width="150" height="99" alt="タイトル #8" /></a>
  • <a href="photos/9_b.jpg" rel="lightbox[CategoryA]"><img class="smallimage" src="photos/9_s.jpg" width="150" height="99" alt="タイトル #9" /></a>
  • </div>

【style.css】

（Gallery #02デモでは全幅500pxに設定してあります。

  • #wrap{
  • width: 500px;
  • margin: 20px auto;
  • }
  • .smallimage {
  • background-color: #fff;
  • border: 1px solid #CCC;
  • padding: 3px;
  • margin: 10px 5px 0 0;
  • }

【lightbox.css】

  • #lightbox{
  • position: absolute;
  • left: 0;
  • width: 100%;
  • z-index: 100;
  • text-align: center;
  • line-height: 0;
  • }
  • #lightbox img{
  • width: auto;
  • height: auto;
  • }
  • #lightbox a img{
  • border: none;
  • }
  • #outerImageContainer{
  • position: relative;
  • background-color: #fff;
  • width: 250px;
  • height: 250px;
  • margin: 0 auto;
  • }
  • #imageContainer{
  • padding: 10px;
  • }
  • #loading{
  • position: absolute;
  • top: 40%;
  • left: 0%;
  • height: 25%;
  • width: 100%;
  • text-align: center;
  • line-height: 0;
  • }
  • #hoverNav{
  • position: absolute;
  • top: 0;
  • left: 0;
  • height: 100%;
  • width: 100%;
  • z-index: 10;
  • }
  • #imageContainer>#hoverNav{
  • left: 0;
  • }
  • #hoverNav a{
  • outline: none;
  • }
  • #prevLink, #nextLink{
  • width: 49%;
  • height: 100%;
  • background-image: url(data:image/gif;base64,AAAA);
  • /* Trick IE into showing hover */
  • display: block;
  • }
  • #prevLink {
  • left: 0;
  • float: left;
  • }
  • #nextLink {
  • right: 0;
  • float: right;
  • }
  • #prevLink:hover, #prevLink:visited:hover {
  • background: url(../images/prevlabel.gif) left 15% no-repeat;
  • }
  • #nextLink:hover, #nextLink:visited:hover {
  • background: url(../images/nextlabel.gif) right 15% no-repeat;
  • }
  • #imageDataContainer{
  • font: 10px Verdana, Helvetica, sans-serif;
  • background-color: #fff;
  • margin: 0 auto;
  • line-height: 1.4em;
  • overflow: auto;
  • width: 100%;
  • }
  • #imageData{
  • padding:0 10px;
  • color: #666;
  • }
  • #imageData #imageDetails{
  • width: 70%;
  • float: left;
  • text-align: left;
  • }
  • #imageData #caption{
  • font-weight: bold;
  • }
  • #imageData #numberDisplay{
  • display: block;
  • clear: left;
  • padding-bottom: 1.0em;
  • }
  • #imageData #bottomNavClose{
  • width: 66px;
  • float: right;
  • padding-bottom: 0.7em;
  • outline: none;
  • }
  • #overlay{
  • position: absolute;
  • top: 0;
  • left: 0;
  • z-index: 90;
  • width: 100%;
  • height: 500px;
  • background-color: #000;
  • }

【photos】

デモで使用しているサンプル画像です。

【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>フォト ギャラリー サンプル #02</title>
  • <link href="css/style.css" rel="stylesheet" type="text/css" />
  • <link href="css/lightbox.css" rel="stylesheet" type="text/css" media="screen" />
  • <script type="text/javascript" src="js/prototype.js"></script>
  • <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
  • <script type="text/javascript" src="js/lightbox.js"></script>
  • </head>
  • <body>
  • <div id="wrap">
  • <a href="photos/1_b.jpg" rel="lightbox[CategoryA]"><img class="smallimage" src="photos/1_s.jpg" width="150" height="99" alt="タイトル #1" /></a>
  • <a href="photos/2_b.jpg" rel="lightbox[CategoryA]"><img class="smallimage" src="photos/2_s.jpg" width="150" height="99" alt="タイトル #2" /></a>
  • <a href="photos/3_b.jpg" rel="lightbox[CategoryA]"><img class="smallimage" src="photos/3_s.jpg" width="150" height="99" alt="タイトル #3" /></a>
  • <a href="photos/4_b.jpg" rel="lightbox[CategoryA]"><img class="smallimage" src="photos/4_s.jpg" width="150" height="99" alt="タイトル #4" /></a>
  • <a href="photos/5_b.jpg" rel="lightbox[CategoryA]"><img class="smallimage" src="photos/5_s.jpg" width="150" height="99" alt="タイトル #5" /></a>
  • <a href="photos/6_b.jpg" rel="lightbox[CategoryA]"><img class="smallimage" src="photos/6_s.jpg" width="150" height="99" alt="タイトル #6" /></a>
  • <a href="photos/7_b.jpg" rel="lightbox[CategoryA]"><img class="smallimage" src="photos/7_s.jpg" width="150" height="99" alt="タイトル #7" /></a>
  • <a href="photos/8_b.jpg" rel="lightbox[CategoryA]"><img class="smallimage" src="photos/8_s.jpg" width="150" height="99" alt="タイトル #8" /></a>
  • <a href="photos/9_b.jpg" rel="lightbox[CategoryA]"><img class="smallimage" src="photos/9_s.jpg" width="150" height="99" alt="タイトル #9" /></a>
  • </div>
  • </body>
  • </html>

クリック型スクリーンギャラリー/ カスタマイズ方法

クリック型スクリーンギャラリー（Lightbox）のカスタマイズって言える程ではないですが、良くある質問に少しでもお答えできればと思います。

Lightbox v2.04
by Lokesh Dhakar - www.lokeshdhakar.com
Last Modification: 2/9/08
For more information, visit:
lokeshdhakar.com projects lightbox2

Copyright(C)2009 My Island All Rights Reserved.