Jquery : Change Product Image on click event

Following Example shows how to use jquery to change the product image in Product Image Container.

The same example can be tested in jsfiddle (http://jsfiddle.net/sanjayingole/9que4n1p/5/)

We have a left panel and a right panel, where :

• Left Panel contains small image icons.
• Right Panel shows the larger image when an icon from left panel is clicked.

Javascript :

$(".imageIconLink").click(function() {

    

    var imgSrc= $(this).find("img").attr("src");

    

    $(".largeImage").attr("src", imgSrc); 

});

CSS :

.smallImage {

    height: 80px; width: 80px; border: 0px solid;

}

.largeImage {

    height: 280px; width: 380px; border: 0px solid;

}

.leftImgDiv {

    width : 20%;

    float : left;

    height : 300px;

    overflow : auto;

}

.rightImgDiv {

    width : 80%;

    float : right;

}

HTML :

<div class="leftImgDiv">

<a href="#" class="imageIconLink">

    <img class="smallImage" src="http://s7d1.scene7.com/is/image/BedBathandBeyond/33748242127673p?hei=2000&amp;wid=2000&amp;qlt=50,1" :="" border="" width="2000" height="2000"/>

</a>

    

<a href="#" class="imageIconLink">

    <img class="smallImage" src="http://www.brookstone.com/webassets/product_images/700x700/833371p.jpg" width="252" height="252"/>

    </a>    

<a href="#" class="imageIconLink">

    <img class="smallImage" src="http://slimages.macys.com/is/image/MCY/products/8/optimized/2546128_fpx.tif?01AD=31absA3WJUG8eGA5NUMCutd7x16A-v8cmsm4k_DZNgdpUvQGEe2iugA&amp;01RI=958CD8AFBE261DF&amp;01NA=&amp;wid=1320&amp;hei=1616&amp;fit=fit,1&amp;$filterlrg$"/>

</a>

<a href="#" class="imageIconLink">

    <img class="smallImage"

    src="http://www.u3j.org/wp-content/uploads/2014/07/uncategorized-amazing-where-to-buy-leather-sofa-in-malaysia-where-to-buy-leather-furniture-repair-kits-where-to-buy-leather-furniture-repair-kit-where-to-buy-leather-furniture-in-bali-where-to-bu.jpg" />

</a>

    

    

<a href="#" class="imageIconLink">

    <img class="smallImage"

    src="http://www.u3j.org/wp-content/uploads/2014/07/uncategorized-amazing-where-to-buy-leather-sofa-in-malaysia-where-to-buy-leather-furniture-repair-kits-where-to-buy-leather-furniture-repair-kit-where-to-buy-leather-furniture-in-bali-where-to-bu.jpg" />

</a>

</div>    

    

<div class="rightImgDiv">

    <img class="largeImage" src="http://s7d1.scene7.com/is/image/BedBathandBeyond/33748242127673p?hei=2000&amp;wid=2000&amp;qlt=50,1"/>

</div>