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

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

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

【DEMO】

【ディレクトリ構成例】

index.html (gallery.htmlギャラリートップページ)
　　　 |
　　　 +-- css / style.css
　　　 | 　　 　　　 lightbox.css
　　　 |
　　　 +-- js / jquery.smooth-scroll.min.js
　　　 | 　　　 　 jquery-1.7.2.min.js
　　　 | 　　　 　 jquery-ui-1.8.18.custom.min.js
　　　 | 　　　 　 lightbox.js
　　　 |
　　　 +-- images /close.png
　　　 | 　　　　　　　　 next.png
　　　 | 　　　　　　　　 prev.png
　　　 | 　　　　　　　　 loading.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>の間に下記のコードを入力します。

  • <div id="wrap">
  • <a href="photos/1_b.jpg" rel="lightbox[plants]" title="説明文 #1"><img class="smallimage" src="photos/1_s.jpg" alt="代替テキスト" /></a>
  • <a href="photos/2_b.jpg" rel="lightbox[plants]" title="説明文 #2"><img class="smallimage" src="photos/2_s.jpg" alt="代替テキスト" /></a>
  • <a href="photos/3_b.jpg" rel="lightbox[plants]" title="説明文 #3"><img class="smallimage" src="photos/3_s.jpg" alt="代替テキスト" /></a>
  • <a href="photos/4_b.jpg" rel="lightbox[plants]" title="説明文 #4"><img class="smallimage" src="photos/4_s.jpg" alt="代替テキスト" /></a>
  • <a href="photos/5_b.jpg" rel="lightbox[plants]" title="説明文 #5"><img class="smallimage" src="photos/5_s.jpg" alt="代替テキスト" /></a>
  • <a href="photos/6_b.jpg" rel="lightbox[plants]" title="説明文 #6"><img class="smallimage" src="photos/6_s.jpg" alt="代替テキスト" /></a>
  • <a href="photos/7_b.jpg" rel="lightbox[plants]" title="説明文 #7"><img class="smallimage" src="photos/7_s.jpg" alt="代替テキスト" /></a>
  • <a href="photos/8_b.jpg" rel="lightbox[plants]" title="説明文 #8"><img class="smallimage" src="photos/8_s.jpg" alt="代替テキスト" /></a>
  • <a href="photos/9_b.jpg" rel="lightbox[plants]" title="説明文 #9"><img class="smallimage" src="photos/9_s.jpg" alt="代替テキスト" /></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】

【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>フォト ギャラリー サンプル LightBox2 #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/jquery.smooth-scroll.min.js"></script>
  • <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
  • <script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
  • <script type="text/javascript" src="js/lightbox.js"></script>
  • </head>
  • <body>
  • <div id="wrap">
  • <a href="photos/1_b.jpg" rel="lightbox[plants]" title="説明文 #1"><img class="smallimage" src="photos/1_s.jpg" alt="代替テキスト" /></a>
  • <a href="photos/2_b.jpg" rel="lightbox[plants]" title="説明文 #2"><img class="smallimage" src="photos/2_s.jpg" alt="代替テキスト" /></a>
  • <a href="photos/3_b.jpg" rel="lightbox[plants]" title="説明文 #3"><img class="smallimage" src="photos/3_s.jpg" alt="代替テキスト" /></a>
  • <a href="photos/4_b.jpg" rel="lightbox[plants]" title="説明文 #4"><img class="smallimage" src="photos/4_s.jpg" alt="代替テキスト" /></a>
  • <a href="photos/5_b.jpg" rel="lightbox[plants]" title="説明文 #5"><img class="smallimage" src="photos/5_s.jpg" alt="代替テキスト" /></a>
  • <a href="photos/6_b.jpg" rel="lightbox[plants]" title="説明文 #6"><img class="smallimage" src="photos/6_s.jpg" alt="代替テキスト" /></a>
  • <a href="photos/7_b.jpg" rel="lightbox[plants]" title="説明文 #7"><img class="smallimage" src="photos/7_s.jpg" alt="代替テキスト" /></a>
  • <a href="photos/8_b.jpg" rel="lightbox[plants]" title="説明文 #8"><img class="smallimage" src="photos/8_s.jpg" alt="代替テキスト" /></a>
  • <a href="photos/9_b.jpg" rel="lightbox[plants]" title="説明文 #9"><img class="smallimage" src="photos/9_s.jpg" alt="代替テキスト" /></a>
  • </div>
  • </body>
  • </html>

Lightbox2
ダウンロード
http://lokeshdhakar.com/projects/lightbox2/

Copyright(C)2009 My Island All Rights Reserved.