Move var count = $('.mn-img img').length; inside the mouseover callback.
When images are dynamically added to the DOM, the number of images must be calculated dynamically.
Otherwise, the count value is cached, and it will be the same even after dynamically adding multiple images.
Demo
$(document).ready(function() { var thumb = $('.thm-img img'); var outer = $('.mn-img'); var full = $('.full-img'); var count = $('.mn-img img').length; var sc_height = $(outer).height(); $(thumb).mouseover(function() { var count = $('.mn-img img').length; console.log(count); $(full).hide(); if (!$(this).hasClass('added')) { $(this).addClass('added').clone().insertAfter($(full));
.det-sl-wrp { display: block; width: 100%; height: 480px; background: #FFFFFF; border: 1px solid #fff; margin: 8px 0 8px 0; } .mn-img { position: relative; width: 650px; height: 100%; background: red; float: left; overflow: scroll; } .thumb-wrp { float: left; width: 145px; overflow-y: auto; height: 100%; margin: 0 0 0 8px; } .mn-img img { width: 100%; height: 100%; } .sl-lft, .sl-rgh { top: 0; right: 0; position: absolute; width: 50%; height: 100%; background: rgba(0, 0, 0, 0); } .sl-rgh { left: 0; } .thm-img { width: 100%; display: block; height: 100px; margin: 2px 0 2px 0; } .thm-img img { width: 100%; height: 100%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="det-sl-wrp"> <div class="mn-img"> <div class="sl-lft"></div> <img class="full-img" src="img/img/1.jpg"> <div class="sl-rgh"></div> </div> <div class="thumb-wrp"> <div class="thm-img"> <img src="img/img/1.jpg"> </div> <div class="thm-img"> <img src="img/img/2.jpg"> </div> <div class="thm-img"> <img src="img/img/3.jpg"> </div> <div class="thm-img"> <img src="img/img/4.jpg"> </div> <div class="thm-img"> <img src="img/img/1.jpg"> </div> <div class="thm-img"> <img src="img/img/2.jpg"> </div> <div class="thm-img"> <img src="img/img/3.jpg"> </div> <div class="thm-img"> <img src="img/img/4.jpg"> </div> </div> </div>