Jquery自定义旋转木马内的图像缩放模式

jquery custom carousel within image zoom modal

本文关键字：图像 缩放 模式 自定义 旋转木马 Jquery      更新时间：2023-09-26

我当前的代码是图像滑块。当你点击任何图像时，它会在模态窗口中打开一个更大的版本。值得一提的是，我不能使用插件来解决这个问题，我看过这里的其他问题，但答案要么过时，要么不适合我的情况。

目前你不能在模态中滑动较大的图像，你只能打开/关闭你正在使用的图像。我想在模态窗口内启用一个滑块，它将简单地从左到右滚动较大的图像。我已经设置了下一个/右按钮，试图让他们简单地淡出下一个/前一个图像，但他们目前没有做任何事情。

请参阅我创建的jsFiddle来模拟我的当前设置。

JS 

 $(".product--slider .slide").each(function(index) {
   // Show the modal window
   $('#product-slider-flickity img').click(function() {
     $("#imageshow").html('<img src="' + $(this).attr('src') + '"/>');
     $(".p-image-zoom").addClass("md-show");
   });
 });
 $('.md-close-zoom').click(function() {
   $('.p-image-zoom').removeClass('md-show');
 });
 $('#imageshow').click(function() {
   $(".p-image-zoom").removeClass("md-show");
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product--slider" id="product-slider-flickity" data-flickity='{ "wrapAround": true, "pageDots": false, "imagesLoaded": true, "draggable": false }'>
  <div class="slide image-1">
    <img src="http://placekitten.com/1024/1024" />
  </div>
  <div class="slide image-2">
    <img src="http://fillmurray.com/1024/1024" />
  </div>
  <div class="slide image-3">
    <img src="http://placehold.it/1024x1024" />
  </div>
</div>
<div class="md-modal p-image-zoom">
  <div class="md-content">
    <div id='imageshow'></div>
    <button class="md-close-zoom">Close</button>
  </div>
</div>
<div class="md-overlay"></div>

看看我做了什么，让我知道它是否ok .https://jsfiddle.net/293sh54n/6/

  $('.left').click(function(){
   if(activeDivimg < 1 ){
    activeDivimg = 2
    }else{
      activeDivimg = activeDivimg - 1
    }
    console.log('left'+activeDivimg)
    $("#imageshow").html('<img src="'+$('.slide').eq(activeDivimg).find('img').attr('src')+'"/>');
        console.log(activeDivimg+"asd")
  });
  $('.right').click(function(){
  if (activeDivimg == 2){
      activeDivimg = 0
  }else{
      activeDivimg = activeDivimg + 1
  }
相关文章：