クリック型スクリーンギャラリー/ カスタマイズ方法
クリック型スクリーンギャラリー（Lightbox）のカスタマイズって言える程ではないですが、良くある質問に少しでもお答えできればと思います。
スポンサーリンクimage 1 of 9を非表示させ、キャプション（説明文）を入れる。
画像を拡大したときに左下に出てくるimage 1 of 9を非表示させ、キャプション（説明文）を入れる。
【code】
編集・カスタマイズ等はエディタで開き修正をしてください。
【html】
大きい画像になった時、左下にキャプション（説明文）を入れる場合、下記のコード通り title="キャプション" を追加すればOKです。
- <div id="wrap">
- <a href="photos/1_b.jpg" rel="lightbox[CategoryA]" title="説明文 #1"><img class="smallimage" src="photos/1_s.jpg" width="150" height="99" alt="タイトル #1" /></a>
- <a href="photos/2_b.jpg" rel="lightbox[CategoryA]" title="説明文 #2"><img class="smallimage" src="photos/2_s.jpg" width="150" height="99" alt="タイトル #2" /></a>
- <a href="photos/3_b.jpg" rel="lightbox[CategoryA]" title="説明文 #3"><img class="smallimage" src="photos/3_s.jpg" width="150" height="99" alt="タイトル #3" /></a>
- <a href="photos/4_b.jpg" rel="lightbox[CategoryA]" title="説明文 #4"><img class="smallimage" src="photos/4_s.jpg" width="150" height="99" alt="タイトル #4" /></a>
- <a href="photos/5_b.jpg" rel="lightbox[CategoryA]" title="説明文 #5"><img class="smallimage" src="photos/5_s.jpg" width="150" height="99" alt="タイトル #5" /></a>
- <a href="photos/6_b.jpg" rel="lightbox[CategoryA]" title="説明文 #6"><img class="smallimage" src="photos/6_s.jpg" width="150" height="99" alt="タイトル #6" /></a>
- <a href="photos/7_b.jpg" rel="lightbox[CategoryA]" title="説明文 #7"><img class="smallimage" src="photos/7_s.jpg" width="150" height="99" alt="タイトル #7" /></a>
- <a href="photos/8_b.jpg" rel="lightbox[CategoryA]" title="説明文 #8"><img class="smallimage" src="photos/8_s.jpg" width="150" height="99" alt="タイトル #8" /></a>
- <a href="photos/9_b.jpg" rel="lightbox[CategoryA]" title="説明文 #9"><img class="smallimage" src="photos/9_s.jpg" width="150" height="99" alt="タイトル #9" /></a>
- </div>
【lightbox.css】
image 1 of 9を非表示する。
lightbox.cssをエディタで開き下記の部分を書き換えてください。
修正前
- #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
修正後
- #imageData #numberDisplay{ display: none; }
お役立ちツール
Lightbox v2.04
by Lokesh Dhakar - www.lokeshdhakar.com
Last Modification: 2/9/08
For more information, visit:
lokeshdhakar.com projects lightbox2