このサンプルは、jQueryのattr()APIを利用してimg要素のイメージを置換します。サンプルが表示されたら画面をスクロールしてサムネイルに移動してください。サムネイルをクリックすると、そのイメージが拡大されて表示されます。
ここでは、サムネイルを宣言したanchor要素にclick時のイベントハンドラを登録しています。Click時のイベントハンドラでは、anchor要素のhref属性とtitle属性の値を取得してimg要素のsrc属性とalt属性を書き換えます。これで、サムネイルのイメージが拡大されて表示されます。
$("h2").append('')
$(".thumbs a").click(function() {
var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");
$(".largeImage").attr({ src: largePath, alt: largeAlt });
$("h2 em").html(" (" + largeAlt + ")");
return false;
});
<p>
<img class="largeImage" src="images/tutorials/img1-lg.jpg" alt="Large image" />
</p>
<p class="thumbs">
<a href="images/tutorials/img2-lg.jpg" title="Image 2">
<img src="images/tutorials/img2-thumb.jpg" />
</a>
<a href="images/tutorials/img3-lg.jpg" title="Image 3">
<img src="images/tutorials/img3-thumb.jpg" />
</a>
<a href="images/tutorials/img4-lg.jpg" title="Image 4">
<img src="images/tutorials/img4-thumb.jpg" />
</a>
<a href="images/tutorials/img5-lg.jpg" title="Image 5">
<img src="images/tutorials/img5-thumb.jpg" />
</a>
<a href="images/tutorials/img6-lg.jpg" title="Image 6">
<img src="images/tutorials/img6-thumb.jpg" />
</a>
</p>