title: Owl Carousel 2 Integration With Elevated Zoom
body: <p>I am trying to apply zoom on the selected/active image in owl carousel. For this I have applied a special class "zoomimage" to active image. But for some odd reason I am unable to get elevateZoom to work. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var owl2 = $('.owl-carousel');
  owl2.owlCarousel({
     nav: true,
     loop: true,
     items:1,
     center:true,
  });
  
  owl2.on('changed.owl.carousel', function(property) {
     var current = property.item.index;
     $(".owl-item").find("img").removeClass("zoomimage");
     $(property.target).find(".owl-item").eq(current).find("img").addClass("zoomimage");     
  })
  
  $('.zoomimage').elevateZoom({
     zoomType: "inner",
     cursor: "crosshair",
     zoomWindowFadeIn: 500,
     zoomWindowFadeOut: 750
  }); </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.owl-theme img {
     max-width: 500px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/&gt;
  &lt;link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"&gt;&lt;/script&gt;
  &lt;script src="http://www.elevateweb.co.uk/wp-content/themes/radial/jquery.elevatezoom.min.js"&gt;&lt;/script&gt;
  &lt;div class="owl-carousel owl-theme"&gt;
     &lt;div class="item"&gt;
        &lt;img src="https://3.imimg.com/data3/UD/XH/MY-9326144/hybrid-cow-500x500.jpg" data-zoom-image="https://3.imimg.com/data3/UD/XH/MY-9326144/hybrid-cow-500x500.jpg"&gt;
     &lt;/div&gt;
     &lt;div class="item"&gt;
        &lt;img src="http://www.floridamilk.com/core/fileparse.php/77/urlt/Holstein-Cow-Headshot.jpg" data-zoom-image="http://www.floridamilk.com/core/fileparse.php/77/urlt/Holstein-Cow-Headshot.jpg"&gt;
     &lt;/div&gt;
     &lt;div class="item"&gt;
        &lt;img src="http://www.canadianbic.ca/wp-content/uploads/2016/10/Cows-500x500.jpg" data-zoom-image="http://www.canadianbic.ca/wp-content/uploads/2016/10/Cows-500x500.jpg"&gt;
     &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>You can also view it on <a href="http://jsfiddle.net/eo37gv1s/1/" rel="nofollow noreferrer">JSFiddle</a></p>