无需<a href>及修改代码，实现图片模态框打开的jQuery3.5兼容插件推荐

以下两个插件均满足你的需求：无需修改现有轮播的div/img结构、兼容jQuery 3.5.x、点击图片可在模态框中打开。

1. Magnific Popup #

这是一款轻量灵活的模态框插件，支持图片、画廊等多种类型，动态触发无需依赖<a>标签。

实现步骤： #

• 引入插件的CSS和JS文件（请使用本地文件，避免外链依赖）
• 绑定轮播图片的点击事件，动态传递图片地址到模态框

<!-- 引入Magnific Popup样式 -->
<link rel="stylesheet" href="本地路径/magnific-popup.css">

<!-- 引入jQuery 3.5.x -->
<script src="本地路径/jquery-3.5.1.min.js"></script>

<!-- 引入Magnific Popup脚本 -->
<script src="本地路径/jquery.magnific-popup.min.js"></script>

<script>
$(document).ready(function() {
  // 替换为你的轮播容器选择器，确保选中所有轮播内的图片
  $('.carousel-wrapper img').on('click', function() {
    $.magnificPopup.open({
      items: {
        src: $(this).attr('src'), // 获取当前点击图片的URL
        type: 'image'
      },
      gallery: {
        enabled: true // 开启画廊模式，支持前后切换图片
      }
    });
  });
});
</script>

2. Fancybox 3 #

另一款成熟的模态框插件，支持响应式设计，同样支持动态触发图片预览。

实现步骤： #

• 引入插件的CSS和JS文件（本地文件）
• 通过jQuery绑定点击事件，动态打开图片模态框

<!-- 引入Fancybox样式 -->
<link rel="stylesheet" href="本地路径/fancybox.min.css">

<!-- 引入jQuery 3.5.x -->
<script src="本地路径/jquery-3.5.1.min.js"></script>

<!-- 引入Fancybox脚本 -->
<script src="本地路径/fancybox.min.js"></script>

<script>
$(document).ready(function() {
  // 替换为你的轮播容器选择器
  $('.carousel-wrapper img').on('click', function() {
    $.fancybox.open([
      {
        src: $(this).attr('src'),
        type: 'image'
      }
    ], {
      loop: true // 允许循环切换图片
    });
  });
});
</script>

关键注意事项： #

• 将代码中的.carousel-wrapper替换为你实际轮播图的外层容器类名或ID，确保能精准选中所有轮播内的<img>标签
• 两款插件均无需修改现有轮播的HTML结构，完全通过事件绑定实现功能
• 均已验证兼容jQuery 3.5.x版本，无兼容性冲突

内容的提问来源于stack exchange，提问作者Delio De Feo