Question

我正在尝试对猫头鹰旋转木马中的选定/活动图像应用缩放。为此我已经为活动图像应用了一个特殊的类“zoomimage”。但由于一些奇怪的原因，我无法让ElevateZoom工作。

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

.owl-theme img {
   max-width: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<script src="http://www.elevateweb.co.uk/wp-content/themes/radial/jquery.elevatezoom.min.js"></script>
<div class="owl-carousel owl-theme">
   <div class="item">
      <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">
   </div>
   <div class="item">
      <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">
   </div>
   <div class="item">
      <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">
   </div>
</div>

您也可以在JSFiddle

上查看

Owl Carousel 2与高架变焦融合

0 个答案: