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

最新推荐文章于 2024-04-12 14:36:46 发布

LGEC

最新推荐文章于 2024-04-12 14:36:46 发布

阅读量2.2k

点赞数 1

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

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

版权

随笔专栏收录该内容

14 篇文章 1 订阅

订阅专栏

一、相关资源

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外还有其他配置如下图：

在这里插入图片描述

LGEC

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
图片预览插件Viewer.js的使用

一、相关资源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">
复制链接

扫一扫