快捷導(dǎo)航

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

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

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

1、 Viewer.js簡介

Viewer.js 是一款強(qiáng)大的圖片查看器。我們通過Viewer.js 在頁面上添加強(qiáng)大的圖片查看功能，同時(shí)，這款優(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支持的功能

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

3、Viewer.js的API

名稱	類型	默認(rèn)值	說明
inline	布爾值	false	啟用 inline 模式
button	布爾值	true	顯示右上角關(guān)閉按鈕(jQuery 版本無效)
navbar	布爾值/整型	true	顯示縮略圖導(dǎo)航
title	布爾值/整型	true	顯示當(dāng)前圖片的標(biāo)題(現(xiàn)實(shí) alt 屬性及圖片尺寸)
toolbar	布爾值/整型	true	顯示工具欄
tooltip	布爾值	true	顯示縮放百分比
movable	布爾值	true	圖片是否可移動
zoomable	布爾值	true	圖片是否可縮放
rotatable	布爾值	true	圖片是否可旋轉(zhuǎn)
scalable	布爾值	true	圖片是否可翻轉(zhuǎn)
transition	布爾值	true	使用 CSS3 過度
fullscreen	布爾值	true	播放時(shí)是否全屏
keyboard	布爾值	true	是否支持鍵盤
interval	整型	5000	播放間隔，單位為毫秒
zoomRatio	浮點(diǎn)型	0.1	鼠標(biāo)滾動時(shí)的縮放比例
minZoomRatio	浮點(diǎn)型	0.01	最小縮放比例
maxZoomRatio	數(shù)字	100	最大縮放比例
zIndex	數(shù)字	2015	設(shè)置圖片查看器 modal 模式時(shí)的 z-index
zIndexInline	數(shù)字	0	設(shè)置圖片查看器 inline 模式時(shí)的 z-index
url	字符串/函數(shù)	src	設(shè)置大圖片的 url
build	函數(shù)	null	回調(diào)函數(shù)，具體查看演示
built	函數(shù)	null	回調(diào)函數(shù)，具體查看演示
show	函數(shù)	null	回調(diào)函數(shù)，具體查看演示
shown	函數(shù)	null	回調(diào)函數(shù)，具體查看演示
hide	函數(shù)	null	回調(diào)函數(shù)，具體查看演示
hidden	函數(shù)	null	回調(diào)函數(shù)，具體查看演示
view	函數(shù)	null	回調(diào)函數(shù)，具體查看演示
viewed	函數(shù)	null	回調(diào)函數(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">
            //這里面可以放多個圖片，顯示按照指定的索引進(jìn)行（索引從0開始）
            <img src="static/images/banner2.jpg" alt="Image 1">
        </div>
        // 點(diǎn)擊顯示預(yù)覽圖片
        <div id="btn01"  style="width: 70px;height: 30px;border: 1px solid #ccc;text-align: center;line-height: 30px;">點(diǎn)擊</div>
    </div>
</body>

//這里放js操作
</html

js代碼，點(diǎn)擊顯示圖片，操作事件

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

        // 獲取點(diǎn)擊后需要顯示的圖片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,
        });

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