亜細亜ノ蛾 - Weblog

画像拡大スクリプトを切り替えたい

ここからはいつものように、よく解ってないままに妄想。Highslide JS のサイトでは、下記のようなコードでサムネイルと拡大画像へのリンクを記述するように指定があります。

<a href="large-image.jpg" class="highslide" 
      onclick="return hs.expand(this)">
   <img src="thumbnail.jpg"
      alt="Highslide JS" title="Click to enlarge" 
      height="100" width="100" />
</a>

たぶん、onclick="return hs.expand(this)" は画像ひとつひとつに付けなくても、「特定の class が指定されたリンクタグをクリックすると働く」ようにできる、はず。とすると、クリックして発生するイベントも JavaScript で制御可能になる。ということは、拡大に使う JavaScript の切り替えができそう。

将来、もっと自分好みの画像拡大スクリプトが出てきても安心、というような記述方法はどんなものだろう？

<div id="main"><!-- 記事本文 -->
……
  <a href="hoge.jpg" class="expand">
     <img src="hoge.thumb.jpg"
        alt="hoge 画像" title="クリックすると拡大！"
        height="100" width="100" />
  </a>
……
</div>

上記のように、「記事本文（id が main の div）」の中にある「class が expand（任意）のリンク」をクリックすると、画像拡大などの任意のイベントが発生──とすればいいわけか。

よし、ということで、さっそく作ってみたのが下記の

（省略されました 続きを読むにはこのサイト経由で Amazon/楽天の商品を 65535 個購入してください）

──てか、たぶん簡単に実装できると思う。

Enjoy!

asiamoth the Not Javascripter