CODEWITHSUNDEEP
jqueryhtmlcssasp.net-mvcjquery-plugins
Andrus
Andrus

Reputation: 27955

How to Implement Product Image Change on Hover

I am creating a shopping cart that should contain product thumbnails in single column in a left side column and a main product image. If you hover the mouse over a thumbnail image, the main image should replaced with the image from thumbnail.

This should be like in Amazon in http://www.amazon.com/gp/product/B0057OCDQS/ref=s9_simh_gw_p422_d0_i1?pf_rd_m=ATVPDKIKX0DER&pf_rd_s=center-3&pf_rd_r=1ZQ6JXTTST3W87ZTQE26&pf_rd_t=101&pf_rd_p=470938811&pf_rd_i=507846. How do I implement this? Is there some control or jQuery plugin for this? If not, where can I find a code sample?

jQuery, jQuery UI, ASP.NET/Mono MVC3 are used.

amazon image hover

Update

Thumbnail list is very big. How to show only 3 thumbnails and add up and down scroll buttons which can select previous and next thumb. Something like:

scroll one thumb up

thumbnail image 1

thumbnail image 2

thumbnail image 3

scroll one thumb up

Upvotes: 0

Views: 4318

Answers (3)

Olaf Dietsche
Olaf Dietsche

Reputation: 74088

You can use the hover method for that

HTML:

<div class="thumbs">
    <img src="http://lorempixel.com/sports/200/400" width="50" height="50"/>
    <img src="http://lorempixel.com/city/200/400" width="50" height="50"/>
    <img src="http://lorempixel.com/people/200/400" width="50" height="50"/>
</div>

<div class="main-img">
    <img id="main" src="http://lorempixel.com/people/200/400"/>
</div>

CSS:

.thumbs {
    display: inline-block;
    vertical-align: top;
}

.thumbs img {
    display: block;
}

.main-img {
    display: inline-block;
}

JQuery:

$('.thumbs img').hover(function() {
    var url = $(this).attr('src');
    $('#main').attr('src', url);
});

JSFiddle

Upvotes: 1

A. Wolff
A. Wolff

Reputation: 74420

Try this:

<img src="img/myimage_tb.png" data-src="img/myimage.png">
<script>
    $('.productImage').hover(function(){
         $(this).data('thb') = this.src;
         this.src = $(this).data('src');
      },function(){
         this.src = $(this).data('thb');
    });
</script>

Upvotes: 2

Daragh
Daragh

Reputation: 123

Cant you just change the html of the div using the Jquery onClick ?

Upvotes: 0

Related Questions