viewer.js一个强大的的图像查看插件(支持旋转、缩放)

      发布在:前端技术      评论:0 条评论

一、简介

Viewer.js 是一款强大的图片查看器。

Viewer.js 有以下特点:

支持移动设备触摸事件
支持响应式
支持放大/缩小
支持旋转(类似微博的图片旋转)
支持水平/垂直翻转
支持图片移动
支持键盘
支持全屏幻灯片模式(可做屏保)
支持缩略图
支持标题显示
支持多种自定义事件
Viewer.js 提供了纯 JS 版本和 jQuery 版本,版本名字虽然一样,但代码不一样,不能通用。

二、下载

纯JS版本:

下载地址:https://github.com/fengyuanchen/viewerjs

演示地址:http://demo.jb51.net/js/viewerjs/js/

jQuery 版本:

下载地址:https://github.com/fengyuanchen/jquery-viewer

演示地址:http://demo.jb51.net/js/viewerjs/jquery/

三、使用方法

1、直接引入文件

Javascript版:

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

jQuery版:

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

4、JavaScript

Javascript版:

1
2
3
4
5
6
7
var image = new Viewer(document.getElementById('image'),{
 url: 'data-original'
});
 
var viewer = new Viewer(document.getElementById('viewer'),{
 url: 'data-original'
});

jQuery 版:

1
2
3
4
5
6
7
$('#image').viewer({
 url: 'data-original'
});
 
$('#viewer').viewer({
 url: 'data-original'
});

四、配置


名称类型默认值说明
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回调函数,具体查看演示

实列:

<div class="carousel_banner" id="bannerImg1">
<div class="prev" id="prev1"></div>
<div class="next" id="next1"></div>
<ul class="clearfix">

<li>
<a href="javascript:;">
<img src="http://cg.80zx.com.cn/FtxveQXtpa5yF7C_npAtbZT_bgq9.jpg!watermark" class="image0"
                    alt="制造业工厂模型,车间工厂模型,汽车工厂,工厂车间模型,工厂厂房模型,标准化车间工厂">
</a>
</li>
<li>
<a href="javascript:;">
<img src="http://cg.80zx.com.cn/FlabJiXN4Q5iB3J4L9P4JvNnE5iW.jpg!watermark" class="image1"
                    alt="制造业工厂模型,车间工厂模型,汽车工厂,工厂车间模型,工厂厂房模型,标准化车间工厂">
</a>
</li>
<li>
<a href="javascript:;">
<img src="http://cg.80zx.com.cn/Fqa4dzhFZW2LUD_5ANN6ug6IVmAk.jpg!watermark" class="image2"
                    alt="制造业工厂模型,车间工厂模型,汽车工厂,工厂车间模型,工厂厂房模型,标准化车间工厂">
</a>
</li>
<li>
<a href="javascript:;">
<img src="http://cg.80zx.com.cn/Fv4rtv0-CFoAtYzGdGYQif_eIQyb.jpg!watermark" class="image3"
                    alt="制造业工厂模型,车间工厂模型,汽车工厂,工厂车间模型,工厂厂房模型,标准化车间工厂">
</a>
</li>
<li>
<a href="javascript:;">
<img src="http://cg.80zx.com.cn/FmIwJQ1kb97WkGStBBeJ9QBk7ww6.jpg!watermark" class="image4"
                    alt="制造业工厂模型,车间工厂模型,汽车工厂,工厂车间模型,工厂厂房模型,标准化车间工厂">
</a>
</li>
<li>
<a href="javascript:;">
<img src="http://cg.80zx.com.cn/Fsku4soYE9TrumtMeVjBUoCjYkcx.jpg!watermark" class="image5"
                    alt="制造业工厂模型,车间工厂模型,汽车工厂,工厂车间模型,工厂厂房模型,标准化车间工厂">
</a>
</li>
<li>
<a href="javascript:;">
<img src="http://cg.80zx.com.cn/FgRKjuCamWVyY8VVT0sGr6FzntfR.jpg!watermark" class="image6"
                    alt="制造业工厂模型,车间工厂模型,汽车工厂,工厂车间模型,工厂厂房模型,标准化车间工厂">
</a>
</li>
<li>
<a href="javascript:;">
<img src="http://cg.80zx.com.cn/Fk46iOP7v8Zqe3czt3db9CkF5gKw.jpg!watermark" class="image7"
                    alt="制造业工厂模型,车间工厂模型,汽车工厂,工厂车间模型,工厂厂房模型,标准化车间工厂">
</a>
</li>
<li>
<a href="javascript:;">
<img src="http://cg.80zx.com.cn/FiN0H265oaNOwZPsF88Ol4ETwuWT.jpg!watermark" class="image8"
                    alt="制造业工厂模型,车间工厂模型,汽车工厂,工厂车间模型,工厂厂房模型,标准化车间工厂">
</a>
</li>
<li>
<a href="javascript:;">
<img src="http://cg.80zx.com.cn/FggQ22Sq2rJnOqP6GNEVGf2WvDHJ.jpg!watermark" class="image9"
                    alt="制造业工厂模型,车间工厂模型,汽车工厂,工厂车间模型,工厂厂房模型,标准化车间工厂">
</a>
</li>
<li>
<a href="javascript:;">
<img src="http://cg.80zx.com.cn/Fi1-SPOIw-oGVSskxEPIvAO0EbH2.jpg!watermark" class="image10"
                    alt="制造业工厂模型,车间工厂模型,汽车工厂,工厂车间模型,工厂厂房模型,标准化车间工厂">
</a>
</li>
<li>
<a href="javascript:;">
<img src="http://cg.80zx.com.cn/FvdMqHphuGZexvzPaYNwviDgHUAK.jpg!watermark" class="image11"
                    alt="制造业工厂模型,车间工厂模型,汽车工厂,工厂车间模型,工厂厂房模型,标准化车间工厂">
</a>
</li>
</ul>
</div>
$('#bannerImg1').on('click', 'ul li a', function () {
var src = $(this).find('img').attr('src');
// var i      = 0;
   var index = 0;
var $ul = $('<ul></ul>');
$('#bannerImg1 ul li a img').each(function (i, item) {
var image = $(item).attr('src');

$ul.append($('<li><img src="' + image + '"></li>'));

if (image == src) {
index = i;
}

});
new Viewer($ul.get(0), {
initialViewIndex: index,
title: false,
transition: false
   }).show();
});

最终效果图viewerjs使用效果

通过给图片增加data-image属性绑定图片放大事件代码参考

<script>
 $('body').off('click', '[data-image]').on('click', '[data-image]', function () {
var viewer = new Viewer($(this).get(0), {
url: 'src',
     hidden: function () {
viewer.destroy();
     },
   });
   viewer.show();
   return false;
 });
</script>


相关文章
热门推荐