Search code examples
javascriptjqueryelevatezoom

slideshow jQuery ElevateZoom plus image wont work for each image

Im working on a project for a product page but ive some issues that I tried to fix, but couldn't fix them.

I tried to make slideshow with bootstrap (Carousel) and tried too put the elevateZoom-Plus plugin in for the zoom effect, but when it goes to another slide it doesnt work, how can I fix that.

HTML:

<div class="carousel-inner" style=" text-align: center;">
  <div class="carousel-item active">
  <img class="zoom-img zoom_01" 
       src="img/voetbal-product-1-small.png"
       data-zoom-image="img/voetbal-product-1.png"
       width="411"/>              
  </div>
  <div class="carousel-item">
      <img class="zoom-img zoom_01"
           src="img/voetbal-product-1-small.png"
           data-zoom-image="img/voetbal-product-1.png"
           width="411"/>      
  </div>
  <div class="carousel-item">
  <img class="zoom-img zoom_01"
           src="img/voetbal-product-1-small.png"
           data-zoom-image="img/voetbal-product-1.png"
           width="411"/>      
  </div>
</div>

JS:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/igorlino/elevatezoom-plus/1.1.6/src/jquery.ez-plus.js"></script>
<script type="text/javascript"> 


$('.zoom_01').first().ezPlus({
    zoomWindowWidth: 200,
    zoomWindowHeight: 200
});

</script>

The plugin: https://igorlino.github.io/elevatezoom-plus/

That the elevateZoom-Plus plugin will work for the one slide of the images, and i tried too put .first() infront if it, but still doesn't work.

Solution 

  • //initiate the plugin and pass the id of the div containing gallery images
$("#zoom_03").elevateZoom({
    gallery:'gallery_01',
    cursor: 'pointer',
  easing : true,
    galleryActiveClass: 'active',
    imageCrossfade: true,
    loadingIcon: 'https://www.elevateweb.co.uk/spinner.gif'
});

//pass the images to Fancybox
$("#zoom_03").bind("click", function(e) {
    var ez = $('#zoom_03').data('elevateZoom');
    $.fancybox(ez.getGalleryList());
    return false;
});
    /*set a border on the images to prevent shifting*/
#gallery_01 img{border:2px solid white;}
/*Change the colour*/
.active img{border:2px solid #333 !important;}

.clearfix {
    display: block;
    width: 100%;
    float: left;
}

.zoom-left {
    max-width: 412px;
}
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="https://www.elevateweb.co.uk/wp-content/themes/radial/jquery.elevatezoom.min.js"></script>
<div class="zoom-left">
   <img style="border:1px solid #e8e8e6;" id="zoom_03" src="https://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image3.png" 
      data-zoom-image="https://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image3.jpg"
      width="411"  />
   <div id="gallery_01" style="width="500pxfloat:left; ">
   <a  href="#" class="elevatezoom-gallery active" data-update="" data-image="https://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image1.png" 
      data-zoom-image="https://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image1.jpg">
   <img src="https://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image1.png" width="100"  /></a>
   <a  href="#" class="elevatezoom-gallery"
      data-image="https://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image2.png"
      data-zoom-image="https://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image2.jpg"
      ><img src="https://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image2.png" width="100"  /></a>
   <a href="tester" class="elevatezoom-gallery" 
      data-image="https://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image3.png"
      data-zoom-image="https://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image3.jpg">
   <img src="https://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image3.png" width="100"  />
   </a>
   <a href="tester" class="elevatezoom-gallery" 
      data-image="https://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image4.png"
      data-zoom-image="https://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image4.jpg"
      class="slide-content"
      ><img src="https://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image4.png" width="100"  /></a>
</div>