强大的jQuery图片查看器插件使用教程

强大的jQuery图片查看器插件Viewer.js

包含js和jQuery两种版本,是一个简便且强大的图片浏览插件

js安装版本

1、引入js和css文件,已打包附件

<link rel="stylesheet" href="css/viewer.min.css">
<script src="js/viewer.min.js"></script>

2、给你的图片列表应用id="jq22"的属性,可以参考一下代码

<ul id="jq22">
    <li><img src="img/tibet-1.jpg" alt="图片1"></li>
    <li><img src="img/tibet-2.jpg" alt="图片2"></li>
    <li><img src="img/tibet-3.jpg" alt="图片3"></li>
    <li><img src="img/tibet-4.jpg" alt="图片4"></li>
    <li><img src="img/tibet-5.jpg" alt="图片5"></li>
    <li><img src="img/tibet-6.jpg" alt="图片6"></li>
</ul>

3、最后在</body>前加入以下js代码

<script>
      var viewer = new Viewer(document.getElementById('jq22'));
</script>

jQuery 安装版本

1、引入js和css文件,也在附件内,注意一个是js一个是jquery,不要看混了

<link rel="stylesheet" href="css/viewer.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/viewer.min.js"></script>

2、还是如前面一样给你的图片列表应用id="jq22"的属性

3、最后在</body>前加入以下代码

<script>
     $('#jq22').viewer();
</script>

附件打包

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏超然的博客

肢解 HTTP 服务器构建

所有请求数据都在 request对象中,数据解析,还需要 url, querystring模块

11510
来自专栏逸鹏说道

【开源】1句代码搞定图片批量上传,无需什么代码功底【无语言界限】

开源地址:https://github.com/dunitian/LoTUploader WebUploader基础上的封装改善,一句代码全部实现(样式美化,实...

30990
来自专栏前端人人

React多页面应用3(webpack4 多页面实现)

本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React多页面应用1(webpack4 开发环境搭建...

39850
来自专栏深度学习之tensorflow实战篇

使用selenium模块模拟浏览器爬去网页,并进行点击定位内容笔记

针对模拟浏览器采用。 webdriver.Firefox() 火狐浏览器模拟 Windows系统解决办法如下: 1、下载geckodriver.exe: ...

30430
来自专栏码生

Chrome 浏览器最牛插件之一 Vimium

最近学习了一下,整理了一下官方的默认按键。其中我使用到的都进行了中文翻译,一些没有翻译的是我没有使用的,这部分理解不深,不想误导大家,所以将英文原文放在这里,还...

26710
来自专栏高爽的专栏

Flex事件机制(一)

Flex事件贯穿我们整个开发,事件分为两类,用户事件和系统事件,比如说我们在页面点击了一个按钮,这是用户触发的事件,当组件初始化完毕,会触发creationC...

21000
来自专栏Micro_awake web

Vue学习5:条件渲染

1.html中的<template>元素是一种保存客户端内容的机制,该内容在页面加载时不被渲染,但是运行时可以使用js实例化。

6900
来自专栏码农阿宇

html基础加强2

1.表单元素 表单元素一定要提交在form标签里面 2.id和name 所有元素都有ID,但只有表单元素才有name ID不可以重复,name可以重复...

31180
来自专栏Micro_awake web

Vue学习5:条件渲染

14830
来自专栏张戈的专栏

WordPress开启颜色评论但不造成XSS漏洞的小方法

前段时间分享过一些 XSS 漏洞的修复技巧,而且也说到了 WordPress 开启颜色评论需要在 functions.php 中插入如下代码,也就是禁用 Wor...

366100

扫码关注云+社区

领取腾讯云代金券