javascript - サムネイル画像を大きな画像と交換しますか？

Question

400px x 400pxの大きな画像が1つと、その下に小さな画像が3つあり、それぞれが100pxx100pxです。

サムネイル画像の1つをクリックすると、大きな画像と交換され、本質的に拡大される可能性はありますか？

Answer 1

編集：

HTML：

<div id="imgThumbs">
    <a href="#" class="showImg"><img src="img1-thumb.jpg" width="100" height="100" alt="Image 1" /></a>
    <a href="#" class="showImg"><img src="img2-thumb.jpg" width="100" height="100" alt="Image 2" /></a>
    <a href="#" class="showImg"><img src="img3-thumb.jpg" width="100" height="100" alt="Image 3" /></a>    
</div>

<div id="imgHolder"></div>

CSS：

#imgThumbs {  
    overflow: hidden;
    margin: 20px auto;
    width: 366px;
    text-align: center;
}

.showImg { 
    width: 100px; 
    padding: 10px; 
    float:left; 
    border: 1px solid #fff;
    border-radius: 5px;    
}

#imgHolder {
    border-top: 5px solid #bbb;
    padding: 20px;
    margin: 0 auto;
    width: 80%;
}

.active {
    border: 1px dashed #aaa;
    background-color: #f4f4f4;
}

jQuery：

$('.showImg').hover(function(){        
    $(".showImg").removeClass("active");
    $(this).addClass("active");

    var imgURL = $(this).find('img').attr("src");    
    $('#imgHolder').find('img').attr("src", imgURL);    
});​

ワーキングデモ

Answer 2

はい、それは可能で簡単です。

あなたは次のようなことをするかもしれません

// small images have the class 'small'
$('img.small').click(function(){
    this.src = 'path to big image';
});

通常、ファイルの命名規則を使用します。だからあなたのコードは

$('img.small').click(function(){
    // changes the source of small images
    // from somepath.png to somepath-big.png
    this.src = this.src.split('.')[0]+'-big.png';
    $(this).removeClass('small');
});

しかし、あなたはあなたが何をしたいのかを正確に決定しなければなりません...