Home > IT Tips > Highslide JS応用：画像にタイトルを付加する


Highslide JS応用：画像にタイトルを付加する

以下の記事で実装方法やサンプルを掲載しました。
●Highslide JS実装手順

今回は、このHighslide JSを使った応用として、拡大された画像の下にタイトルを付ける手法を紹介したいと思います。

通常だと以下の通りです。
20071230_04.jpg

これにタイトルを加えると、以下の通りです。
20071230_04.jpg
Vista壁紙です

記述させるものは、通常のHighslide JSを実装させるタグ（青文字部分）に以下の赤文字部分を付け加えます。
<a href="http://blog31.fc2.com/b/blackcat13numbers/file/20080203_1.jpg"  id="title" class="highslide" onclick="return hs.expand(this)" onkeypress="return hs.expand(this)"><img src="http://blog31.fc2.com/b/blackcat13numbers/file/20080203_1s.jpg" alt="20080203_1.jpg" border="0" /></a><br clear="all" /><div class="highslide-caption" id="caption-for-title">Vista壁紙です</div>
※勿論、赤文字内の「id="○○"」は紐付けてください。
○id="title"
○id="caption-for-title"
上記の部分です。

これで、タイトルも一緒にオーバーレイで表示されているかと思います。ちなみに、追加した最後の <div>〜</div> は、画像タグの最初に入れても動作するようです。

ひとつのページに複数タイトルを入れたい場合は、赤文字内の「id="○○"」を複数作成して紐付ければ実装できますので、是非試してみてください。

 Comments:4

どりーみー URL 2008-04-23 (水) 19:31

やはり、titleを付けるにはidが必要になってきますね。このＩＤは前に使ったもの(この場合ですとtitle)はこのＢｌｏｇには2度と使えないんですよね？
ずっと前に使ったことを忘れている場合などの心配ですが・・・（笑い）

TomomiX URL 2008-04-23 (水) 20:54

どりーみーさんのブログでもできると思いますよv-392
実際にHighslideをつけたタグに以下の
id="title"
id="caption-for-title"
を記事通りに追加してみてください。title部分は何でもかまいません。ふたつが同じであれば。
また、ひとつのページにこれを複数わけたい場合は名称を変えてくださいv-410

hammett URL 2008-04-27 (日) 12:49

Hislide jsを検索して、ここにきました。いままであたらしいウィンドウを上げていましたが、これからはこれがいいですね。病みつきになりそうです。

TomomiX URL 2008-04-28 (月) 09:09

hammettさん
こんにちわ。コメントどうもありがとうございますv-398
今後もHighslide系の記事を増やす予定ですので遊びに来ていただければ幸いです^^

Comment Form

 Trackback+Pingback:0

TrackBack URL for this entry
http://blackcat13numbers.blog31.fc2.com/tb.php/190-813917dd
Listed below are links to weblogs that reference
Highslide JS応用：画像にタイトルを付加する from TRASH

Home > IT Tips > Highslide JS応用：画像にタイトルを付加する

Search
Adsense

Calendar
« 2008/07 »
S M T W T F S
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
Categories
Tagcloud
Archives
Recent Comments
Recent Trackback
Feeds

↑Page Top