图片预览插件Viewer.js的使用

最新推荐文章于 2024-09-06 22:10:23 发布

LGEC

最新推荐文章于 2024-09-06 22:10:23 发布

阅读量2.3k

点赞数 1

分类专栏：随笔文章标签： javascript 前端

本文链接：https://blog.csdn.net/LGEC_/article/details/124824617

版权

随笔专栏收录该内容

14 篇文章 1 订阅

订阅专栏

本文介绍了如何利用ViewerJS库实现网页中图片的预览功能。通过提供ViewerJS的下载地址和示例代码，详细展示了在HTML中引入ViewerJS的步骤，并特别指出需注意的两点：一是要先定义`var Viewer = window.Viewer`，二是设置`url: 'data-original'`来指定图片预览的来源。此外，还提到了其他配置选项，帮助读者灵活定制图片预览行为。

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

一、相关资源

Viewer 下载地址： https://github.com/fengyuanchen/viewerjs
其中docs文件夹下是使用演示：

使用演示

PS: 图片预览依赖的资源可以使用docs文件夹下css文件夹下的viewer.css和js文件夹下的viewer.js，也可以使用dist文件加下压缩后的资源：viewer.min.css和viewer.min.js

二、使用介绍

简单使用如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片预览</title>
    <link rel="stylesheet" href="./css/viewer.min.css">
    <script src="./js/viewer.min.js"></script>
</head>

<body>

    <ul id="imgView">
        <li><img class="img" data-original="./img/photo.jpeg" src="./img/photo.jpeg" alt=""></li>
        <li><img class="img" data-original="./img/photo.jpeg" src="./img/photo.jpeg" alt=""></li>
        <li><img class="img" data-original="./img/photo.jpeg" src="./img/photo.jpeg" alt=""></li>
        <li><img class="img" data-original="./img/photo.jpeg" src="./img/photo.jpeg" alt=""></li>
    </ul>
                
    <script>
        var Viewer = window.Viewer;  //  定义Viewer 
        var viewer = new Viewer(document.getElementById('imgView'), {
            url: 'data-original'
        });
    </script>
</body>

</html>

需要注意的点：1、Viewer 必须先定义：var Viewer = window.Viewer;2、url: ‘data-original’ 中的值 ‘data-original’ 指的是预览图片的地址，需要在img上设置好自定义属性，否则不会生效。当然属性值的名字可以随意设置，只有上下保持一致就好。除url外还有其他配置如下图：

在这里插入图片描述