图片放大功能:FancyBox插件使用

点击图片放大功能:FancyBox插件使用

导入插件：

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.css">
<!-- js (jquery插件只能引入一次,且应在fancybox.js之前引用)-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.js"></script>

html代码

• 只需要在 原来的 img表签之外 加入固定的a标签即可

<a href="https://source.unsplash.com/ndjyaOp0fOc/1500x1000" data-fancybox="images">
      <img src="https://source.unsplash.com/ndjyaOp0fOc/240x160" />
  </a>

完成了
如果想自己的 图片分组的话 更改这个值data-fancybox=”group1”

参考:https://blog.csdn.net/kkstrive/article/details/78607094