Trouble with JQuery- switching multiple images

Question

http://feathertest.me.pn/test.php The above is the link to a website im working on.

i have 2 main features:

1. As i click on the thumbnails below, an enlarged version appears on the bigger box above. The code i used for this is:

   $(function(){
       $(".thumb").click(function(){
           var imagesrc = $(this).children().prop('src');
           $('.bigImg').attr('src', imagesrc);
       });
   });
   

2. On the right side i have tiny square tiles depicting the colors available. on clicking each colors, the broom images on the left side will change to display the selected color. The code i used that is:

   <script type="text/javascript">
       $(function() {
           $('#showdiv1').click(function() {
               $('div[id^=div]').hide();
               $('#div1').show();
           });
           $('#showdiv2').click(function() {
               $('div[id^=div]').hide();
               $('#div2').show();
           });
   
       $('#showdiv3').click(function() {
           $('div[id^=div]').hide();
           $('#div3').show();
       });
   
       $('#showdiv4').click(function() {
           $('div[id^=div]').hide();
           $('#div4').show();
       });
   })
   

My problem: After i click on one of the thumbnails (enlarged version of the image is successfully displayed on the big box above) and then when i click on one of the color tiles, the broom images are successfully changing only for the thumbnails, however, the image in the big box is the last clicked image of the previous color. I want that image also to change to the chosen color.

my HTML code snippet (i've only displayed the code for two colors):

<div id="feather-prods" class="row">
                <div id="div1">
                <div id="prod-stop" class="col-md-5 col-sm-6 col-xs-8 col-xs-push-2 col-sm-push-1 col-md-push-1">
                    <div class="prod-img"><img id="tab1show" class="tab-content bigImg" src="images/broom/monara-pp-1.jpg" alt="feather, Purple monara broom"></div>

                    <div class="thumbnailImg">
                      <div id="tab1show" class="tab-content thumb"><img src="images/broom/monara-pp-1.jpg" alt="feather, Purple monara broom" border="0" width="100%" class="thumbImg" /></div>
                      <div id="tab1show" class="tab-content thumb"><img src="images/broom/monara-pp-2.jpg" alt="feather, Purple monara broom" border="0" width="100%" class="thumbImg" /></div>
                      <div id="tab1show" class="tab-content thumb"><img src="images/broom/monara-pp-3.jpg" alt="feather, Purple monara broom" border="0" width="100%" class="thumbImg" /></div>
                      <div id="tab1show" class="tab-content thumb"><img src="images/broom/monara-pp-4.jpg" alt="feather, Purple monara broom" border="0" width="100%" class="thumbImg" /></div>
                    </div>
                </div>
                </div>

                <div id="div2" style="display:none;" >
                <div id="prod-stop" class="col-md-5 col-sm-6 col-xs-8 col-xs-push-2 col-sm-push-1 col-md-push-1">
                    <div class="prod-img"><img id="tab2show" class="tab-content bigImg" src="images/broom/monara-b-1.jpg" alt="feather, black monara broom"></div>

                    <div class="thumbnailImg">
                      <div id="tab2show" class="tab-content thumb"><img src="images/broom/monara-b-1.jpg" alt="feather, black monara broom" border="0" width="100%" class="thumbImg" /></div>
                      <div id="tab2show" class="tab-content thumb"><img src="images/broom/monara-b-2.jpg" alt="feather, black monara broom" border="0" width="100%" class="thumbImg" /></div>
                      <div id="tab2show" class="tab-content thumb"><img src="images/broom/monara-b-3.jpg" alt="feather, black monara broom" border="0" width="100%" class="thumbImg" /></div>
                      <div id="tab2show" class="tab-content thumb"><img src="images/broom/monara-b-4.jpg" alt="feather, black monara broom" border="0" width="100%" class="thumbImg" /></div>
                    </div>
                </div><!-- prod images end -->
                </div>
</div> 

Please Help.
Thanks in Advance

Answer 1

Well, this is because thumbnail click event is not produced in good way. You set the bgimage src in following way:

$('.bigImg').attr('src', imagesrc);

and above code actually set the imagesrc for all .bigImg element in the document. So although you have switched to other div, you still see the last clicked image.

Please update the thumbnail click handler, so that it will only update specific .bigImg, like following:

$(function(){
    $(".thumb").click(function(){
        var imagesrc = $(this).children().prop('src');
        $('.bigImg', $(this).parent().parent()).attr('src', imagesrc);
    });
});

Also I see you have assigned prod-stop as ID for every div element, and I say, it is not a good idea to give same id to multiple elements. You 'd better change it to class name, or make id unique.