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

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

 306563  1029  查看评论 (485)
分享到微信朋友圈
X
强大的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回调函数,具体查看演示
相关插件-图片展示,幻灯片和轮播图

HTML5卡片人物介绍动画展示效果

HTML5卡片人物介绍动画展示效果ie9和ie10没有测试,ie8以下不支持。基于bootstrap框架制作
  图片展示
 43150  515

jQuerh H5移动端图片预览插件fly_zomm_img.js

H5图标浏览插件,支持多图识别切换,支持手势放大切换
  图片展示
 57883  342

jQuery图片预览插件

jQuery图片预览插件,支持图片放大,缩小,旋转。
  图片展示
 77470  459

焦点效果

类似于百叶窗的效果
  图片展示
 31634  339

讨论这个项目(485)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    记得打卡 0
    2021/11/8 17:07:16
    荆棘 0
    2021/6/25 17:51:50
    请问有源码吗?移动端双指缩放直接放到最大了,而且无法缩小。或者更新下插件?急用 回复
    荆棘 0
    2021/6/25 17:37:28
    有源码吗? 或者可以默认打开时候得缩放比例吗?
        荆棘1
        2021/6/25 17:50:26
        解决了,在viewed回调中,强制viewer.zoomTo(1); 比例就可以了
    回复
    376174502 0
    2021/3/23 9:08:05
    这个怎么隐藏和自定义按钮? 回复
    @ 叶 , 飘零。@ 0
    2021/2/1 10:08:21
    0
    2020/9/28 11:25:31
    iframe中不能全屏怎么解决呢?
        摧残你的柔弱0
        2021/2/25 17:11:50
        同问?请问解决了吗
        和你,赏日落0
        2021/10/8 16:29:52
        请问解决了吗😥
    回复
    Delete 0
    2020/9/26 11:01:40
    jsp引入无效
        BattleofLexington0
        2020/9/26 13:38:42

        和你用的什么程序无关,调用问题,请认真检查。

    回复
    0
    2020/9/17 10:21:05
    $('#jq22').viewer('destory'); 回复
    0
    2020/9/17 10:19:56
    烟味 0
    2020/9/5 13:53:58
    怎么点击背景就关闭图片预览
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复