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

クリック型スクリーンギャラリー(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; }