【第三方库接入】移动端图片可预览，支持缩放

东小记

已于 2023-04-20 11:59:32 修改

阅读量320

点赞数

分类专栏：工具前端文章标签：前端

于 2023-04-20 11:58:41 首次发布

本文链接：https://blog.csdn.net/qq_36436407/article/details/129880077

版权

前端同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

工具

15 篇文章 0 订阅

订阅专栏

文章介绍了如何利用第三方组件SmartPhoto.js在后端管理系统中实现多图上传后，前端可以点击图片进行缩放预览的功能。通过引入JS和CSS文件，设置HTML结构并实例化预览容器，实现了在移动端和PC端的演示效果。

摘要由CSDN通过智能技术生成

需求

后端管理系统上传多图，前端界面点击图片可缩放预览

第三方组件：SmartPhoto.js

官网地址

SmartPhoto.js

github发行版本源码下载地址

https://github.com/appleple/SmartPhoto/tags

代码实现

<script src="实际文件存放路径/SmartPhoto/v1.6.4/js/smartphoto.min.js"></script>
<link rel="stylesheet" href="实际文件存放路径/SmartPhoto/v1.6.4/css/smartphoto.min.css" />
<body>
<a class="previewbox" href="https://www.helloimg.com/content/images/system/home_cover_1616484705245_c3c6ea.jpg" data-group="test" data-id="test10" data-caption="test1">
    <img width="300" src="https://www.helloimg.com/content/images/system/home_cover_1616484705245_c3c6ea.jpg" alt="">
</a>
<a class="previewbox" href="https://www.z4a.net/content/images/system/home_cover_1504355901642_2b5986.jpg" data-group="test" data-id="test20" data-caption="test2">
    <img width="300"  src="https://www.z4a.net/content/images/system/home_cover_1504355901642_2b5986.jpg" alt="">
</a>
</body>

<script>
  // 实例化图片预览容器
  document.addEventListener('DOMContentLoaded', function () {
     new SmartPhoto(".previewbox");
  });
</script>