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

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

 85573  414  查看评论 (320)
强大的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回调函数,具体查看演示
相关插件-图片展示,幻灯片和轮播图

仿微信朋友圈图片展示效果

仿微信朋友圈图片展示效果
  图片展示
 26205  144

移动端图片缩放插件Pinchzoom.js

此插件功能包括手机轮播,图片点击放大再次点击缩小功能
  图片展示
 24147  69

360度全景展示效果

按下鼠标左键拖拽360度全景展示效果
  图片展示
 10197  116

JQ插件 放大镜 对比图 倍数可选

放大镜进行两张图片对比功能,可选放大倍数
  图片展示
 2604  27

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

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

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

    回复
    @年龄的距离 0
    2018/1/8 14:23:11

    怎样在父页面显示??

    回复
    撸力 0
    2018/1/8 9:37:34

    6666666

        小静子-Amy0
        2018/1/8 10:36:25

        哈哈哈哈,真的好用

    回复
    xdm 0
    2018/1/5 16:04:22

    ajax动态生成图片内容后,怎么点击不管用啊

        腔.调0
        2018/1/10 14:44:39

        jq 版本  $('#viewer').viewer('update');

    回复
    凌晨丶杨先森灬 0
    2018/1/3 14:57:26
    zhangmengfei 0
    2017/12/28 11:35:08

    我不想要小图片啊,直接按钮或者超链接点击怎么办???

    回复
    锦瑟无端 0
    2017/12/27 9:51:50

    很强大,很好用。

    回复
    ( ⊙o⊙?)不懂 0
    2017/12/24 11:05:10

    骗子,ie就不支持

    回复
    79606538 0
    2017/12/22 10:46:27
    嗯。 0
    2017/12/13 13:46:23
取消回复