viewer万能的可放大缩小翻转切换上下件的图片预览插件

本文主要是介绍viewer万能的可放大缩小翻转切换上下件的图片预览插件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

`一、需求是上面展示一张大图，下面一排小图可以通过小图切换上面的大图，然后点击大图可以放大预览并可以左右切换上下件预览`

**
二、具体使用方式引入相关的js、css，用cdn的方式引入加载会更快些

<link href="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.6/viewer.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.6/viewer.min.js"></script>

三、具体代码如下

<!DOCTYPE html>
<html>
<head><link href="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.6/viewer.min.css" rel="stylesheet">
</head>
<style>#image-gallery{width:800px;object-fit: contain;}.pic-c{display: flex;align-items: center;}.pic-item-c{display: flex;margin-top:10px;}.pic-item-c .pic-item.active, .pic-item-c .pic-item:hover{opacity: 1;}.pic-item-c .pic-item{width: 70px;height: 70px;overflow: hidden;margin-right:10px;box-shadow: 0 1px 5px rgba(34, 25, 25, .8);-moz-box-shadow: 0 1px 5px rgba(34, 25, 25, .8);-webkit-box-shadow: 0 1px 5px rgba(34, 25, 25, .8);border: 1px solid rgba(34, 25, 25, .8);opacity: 0.6;}.pic-item-c img{width:100%;height:100%;object-fit: contain;}
</style>
<body><div id="image-gallery"><!-- 显示大图 --><img id="big-image" src="https://imagecdn.chengxuan.com/images/2023a/mini-641-1.jpg"><!-- 隐藏的大图用于viewer.js预览 --><div style="display:none;"><img src="https://imagecdn.chengxuan.com/images/2023a/mini-641-1.jpg"><img src="https://www.cguardian.com/images/GD-2024-CN005/GD-2024-CN005-008-004/_lastModified1714969274000_/351_10/m.jpg"></div></div><!-- 小图列表 --><div class="thumbnail-content"><div class="pic-item-c"><!-- 循环展示多个小图 --><div class="pic-item"><img class="small-image" src="https://imagecdn.chengxuan.com/images/2023a/mini-641-1.jpg" data-big-image="https://imagecdn.chengxuan.com/images/2023a/mini-641-1.jpg"></div><div class="pic-item"><img class="small-image" src="https://www.cguardian.com/images/GD-2024-CN005/GD-2024-CN005-008-004/_lastModified1714969274000_/351_10/m.jpg" data-big-image="https://www.cguardian.com/images/GD-2024-CN005/GD-2024-CN005-008-004/_lastModified1714969274000_/351_10/m.jpg"></div></div></div><script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.6/viewer.min.js"></script>
<script>var viewer;
var currentImageIndex = 0; // 用于记录当前展示的大图索引document.addEventListener('DOMContentLoaded', function() {$(".pic-item").first().addClass('active');document.querySelectorAll('.small-image').forEach((item, index) => {item.addEventListener('click', function(event) {// 阻止默认点击行为event.stopPropagation();event.preventDefault()$(this).parent().addClass('active');$(this).parent().siblings().removeClass('active');const bigImageUrl = this.getAttribute('data-big-image');document.getElementById('big-image').src = bigImageUrl;currentImageIndex = index; // 更新当前大图索引});});var hiddenImages = document.querySelector('#image-gallery div');viewer = new Viewer(hiddenImages, {url: 'src',toolbar: {zoomIn: 1,zoomOut: 1,oneToOne: 1,reset: 1,prev: 1,play: {show: 1,size: 'large',},next: 1,rotateLeft: 1,rotateRight: 1,flipHorizontal: 1,flipVertical: 1,},hidden: function () {viewer.destroy();},viewed: function() {//viewer.zoomTo(1);  最好还是不写根据图片大小自适应否则有的大图100%放大都溢出屏幕 了viewer.zoomTo();}});document.getElementById('big-image').addEventListener('click', function() {viewer.view(currentImageIndex);viewer.show();});
});</script></body>
</html>

注意事项：因为需要点击放大的时候可以左右切换其他小图的大图，所以我们需要提前准备好列表可以设置display：none页面看不到即可

 <div id="image-gallery"><!-- 显示大图 --><img id="big-image" src="https://imagecdn.chengxuan.com/images/2023a/mini-641-1.jpg"><!-- 隐藏的大图用于viewer.js预览 --><div style="display:none;"><img src="https://imagecdn.chengxuan.com/images/2023a/mini-641-1.jpg"><img src="https://www.cguardian.com/images/GD-2024-CN005/GD-2024-CN005-008-004/_lastModified1714969274000_/351_10/m.jpg"></div></div>

这里的大图和小图可以做不同的比例图片，不然大图放大会失真，看各自的功能需求。

 toolbar: {zoomIn: 1,zoomOut: 1,oneToOne: 1,reset: 1,prev: 1,play: {show: 1,size: 'large',},next: 1,rotateLeft: 1,rotateRight: 1,flipHorizontal: 1,flipVertical: 1,},

上面的toolbar可以设置具体展示那些操作按钮隐藏哪些，更根据需求可定
效果图如下
在这里插入图片描述
如果想去掉预览时候展示图片大小的字样可以配置
.viewer-title {
display: none !important;
}