前端點擊預覽圖片Viewer.js使用方法(簡單的操作)

更新時間：2025年01月13日 10:54:37 作者：可愛的秋秋啊

這篇文章主要介紹了前端點擊預覽圖片Viewer.js使用的相關資料,Viewer.js是一款強大的圖片查看器,支持移動設備觸摸事件、響應式、放大/縮小、旋轉、翻轉、移動、鍵盤操作、全屏幻燈片模式、縮略圖和標題顯示等功能,需要的朋友可以參考下

1、 Viewer.js簡介

Viewer.js 是一款強大的圖片查看器。我們通過Viewer.js 在頁面上添加強大的圖片查看功能，同時，這款優(yōu)秀的插件配置操作起來也非常的方便。
Viewer.js分為2個版本，js版本和jquery版本，下載地址分別為
純JS版本：GitHub - fengyuanchen/viewerjs: JavaScript image viewer.

jQuery 版本：GitHub - fengyuanchen/jquery-viewer: A jQuery plugin wrapper for Viewer.js.

2、Viewer.js支持的功能

支持移動設備觸摸事件
支持響應式
支持放大/縮小
支持旋轉(類似微博的圖片旋轉)
支持水平/垂直翻轉
支持圖片移動
支持鍵盤
支持全屏幻燈片模式(可做屏保)
支持縮略圖
支持標題顯示
支持多種自定義事件

3、Viewer.js的API

名稱	類型	默認值	說明
inline	布爾值	false	啟用 inline 模式
button	布爾值	true	顯示右上角關閉按鈕(jQuery 版本無效)
navbar	布爾值/整型	true	顯示縮略圖導航
title	布爾值/整型	true	顯示當前圖片的標題(現(xiàn)實 alt 屬性及圖片尺寸)
toolbar	布爾值/整型	true	顯示工具欄
tooltip	布爾值	true	顯示縮放百分比
movable	布爾值	true	圖片是否可移動
zoomable	布爾值	true	圖片是否可縮放
rotatable	布爾值	true	圖片是否可旋轉
scalable	布爾值	true	圖片是否可翻轉
transition	布爾值	true	使用 CSS3 過度
fullscreen	布爾值	true	播放時是否全屏
keyboard	布爾值	true	是否支持鍵盤
interval	整型	5000	播放間隔，單位為毫秒
zoomRatio	浮點型	0.1	鼠標滾動時的縮放比例
minZoomRatio	浮點型	0.01	最小縮放比例
maxZoomRatio	數(shù)字	100	最大縮放比例
zIndex	數(shù)字	2015	設置圖片查看器 modal 模式時的 z-index
zIndexInline	數(shù)字	0	設置圖片查看器 inline 模式時的 z-index
url	字符串/函數(shù)	src	設置大圖片的 url
build	函數(shù)	null	回調函數(shù)，具體查看演示
built	函數(shù)	null	回調函數(shù)，具體查看演示
show	函數(shù)	null	回調函數(shù)，具體查看演示
shown	函數(shù)	null	回調函數(shù)，具體查看演示
hide	函數(shù)	null	回調函數(shù)，具體查看演示
hidden	函數(shù)	null	回調函數(shù)，具體查看演示
view	函數(shù)	null	回調函數(shù)，具體查看演示
viewed	函數(shù)	null	回調函數(shù)，具體查看演示

4、按照和引入的方式

Javascript版：在html文件的head中直接引入文件

  <link href="static/js/viewer.min.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"   rel="stylesheet">
  <script src="static/js/viewer.min.js" type="application/javascript"></script>

jQuery版，需要多引入一個，在html文件的head中直接引入文件

<link href="static/js/viewer.min.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"   rel="stylesheet">
<script src="static/js/viewer.min.js" type="application/javascript"></script>
<script src="static/js/jquery.min.js"></script>

npm，直接install

npm install viewerjs

5、使用方法（簡單的操作）

我這里用的是一個js版本，簡單做了一個demo ， html代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link href="static/js/viewer.min.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"   rel="stylesheet">
    <script src="static/js/viewer.min.js" type="application/javascript"></script>
    <script src="static/js/jquery.min.js"></script>  
</head>
<body>
    <div class="container ">
        <div id="image-gallery" style="display: none">
            //這里面可以放多個圖片，顯示按照指定的索引進行（索引從0開始）
            <img src="static/images/banner2.jpg" alt="Image 1">
        </div>
        // 點擊顯示預覽圖片
        <div id="btn01"  style="width: 70px;height: 30px;border: 1px solid #ccc;text-align: center;line-height: 30px;">點擊</div>
    </div>
</body>

//這里放js操作
</html

js代碼，點擊顯示圖片，操作事件

<script>
    // 添加事件
    document.addEventListener('DOMContentLoaded', function () {

        // 獲取點擊后需要顯示的圖片id
        var gallery = document.getElementById('image-gallery');
        // 給顯示的圖片添加一下屬性在dom中
        var viewer = new Viewer(gallery, {
            inline: false,
            button: true,
            navbar: true,
            toolbar: true,
            title: true,
            tooltip: true,
            movable: true,
            zoomable: true,
            rotatable: true,
            scalable: true,
        });

        // 添加按鈕點擊事件
        document.getElementById('btn01').addEventListener('click', function () {
          
            // 這里指定要預覽的圖片索引
            viewer.view(0); // 預覽第一張圖片（索引從0開始）
        });
    });
</script>