1

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,
});

0 Answers0