如何实现点击Owl Carousel图片在模态框中打开

问题描述 #

我用Owl Carousel创建了一个轮播图，想实现点击图片时在模态视图中打开该图片，现有代码如下：

现有HTML代码 #

<div class="owl-carousel owl-theme">
  <div class="item">
    <img src="image/g1.jpg" alt="">
  </div>
  <div class="item">
    <img src="image/g2.jpg" alt="">
  </div>
  <div class="item">
    <img src="image/g3.jpg" alt="">
  </div>
  <div class="item">
    <img src="image/g4.jpg" alt="">
  </div>
  <div class="item">
    <img src="image/g5.jpg" alt="">
  </div>
  <div class="item">
    <img src="image/g6.jpg" alt="">
  </div>
  <div class="item">
    <img src="image/g7.jpg" alt="">
  </div>
  <div class="item">
    <img src="image/g8.jpg" alt="">
  </div>
</div>

现有脚本代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js" integrity="sha512-gY25nC63ddE0LcLPhxUJGFxa2GoIyA5FLym4UJqHDEMHjp8RET6Zn/SHo1sltt3WuVtqfyxECP38/daUc/WVEA==" crossorigin="anonymous"
    referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous"
    referrerpolicy="no-referrer"></script>
<script>
  $('.owl-carousel').owlCarousel({
    loop: true,
    margin: 10,
    nav: true,
    dots: false,
    navText: ["<i class='fas fa-chevron-left'></i>", "<i class='fas fa-chevron-right'></i>"],
    responsive: {
      0: {
        items: 1
      },
      768: {
        items: 2
      },
      1000: {
        items: 4
      }
    }
  })
  $(document).on('click', '.owl-item', function() {
    owlIndex = $(this).index();
    $('.owl-stage-outer').trigger('to.owl.carousel', owlIndex);
  });
</script>

解决方案 #

1. 添加模态框HTML结构 #

在页面</body>标签前插入模态框的HTML代码：

<!-- 图片预览模态框 -->
<div class="image-modal">
  <div class="modal-overlay"></div>
  <div class="modal-content">
    <img id="modal-image" src="" alt="预览图片">
    <button class="modal-close">&times;</button>
  </div>
</div>

2. 添加模态框CSS样式 #

在页面的<style>标签或外部CSS文件中添加以下样式：

/* 模态框基础样式 */
.image-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

.modal-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
}

.modal-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  margin: 5% auto;
}

#modal-image {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.modal-close {
  position: absolute;
  top: -40px;
  right: 0;
  color: #fff;
  font-size: 36px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.modal-close:hover {
  color: #ddd;
}

3. 修改JavaScript逻辑 #

替换原有的点击事件代码，添加模态框的显示与隐藏逻辑：

$('.owl-carousel').owlCarousel({
  loop: true,
  margin: 10,
  nav: true,
  dots: false,
  navText: ["<i class='fas fa-chevron-left'></i>", "<i class='fas fa-chevron-right'></i>"],
  responsive: {
    0: {
      items: 1
    },
    768: {
      items: 2
    },
    1000: {
      items: 4
    }
  }
})

// 点击轮播图片打开模态框
$(document).on('click', '.owl-item img', function() {
  const imgSrc = $(this).attr('src');
  $('#modal-image').attr('src', imgSrc);
  $('.image-modal').fadeIn();
});

// 点击遮罩层或关闭按钮关闭模态框
$(document).on('click', '.modal-close, .modal-overlay', function() {
  $('.image-modal').fadeOut();
});

// 按ESC键关闭模态框
$(document).keydown(function(e) {
  if (e.key === 'Escape') {
    $('.image-modal').fadeOut();
  }
});

效果说明 #

修改完成后，点击轮播中的任意图片，会弹出模态框展示该图片的大图；点击模态框的遮罩层、关闭按钮，或者按下键盘上的ESC键，都可以关闭模态框。

内容的提问来源于stack exchange，提问作者emoleumassi