jQuery Change Image on click

Robert Granlund
Robert Granlund used Ask the Experts™
on
I have a small jQuery function that swaps images on click.  However, after you start clicking on the thumbnails the main thumbnail, the initial thumbnail starts to show up twice.  You can go here and click on the images on the left to see what I mean.

cohr-dev-ee01 DOT azurewebsites DOT net/lasers/laser/diode-laser-systems-and-fiber-lasers/highlight-d-series

<script>
$(function() {
$('.image-thumb-cont img').click(function() {
var thmb = this;
var src = this.src;
$('.main-image-cont img').fadeOut(400,function(){
thmb.src = this.src;
$(this).fadeIn(400)[0].src = src;
});
});
});

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
You're setting the thumbnail src when you should be only setting the main image src. Have a look at this (untested) code:

$('.image-thumb-cont img').click(function() {
    var src = this.src;
    $('.main-image-cont img').fadeOut(400,function(){
        $(this).attr('src', src).fadeIn(400);
    });
});

Open in new window

Author

Commented:
Perfect.  Thanks.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial