highslide.jsを使ってみるその３

JavaScript

highslide.jsで拡大画像をかっこよく見せる事ができた。

でね。その拡大画像に注釈を付けたいなと思っている。他のサイトを見たりすると、できているんでやってみる。

<a href="a.jpg" class="highslide" onclick="return hs.expand(this)">
  <img src="a_s.jpg" alt="" border=0 title="Click to enlarge"/>
</a>
<div class="highslide-caption">画像を説明文を書きますよ</div>

これでいいはずなんだが・・・

<div class="highslide-caption">画像を説明文を書きますよ</div>

上記を追加するだけでキャプションが追加されるはずなんだが・・・できん。何で、highslide.jsで拡大画像にキャプションを追加しているサイトの裏を見ているんだが、同じものがありきちんと出来ている。

でも、なんでできないの？おっかしいな〜

少し調べた。公式サイトに行ってサンプル見ながらいろいろ試した。

<a href="a.jpg" class="highslide" onclick="return hs.expand(this,{captionId: 'caption1'})">
  <img src="a_s.jpg" alt="" border=0 title="Click to enlarge"/>
</a>
<div class="highslide-caption" id="caption1">画像を説明文を書きますよ</div>

上記のようにHTML側を修正。

onclick="return hs.expand(this,{captionId: 'caption1'})"

とし、

<div class="highslide-caption" id="caption1">

とする。

さらにcssに下記を追加。

.highslide-caption {
    display: none;
    
    border: 2px solid white;
    border-top: none;
    font-family: Verdana, Helvetica;
    font-size: 10pt;
    padding: 5px;
    background-color: white;
}
.highslide-display-block {
    display: block;
}
.highslide-display-none {
    display: none;
}

決められたスタイルシートを記述しないといけないのはやっかいだ。知らないとできないってやつですよね。

これでまた少しかっこよくなったよ。