jQuery が自動的に提供するものは非常に多いため、jQuery コードが行うすべてのことを行う答えを提供するのは困難です。thumbnail
のクラスを持つすべての画像を検索し、そのonclick
プロパティを画像スワップを実行するイベント ハンドラーに設定する簡単な例を次に示します。
onload = function () {
var bigImg = document.getElementById("mainImage");
for (var i = 0; i < document.images.length; i++) {
var img = document.images[i];
if (/\bthumbnail\b/.test(img.className) {
img.onclick = thumbnailHandler;
}
}
function thumbnailHandler(e) {
bigImg.src = this.src;
}
};
IE7 をサポートする必要がない場合は、以下を使用して少し簡略化できますdocument.querySelectorAll()
。
onload = function () {
var bigImg = document.getElementById("mainImage");
var thumbs = document.querySelectorAll(".thumbnail");
for (var i = 0; i < thumbs.length; i++) {
thumbs[i].onclick = thumbnailHandler;
}
function thumbnailHandler(e) {
bigImg.src = this.src;
}
};
余談ですが、メイン画像のソースをサムネイルのソースに設定している理由がわかりません。サムネイルに画像全体をロードしていますか? これは大量のダウンロードが必要になる可能性があり、ページのメモリ フットプリントが急速に増加する可能性があります。