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

所属分类:媒体-图片展示,幻灯片和轮播图

 99483  455  查看评论 (337)
强大的jQuery图片查看器插件Viewer.js ie兼容8

1、引入文件

JS 版本:

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

jQuery 版本:

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

注意:JS 版本和 jQuery 版本名字虽然一样,但代码不一样,不能通用。

2、HTML

<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、JavaScript

JS 版本:

var viewer = new Viewer(document.getElementById('jq22'));

jQuery 版本:

$('#jq22').viewer();

配置

名称类型默认值说明
inline布尔值false启用 inline 模式
button布尔值true显示右上角关闭按钮(jQuery 版本无效)
navbar布尔值/整型true显示缩略图导航
title布尔值/整型true显示当前图片的标题(现实 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数字100最大缩放比例
zIndex数字2015设置图片查看器 modal 模式时的 z-index
zIndexInline数字0设置图片查看器 inline 模式时的 z-index
url字符串/函数src设置大图片的 url
build函数null回调函数,具体查看演示
built函数null回调函数,具体查看演示
show函数null回调函数,具体查看演示
shown函数null回调函数,具体查看演示
hide函数null回调函数,具体查看演示
hidden函数null回调函数,具体查看演示
view函数null回调函数,具体查看演示
viewed函数null回调函数,具体查看演示
相关插件-图片展示,幻灯片和轮播图

jQuery背景墙聚光灯效果代码

jQuery背景墙聚光灯效果代码
  图片展示
 10939  45

纯css3放大镜

通过css3样式实现放大镜的效果
  图片展示
 14179  95

移动端仿淘宝造物节3d

html5场景淘宝造物节3D酷炫空间专题页面模板
  图片展示
 4705  64

jQuery全屏图片轮播插件fullpage.js

jQuery全屏图片轮播插件fullpage.js
  图片展示
 30800  79

讨论这个项目(337)回答他人问题或分享插件使用方法奖励jQ币

    卢朝阳 0
    2018/4/19 22:34:53
    人潮拥挤我需要你 0
    2018/4/18 17:45:00
    我css和js和配置都加里面了,点击图片没有反应,各位大神求解 回复
    那°动人女孩♂ 0
    2018/4/17 16:46:17
    我这个是用在pc端的,现在怎么适配ipad 回复
    qebabe 0
    2018/4/15 21:10:49
    很好很强大!! 回复
    逃不过 0
    2018/4/10 10:56:33
    IE10+还有问题 图片显示不出来
    回复
    风筝、断弦 0
    2018/3/12 15:47:12
    为什么列表第一个图片点开 内层图片不刷新?? 其它都没问题
        风筝、断弦0
        2018/3/12 15:47:56
        有人知道的吗?百度都没这个bug
    回复
    KsnCcl 0
    2018/2/27 14:38:45
    直接缩放到10000%了? 回复
    好久不见丶 0
    2018/2/6 11:23:03
    为什么我的图片就是显示不出来。只有黑色阴影部分
    回复
    WEB-LCM 0
    2018/2/1 13:27:17

    为什么我要点击两次才有效果呢

    回复
    北极星下落不明 0
    2018/1/14 18:29:50

    为什么我自己弄,它只显示黑色阴影没有图片哦??

        好久不见丶0
        2018/2/6 11:23:34
        我的也是这样,你弄好了吗?
        爱JB谁谁*MIUI面子 0
        2018/3/21 10:29:49
        是不是初始化调插件的时候url有误
    回复
取消回复