how can i solve elevatezoom doesnt work correctly - gallery

Question

i'm new on laravel,
i use elevatezoom in my gallery image. when i change photo, the photo change but elevatezoom show first image. how can i sove this problem.
my html code is here
<div class="col-md-10" id="product-gallery-image" style="float: left">
<img class="mainimage" id="zoom-product" src="{{url($product->thumbnail)}}"
data-zoom-image="{{url($product->img)}}" style="max-width: 100%">
</div>
<div class="col-md-2" style="float: right;padding: 0" id="product_galery">
<ul class="gallery-ul">
<li data-image="{{url($product->thumbnail)}}" data-main-image="{{url($product->img)}}">
<img src="{{url($product->thumbnail)}}"
style="width: 100%">
</li>
<li data-image="{{url($product->thumbnail1)}}" data-main-image="{{url($product->img1)}}">
<img style="max-width: 100%"
src="{{url($product->thumbnail1)}}">
</li>
<li data-image="{{url($product->thumbnail2)}}" data-main-image="{{url($product->img2)}}">
<img style="max-width: 100%"
src="{{url($product->thumbnail2)}}">
</li>
</ul>
</div>
and jquery codes are here,
<script>
var productgalery = $('#product_galery');
var subnailproductgalery = productgalery.find('.gallery-ul li');
subnailproductgalery.click(function () {
var index = $(this).index();
var mainimageurl = $(this).attr('data-main-image');
var thumbimageurl = $(this).attr('data-image');
$('.gallery-ul li').removeClass('activeli');
$(this).addClass('activeli');
showgallery(mainimageurl, thumbimageurl);
})
function showgallery(imageurl, thumb) {
var productgalleryimage = $('#product-gallery-image');
productgalleryimage.find('.mainimage')
.attr('src', thumb)
.attr('data-zoom-image', imageurl)
.elevateZoom();
}
$('#zoom-product').elevateZoom({
'zoomWindowOffetx': -880,
'zoomWindowWidth': 500,
});