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

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

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

jQuery唯美图片Y轴展示

实现精美唯美图片Y轴展示效果
  图片展示
 38201  500
  图片展示
 45060  402

jQuery加vue 3D盒子旋转展示

3D旋转盒子,全景展示,可选择图片,设置宽高
  图片展示
 34847  365

jQuery鼠标滚轮放大缩小查看图片(原创)

使用jquery实现点击放大图片之后,使用鼠标滚轮放大缩小图片,点击遮罩关闭图片
  图片展示
 60186  380

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

    一个短篇 0
    2023/7/12 14:43:19
    请问可以控制弹出位置和大小吗 回复
    0
    2023/4/25 11:06:21
    Persistence 丶天 0
    2021/12/10 9:12:55
    这个 有删除图片按钮吗
        水田0
        2023/6/8 15:39:50
        可以手动增加
    回复
    记得打卡 0
    2021/11/8 17:07:16
    荆棘 0
    2021/6/25 17:51:50
    请问有源码吗?移动端双指缩放直接放到最大了,而且无法缩小。或者更新下插件?急用
        与众不同0
        2024/1/29 9:08:49
        同问,这个怎么解决啊
    回复
    荆棘 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
        请问解决了吗😥
        tongxunlu3
        2021/12/23 10:07:31

        提供一个思路,
        1.在iframe页面,
        给父页面动态插入 viewer.js和css
        插入dom到父页面,并隐藏这个dom

        window.top.$("#jq22").empty().append(`
            <li><img src="img/tibet-1.jpg" alt="图片1"></li>
            <li><img src="img/tibet-2.jpg" alt="图片2"></li>`)

        2.iframe页面

        function initViewer(idStr) {
            var id = window.top.document.getElementById(idStr)
            var viewer = new window.top.Viewer(id, {
                    ....
                }
            });
        return viewer
        }

        3.iframe页面

        viewer=initViewer("jq22")

        当前页面自己写一个列表,(主要用iframe进行交互,主页面viewer的dom隐藏不用显示)
        并绑定事件点击事件,点击图片时获取index, 用这个方法 激活父页面的

        viewer =》viewer.view(index);
        tongxunlu0
        2021/12/23 10:10:20
        我用的原生版,代码细节可能有遗漏,
        要想全屏思路是,在iframe页面做点击图片交互,在父页面跑viewer.js
    回复
    Delete 0
    2020/9/26 11:01:40
    jsp引入无效
        BattleofLexington0
        2020/9/26 13:38:42

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

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复