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

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

 115985  489  查看评论 (350)
强大的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实现头像和文字的切换,并且伴随着圆环的转动,很有趣的效果
  图片展示
 7808  126

鼠标划过图片放大效果

一般用于展示类,鼠标滑过,图片放大,焦点图
  图片展示
 20550  159

jQuery支持图片放大缩小查看效果

e-smart-zoom-jquery.js插件 页面上提供了两个按钮,可以让你的图片点击放大或者缩小 当然,对于懒人来说,真是懒得点击 那么你可以将鼠标悬停在图片上,滚动鼠标滚轮即可实现图片的放大或者缩小效果
  图片展示
 78991  186

html5极速3D立体式图片相册切换效果

html5极速3D立体式图片相册切换效果
  图片展示
 38974  290

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

    laugh 0
    2018/7/11 15:12:33
    模板里可以增加删除图片功能么,异步删除 回复
    迷路的糕羊 0
    2018/6/26 15:52:29
    移动端的图片缩放有问题........ 回复
    dawangf 0
    2018/6/26 13:51:31
    多页 多个 图片合集的时候(ajax请求) 要怎么调用,前面几个可以,后面就报错了,怎么解决,群主 回复
    迷路的糕羊 0
    2018/6/22 11:38:31
    请问一下这个插件支持移动端的么? 回复
    无所谓 0
    2018/6/13 15:38:45
    如果我只想查看某一div下边的某些照片呢????应该加什么参数
    回复
    谷阿莫子 0
    2018/5/29 16:31:20
    插件是个好插件 可是js版本IE8下也就不说了 jquery版本IE下只能说部分功能不能用 左右翻转 刚好要用到这个功能 可惜不支持IE8 哎 回复
    易燃易爆 ! 0
    2018/4/28 17:05:19
    $("body").on("click","img",function(){
        $("#content3").viewer();
    })

    这样为什么点击两次才能触发?

    回复
    0
    2018/4/28 16:35:12
    jsp页面遍历出来只能查看第一张,下面预览都能出来可是点击翻页没反应,其他按钮也不能用,求解答
        0
        2018/5/2 8:51:18
        尝试把图片路径写死了一下,好像跟循环遍历没关系,目前的情况是 1:1缩放,轮播按钮可以用,其他按钮点击无反应...求大神解答,感激不尽
    回复
    骚年,你渴望力量吗? 0
    2018/4/26 14:18:26
    怎么讲图片置顶?在页面里嵌套一个。图片在里,点击图片时怎么让层的父级展示图片?不然图片显示的特别小
        骚年,你渴望力量吗?0
        2018/4/26 14:25:15
        在页面嵌套一个ifream,高度只有150px;图片在层中,点击图片时图片高度只有150px,怎么让他出现在的父级显示?
    回复
    犹如如沐春风 0
    2018/4/24 11:10:14
取消回复