Change big image onmouseover thumbnails from gallery carousel

Question

The situation : I created an image gallery and in the right side an image carousel. In the left/right side of the image carousel I'm having 2 arrows and I can see the images from the left/right. When onmouseover one image from the carousel, the bigger image should be changed with the hovered image and when onmouseout the old big image should be back.

The problem : The onmouseover is working only to the first image from the top of the row. So if you hover over the first image from the top, the big image is changed. Also, if you click the arrow from the right and then hover first image it works. But if you hover other images, is not working.

What I tried : I tried different versions and combinations to access the image from the div carouse-item. I tried to receive the image source of hovered image by using var source = $(this).attr('src'); and then by updating main image source. $('.main').attr('src', source);

The code : Sorry for having too much code but I could not show you otherwise. Also, please see JSFiddle if is not working: http://jsfiddle.net/cpL85t2h/

 var original = $('.main').attr('src'); $('.thumbnail').mouseover(function() { // retrieve image source var source = $(this).attr('src'); // retrieve image source of hovered image $('.main').attr('src', source); // update main image source }) .mouseout(function() { $('.main').attr('src', original); // restore original image source }); //This is for the gallery carousel $('.carousel .carousel-item').each(function() { var next = $(this).next(); if (!next.length) { next = $(this).siblings(':first'); } next.children(':first-child').clone().appendTo($(this)); if (next.next().length > 0) { next.next().children(':first-child').clone().appendTo($(this)); } else { $(this).siblings(':first').children(':first-child').clone().appendTo($(this)); } }); 

 body { background: green; padding: 20px; font-family: Helvetica; } .column #gallery-image { width: 200px; height: 215px; object-fit: cover; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } .gallery-item { width: 200px; height: 215px; float: left; padding: 0px; margin-bottom: 6%; } #img-responsive { width: 60px; height: 50px; } .carousel-inner .carousel-item-right.active, .carousel-inner .carousel-item-next { transform: translateX(33.33%); } .carousel-inner .carousel-item-left.active, .carousel-inner .carousel-item-prev { transform: translateX(-33.33%) } .carousel-inner .carousel-item-right, .carousel-inner .carousel-item-left { transform: translateX(0); } .item-container { width: 96%; display: block; flex-direction: row; align-items: center; margin-bottom: 4%; margin-left: -0.5%; margin-top: 5%; padding-bottom: 5%; border-bottom: 1px solid #ccc; } #img-responsive { width: 60px; height: 50px; } .image-carousel { display: block; width: 34%; margin-left: 14%; margin-bottom: 5%; } .col-4 { position: relative; width: 100%; min-height: 1px; padding-right: 3px; padding-left: 3px } .carousel-control-prev { position: absolute; bottom: 0; left: 0; top: auto; padding-top: 15px; padding-bottom: 15px; padding-right: 7px; margin-bottom: 1%; margin-left: -8%; color: black; font-size: 17px; text-decoration: none; } .carousel-control-next { position: absolute; bottom: 0; right: 0; padding-top: 15px; padding-bottom: 15px; padding-left: 7px; top: auto; margin-bottom: 1%; margin-right: -8%; color: black; font-size: 17px; text-decoration: none; } 

 <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"></script> <div class="gallery row clearfix"> <div class="row"> <div class="column"> <div class="products-content"> <div class="gallery-item"> <img src="https://old.intersport.co.uk/images/puma-mens-evo-training-yellow-football-t-shirt-p2092-5311_image.jpg" id="gallery-image" class="main"> </div> <div class="image-carousel"> <div class="row"> <div id="recipeCarousel" class="carousel slide" data-ride="carousel"> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img class="thumbnail" src="https://5.imimg.com/data5/EJ/GB/MY-2190204/football-sports-t-shirt-500x500.jpg" id="img-responsive"> </div> <div class="carousel-item"> <img class="thumbnail" src="https://old.intersport.co.uk/images/puma-kids-evotrg-red-football-training-t-shirt-p5342-14566_image.jpg" id="img-responsive"> </div> <div class="carousel-item"> <img class="thumbnail" src="https://images-na.ssl-images-amazon.com/images/I/517K4f5BthL._SL1000_.jpg" id="img-responsive"> </div> <div class="carousel-item"> <img class="thumbnail" src="https://media-11teamsports.de/ArticleOriginals/adidas-originals-sc-t-shirt-football-damen-weiss-lifestyle-streetwear-trend-alltag-casual-freizeit-ce1669.jpg" id="img-responsive"> </div> </div> <a class="carousel-control-prev" href="#recipeCarousel" role="button" data-slide="prev"> <span class="fa fa-chevron-left" aria-hidden="true"></span> </a> <a class="carousel-control-next" href="#recipeCarousel" role="button" data-slide="next"> <span class="fa fa-chevron-right" aria-hidden="true"></span> </a> </div> </div> </div> </div> </div> </div> </div> 

Answer 1

I trying to resolve your problem. Use $(document).ready

 $(document).ready(function(e) { var original = $('.main').attr('src'); $('.thumbnail').mouseover(function() { // retrieve image source var source = $(this).attr('src'); // retrieve image source of hovered image $('.main').attr('src', source); // update main image source }) .mouseout(function() { $('.main').attr('src', original); // restore original image source }); }); //This is for the gallery carousel $('.carousel .carousel-item').each(function() { var next = $(this).next(); if (!next.length) { next = $(this).siblings(':first'); } next.children(':first-child').clone().appendTo($(this)); if (next.next().length > 0) { next.next().children(':first-child').clone().appendTo($(this)); } else { $(this).siblings(':first').children(':first-child').clone().appendTo($(this)); }}); 

 body { background: green; padding: 20px; font-family: Helvetica; } .column #gallery-image { width: 200px; height: 215px; object-fit: cover; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } .gallery-item { width: 200px; height: 215px; float: left; padding: 0px; margin-bottom: 6%; } #img-responsive { width: 60px; height: 50px; } .carousel-inner .carousel-item-right.active, .carousel-inner .carousel-item-next { transform: translateX(33.33%); } .carousel-inner .carousel-item-left.active, .carousel-inner .carousel-item-prev { transform: translateX(-33.33%) } .carousel-inner .carousel-item-right, .carousel-inner .carousel-item-left { transform: translateX(0); } .item-container { width: 96%; display: block; flex-direction: row; align-items: center; margin-bottom: 4%; margin-left: -0.5%; margin-top: 5%; padding-bottom: 5%; border-bottom: 1px solid #ccc; } #img-responsive { width: 60px; height: 50px; } .image-carousel { display: block; width: 34%; margin-left: 14%; margin-bottom: 5%; } .col-4 { position: relative; width: 100%; min-height: 1px; padding-right: 3px; padding-left: 3px } .carousel-control-prev { position: absolute; bottom: 0; left: 0; top: auto; padding-top: 15px; padding-bottom: 15px; padding-right: 7px; margin-bottom: 1%; margin-left: -8%; color: black; font-size: 17px; text-decoration: none; } .carousel-control-next { position: absolute; bottom: 0; right: 0; padding-top: 15px; padding-bottom: 15px; padding-left: 7px; top: auto; margin-bottom: 1%; margin-right: -8%; color: black; font-size: 17px; text-decoration: none; } 

 <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <link rel="stylesheet" href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <div class="gallery row clearfix"> <div class="row"> <div class="column"> <div class="products-content"> <div class="gallery-item"> <img src="https://old.intersport.co.uk/images/puma-mens-evo-training-yellow-football-t-shirt-p2092-5311_image.jpg" id="gallery-image" class="main"> </div> <div class="image-carousel"> <div class="row"> <div id="recipeCarousel" class="carousel slide" data-ride="carousel"> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img class="thumbnail" src="https://5.imimg.com/data5/EJ/GB/MY-2190204/football-sports-t-shirt-500x500.jpg" id="img-responsive"> </div> <div class="carousel-item"> <img class="thumbnail" src="https://old.intersport.co.uk/images/puma-kids-evotrg-red-football-training-t-shirt-p5342-14566_image.jpg" id="img-responsive"> </div> <div class="carousel-item"> <img class="thumbnail" src="https://images-na.ssl-images-amazon.com/images/I/517K4f5BthL._SL1000_.jpg" id="img-responsive"> </div> <div class="carousel-item"> <img class="thumbnail" src="https://media-11teamsports.de/ArticleOriginals/adidas-originals-sc-t-shirt-football-damen-weiss-lifestyle-streetwear-trend-alltag-casual-freizeit-ce1669.jpg" id="img-responsive"> </div> </div> <a class="carousel-control-prev" href="#recipeCarousel" role="button" data-slide="prev"> <span class="fa fa-chevron-left" aria-hidden="true"></span> </a> <a class="carousel-control-next" href="#recipeCarousel" role="button" data-slide="next"> <span class="fa fa-chevron-right" aria-hidden="true"></span> </a> </div> </div> </div> </div> </div> </div> </div> 

Answer 2

The problem is that the dynamic element isnt in the DOM on page load... Fix the second function and it will work..

Switch position on the two functions..

    original = $('.main').attr('src');
//This is for the gallery carousel 
$('.carousel .carousel-item').each(function() {
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));

  if (next.next().length > 0) {
    next.next().children(':first-child').clone().appendTo($(this));
  } else {
    $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
  }
});


$('.thumbnail').mouseover(function() {
    // retrieve image source
    source = $(this).attr('src'); // retrieve image source of hovered image
    $('.main').attr('src', source); // update main image source
  })
  .mouseout(function() {
    $('.main').attr('src', original); // restore original image source
  });

Also added classes instead of ID's and switched in the CSS...

See updated fiddle