功能强大的图片查看控件，jquery

80 阅读 0 评论 53 点赞

我是靠谱客的博主魔幻故事，最近开发中收集的这篇文章主要介绍功能强大的图片查看控件，jquery，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

html如下

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body>
<link rel="stylesheet" href="viewer.css">
<script src="assets/js/jquery.min.js"></script>
<script src="viewer.js"></script>
<script type="text/javascript">
<div class="docs-galley" id="waterMaskImgDiv">
<ul class="images" id="waterMaskImg">
</ul>
</div>
$(function(){
showImageInModal();
});
function showImageInModal(){
var startIndex = 0;//(imageView.pageNow-1)*imageView.pageSize;
var endIndex
= 0;//imageView.pageNow*imageView.pageSize;
var PAGE_URL='assets/img/thumbnails/emma-watson-1.jpg'
var THUM_URL='assets/img/thumbnails/emma-watson-1.jpg'
var $images = $("#waterMaskImg");
for(var i = 0 ; i < 2 ; i++){
var pageDesc=" ";
var _list = '<li><img src="' + THUM_URL + '"
data-original="' + PAGE_URL + ' "
alt="'+pageDesc+'" /></li>';
$images.append(_list);
}
var options = {
// inline: true,
url: 'data-original',
ready: function () {
},
shown: function () {
viewer.view(0);
// 9 methods are available here: "hide", "view", "prev", "next", "play", "stop", "full", "exit" and "destroy".
},
viewed: function () {
},
hidden:function () {
viewer.destroy();
isShowByScan = true;
}
};
var viewer = new Viewer(document.getElementById('waterMaskImgDiv'), options);
viewer.update();
viewer.show();
}
</script>
</body>
</html>

viewer.js如下

(function(global,factory){typeof exports==='object'&&typeof module!=='undefined'?module.exports=factory():typeof define==='function'&&define.amd?define(factory):(global.Viewer=factory())}(this,(function(){'use strict';var DEFAULTS={inline:false,button:true,navbar:true,title:true,toolbar:true,tooltip:true,movable:true,zoomable:true,rotatable:true,scalable:true,transition:true,fullscreen:true,keyboard:true,interval:5000,minWidth:200,minHeight:100,zoomRatio:0.1,minZoomRatio:0.01,maxZoomRatio:100,zIndex:2015,zIndexInline:0,url:'src',ready:null,show:null,shown:null,hide:null,hidden:null,view:null,viewed:null};var TEMPLATE='<div class="viewer-container"><div class="viewer-canvas"></div><div class="viewer-footer"><div class="viewer-title"></div><ul class="viewer-toolbar"><li role="button" class="viewer-zoom-in" data-action="zoom-in"></li><li role="button" class="viewer-zoom-out" data-action="zoom-out"></li><li role="button" class="viewer-one-to-one" data-action="one-to-one"></li><li role="button" class="viewer-reset" data-action="reset"></li><li role="button" class="viewer-prev" data-action="prev"></li><li role="button" class="viewer-play" data-action="play"></li><li role="button" class="viewer-next" data-action="next"></li><li role="button" class="viewer-rotate-left" data-action="rotate-left"></li><li role="button" class="viewer-rotate-right" data-action="rotate-right"></li><li role="button" class="viewer-flip-horizontal" data-action="flip-horizontal"></li><li role="button" class="viewer-flip-vertical" data-action="flip-vertical"></li></ul><div class="viewer-navbar"><ul class="viewer-list"></ul></div></div><div class="viewer-tooltip"></div><div role="button" class="viewer-button" data-action="mix"></div><div class="viewer-player"></div></div>';var _window=window;var PointerEvent=_window.PointerEvent;var NAMESPACE='viewer';var ACTION_MOVE='move';var ACTION_SWITCH='switch';var ACTION_ZOOM='zoom';var CLASS_ACTIVE=NAMESPACE+'-active';var CLASS_CLOSE=NAMESPACE+'-close';var CLASS_FADE=NAMESPACE+'-fade';var CLASS_FIXED=NAMESPACE+'-fixed';var CLASS_FULLSCREEN=NAMESPACE+'-fullscreen';var CLASS_FULLSCREEN_EXIT=NAMESPACE+'-fullscreen-exit';var CLASS_HIDE=NAMESPACE+'-hide';var CLASS_HIDE_MD_DOWN=NAMESPACE+'-hide-md-down';var CLASS_HIDE_SM_DOWN=NAMESPACE+'-hide-sm-down';var CLASS_HIDE_XS_DOWN=NAMESPACE+'-hide-xs-down';var CLASS_IN=NAMESPACE+'-in';var CLASS_INVISIBLE=NAMESPACE+'-invisible';var CLASS_MOVE=NAMESPACE+'-move';var CLASS_OPEN=NAMESPACE+'-open';var CLASS_SHOW=NAMESPACE+'-show';var CLASS_TRANSITION=NAMESPACE+'-transition';var EVENT_READY='ready';var EVENT_SHOW='show';var EVENT_SHOWN='shown';var EVENT_HIDE='hide';var EVENT_HIDDEN='hidden';var EVENT_VIEW='view';var EVENT_VIEWED='viewed';var EVENT_CLICK='click';var EVENT_DRAG_START='dragstart';var EVENT_KEY_DOWN='keydown';var EVENT_LOAD='load';var EVENT_POINTER_DOWN=PointerEvent?'pointerdown':'touchstart mousedown';var EVENT_POINTER_MOVE=PointerEvent?'pointermove':'mousemove touchmove';var EVENT_POINTER_UP=PointerEvent?'pointerup pointercancel':'touchend touchcancel mouseup';var EVENT_RESIZE='resize';var EVENT_TRANSITION_END='transitionend';var EVENT_WHEEL='wheel mousewheel DOMMouseScroll';var _typeof=typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"?function(obj){return typeof obj}:function(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj};function isString(value){return typeof value==='string'}var isNaN=Number.isNaN||window.isNaN;function isNumber(value){return typeof value==='number'&&!isNaN(value)}function isUndefined(value){return typeof value==='undefined'}function isObject(value){return(typeof value==='undefined'?'undefined':_typeof(value))==='object'&&value!==null}var hasOwnProperty=Object.prototype.hasOwnProperty;function isPlainObject(value){if(!isObject(value)){return false}try{var _constructor=value.constructor;var prototype=_constructor.prototype;return _constructor&&prototype&&hasOwnProperty.call(prototype,'isPrototypeOf')}catch(e){return false}}function isFunction(value){return typeof value==='function'}function each(data,callback){if(data&&isFunction(callback)){if(Array.isArray(data)||isNumber(data.length)){var length=data.length;var i=void 0;for(i=0;i<length;i+=1){if(callback.call(data,data[i],i,data)===false){break}}}else if(isObject(data)){Object.keys(data).forEach(function(key){callback.call(data,data[key],key,data)})}}return data}function extend(obj){for(var _len=arguments.length,args=Array(_len>1?_len-1:0),_key=1;_key<_len;_key++){args[_key-1]=arguments[_key]}if(isObject(obj)&&args.length>0){if(Object.assign){return Object.assign.apply(Object,[obj].concat(args))}args.forEach(function(arg){if(isObject(arg)){Object.keys(arg).forEach(function(key){obj[key]=arg[key]})}})}return obj}function proxy(fn,context){for(var _len2=arguments.length,args=Array(_len2>2?_len2-2:0),_key2=2;_key2<_len2;_key2++){args[_key2-2]=arguments[_key2]}return function(){for(var _len3=arguments.length,args2=Array(_len3),_key3=0;_key3<_len3;_key3++){args2[_key3]=arguments[_key3]}return fn.apply(context,args.concat(args2))}}var REGEXP_SUFFIX=/^(width|height|left|top|marginLeft|marginTop)$/;function setStyle(element,styles){var style=element.style;each(styles,function(value,property){if(REGEXP_SUFFIX.test(property)&&isNumber(value)){value+='px'}style[property]=value})}function getStyle(element){return window.getComputedStyle?window.getComputedStyle(element,null):element.currentStyle}function hasClass(element,value){return element.classList?element.classList.contains(value):element.className.indexOf(value)>-1}function addClass(element,value){if(!value){return}if(isNumber(element.length)){each(element,function(elem){addClass(elem,value)});return}if(element.classList){element.classList.add(value);return}var className=element.className.trim();if(!className){element.className=value}else if(className.indexOf(value)<0){element.className=className+' '+value}}function removeClass(element,value){if(!value){return}if(isNumber(element.length)){each(element,function(elem){removeClass(elem,value)});return}if(element.classList){element.classList.remove(value);return}if(element.className.indexOf(value)>=0){element.className=element.className.replace(value,'')}}function toggleClass(element,value,added){if(!value){return}if(isNumber(element.length)){each(element,function(elem){toggleClass(elem,value,added)});return}if(added){addClass(element,value)}else{removeClass(element,value)}}var REGEXP_HYPHENATE=/([a-zd])([A-Z])/g;function hyphenate(value){return value.replace(REGEXP_HYPHENATE,'$1-$2').toLowerCase()}function getData(element,name){if(isObject(element[name])){return element[name]}else if(element.dataset){return element.dataset[name]}return element.getAttribute('data-'+hyphenate(name))}function setData(element,name,data){if(isObject(data)){element[name]=data}else if(element.dataset){element.dataset[name]=data}else{element.setAttribute('data-'+hyphenate(name),data)}}function removeData(element,name){if(isObject(element[name])){delete element[name]}else if(element.dataset){try{delete element.dataset[name]}catch(e){element.dataset[name]=null}}else{element.removeAttribute('data-'+hyphenate(name))}}var REGEXP_SPACES=/s+/;function removeListener(element,type,listener){var options=arguments.length>3&&arguments[3]!==undefined?arguments[3]:{};var types=type.trim().split(REGEXP_SPACES);if(types.length>1){each(types,function(t){removeListener(element,t,listener)});return}if(isFunction(listener.onceListener)){listener=listener.onceListener;delete listener.onceListener}if(element.removeEventListener){element.removeEventListener(type,listener,options)}else if(element.detachEvent){element.detachEvent('on'+type,listener)}}function addListener(element,type,listener){var options=arguments.length>3&&arguments[3]!==undefined?arguments[3]:{};var types=type.trim().split(REGEXP_SPACES);if(types.length>1){each(types,function(t){addListener(element,t,listener)});return}if(options.once){var originalListener=listener;var onceListener=function onceListener(){for(var _len4=arguments.length,args=Array(_len4),_key4=0;_key4<_len4;_key4++){args[_key4]=arguments[_key4]}removeListener(element,type,onceListener);return originalListener.apply(element,args)};originalListener.onceListener=onceListener;listener=onceListener}if(element.addEventListener){element.addEventListener(type,listener,options)}else if(element.attachEvent){element.attachEvent('on'+type,listener)}}function dispatchEvent(element,type,data){if(element.dispatchEvent){var event=void 0;if(isFunction(Event)&&isFunction(CustomEvent)){if(isUndefined(data)){event=new Event(type,{bubbles:true,cancelable:true})}else{event=new CustomEvent(type,{detail:data,bubbles:true,cancelable:true})}}else if(isUndefined(data)){event=document.createEvent('Event');event.initEvent(type,true,true)}else{event=document.createEvent('CustomEvent');event.initCustomEvent(type,true,true,data)}return element.dispatchEvent(event)}else if(element.fireEvent){return element.fireEvent('on'+type)}return true}function getOffset(element){var doc=document.documentElement;var box=element.getBoundingClientRect();return{left:box.left+((window.scrollX||doc&&doc.scrollLeft||0)-(doc&&doc.clientLeft||0)),top:box.top+((window.scrollY||doc&&doc.scrollTop||0)-(doc&&doc.clientTop||0))}}function empty(element){while(element.firstChild){element.removeChild(element.firstChild)}}function getTransforms(_ref){var rotate=_ref.rotate,scaleX=_ref.scaleX,scaleY=_ref.scaleY;var values=[];if(isNumber(rotate)&&rotate!==0){values.push('rotate('+rotate+'deg)')}if(isNumber(scaleX)&&scaleX!==1){values.push('scaleX('+scaleX+')')}if(isNumber(scaleY)&&scaleY!==1){values.push('scaleY('+scaleY+')')}var transform=values.length?values.join(' '):'none';return{WebkitTransform:transform,msTransform:transform,transform:transform}}function getImageNameFromURL(url){return isString(url)?url.replace(/^.*//,'').replace(/[?&#].*$/,''):''}var IS_SAFARI_OR_UIWEBVIEW=navigator&&/(Macintosh|iPhone|iPod|iPad).*AppleWebKit/i.test(navigator.userAgent);function getImageNaturalSizes(image,callback){if(image.naturalWidth&&!IS_SAFARI_OR_UIWEBVIEW){callback(image.naturalWidth,image.naturalHeight);return}var newImage=document.createElement('img');newImage.onload=function(){callback(newImage.width,newImage.height)};newImage.src=image.src}function getResponsiveClass(type){switch(type){case 2:return CLASS_HIDE_XS_DOWN;case 3:return CLASS_HIDE_SM_DOWN;case 4:return CLASS_HIDE_MD_DOWN;default:return''}}function getMaxZoomRatio(pointers){var pointers2=extend({},pointers);var ratios=[];each(pointers,function(pointer,pointerId){delete pointers2[pointerId];each(pointers2,function(pointer2){var x1=Math.abs(pointer.startX-pointer2.startX);var y1=Math.abs(pointer.startY-pointer2.startY);var x2=Math.abs(pointer.endX-pointer2.endX);var y2=Math.abs(pointer.endY-pointer2.endY);var z1=Math.sqrt(x1*x1+y1*y1);var z2=Math.sqrt(x2*x2+y2*y2);var ratio=(z2-z1)/z1;ratios.push(ratio)})});ratios.sort(function(a,b){return Math.abs(a)<Math.abs(b)});return ratios[0]}function getPointer(_ref2,endOnly){var pageX=_ref2.pageX,pageY=_ref2.pageY;var end={endX:pageX,endY:pageY};if(endOnly){return end}return extend({startX:pageX,startY:pageY},end)}function getPointersCenter(pointers){var pageX=0;var pageY=0;var count=0;each(pointers,function(_ref3){var startX=_ref3.startX,startY=_ref3.startY;pageX+=startX;pageY+=startY;count+=1});pageX/=count;pageY/=count;return{pageX:pageX,pageY:pageY}}var render={render:function render(){this.initContainer();this.initViewer();this.initList();this.renderViewer()},initContainer:function initContainer(){this.containerData={width:window.innerWidth,height:window.innerHeight}},initViewer:function initViewer(){var options=this.options,parent=this.parent;var viewerData=void 0;if(options.inline){viewerData={width:Math.max(parent.offsetWidth,options.minWidth),height:Math.max(parent.offsetHeight,options.minHeight)};this.parentData=viewerData}if(this.fulled||!viewerData){viewerData=this.containerData}this.viewerData=extend({},viewerData)},renderViewer:function renderViewer(){if(this.options.inline&&!this.fulled){setStyle(this.viewer,this.viewerData)}},initList:function initList(){var _this=this;var element=this.element,options=this.options,list=this.list;var items=[];each(this.images,function(image,i){var src=image.src;var alt=image.alt||getImageNameFromURL(src);var url=options.url;if(!src){return}if(isString(url)){url=image.getAttribute(url)}else if(isFunction(url)){url=url.call(image,image)}items.push('<li><img'+(' src="'+src+'"')+' role="button" data-action="view"'+(' data-index="'+i+'"')+(' data-original-url="'+(url||src)+'"')+(' alt="'+alt+'"')+'></li>')});list.innerHTML=items.join('');each(list.getElementsByTagName('img'),function(image){setData(image,'filled',true);addListener(image,EVENT_LOAD,proxy(_this.loadImage,_this),{once:true})});this.items=list.getElementsByTagName('li');if(options.transition){addListener(element,EVENT_VIEWED,function(){addClass(list,CLASS_TRANSITION)},{once:true})}},renderList:function renderList(index){var i=index||this.index;var width=this.items[i].offsetWidth||30;var outerWidth=width+1;setStyle(this.list,{width:outerWidth*this.length,marginLeft:(this.viewerData.width-width)/2-outerWidth*i})},resetList:function resetList(){empty(this.list);removeClass(this.list,CLASS_TRANSITION);setStyle({marginLeft:0})},initImage:function initImage(callback){var _this2=this;var options=this.options,image=this.image,viewerData=this.viewerData;var footerHeight=this.footer.offsetHeight;var viewerWidth=viewerData.width;var viewerHeight=Math.max(viewerData.height-footerHeight,footerHeight);var oldImageData=this.ImageData||{};getImageNaturalSizes(image,function(naturalWidth,naturalHeight){var aspectRatio=naturalWidth/naturalHeight;var width=viewerWidth;var height=viewerHeight;if(viewerHeight*aspectRatio>viewerWidth){height=viewerWidth/aspectRatio}else{width=viewerHeight*aspectRatio}width=Math.min(width*0.9,naturalWidth);height=Math.min(height*0.9,naturalHeight);var imageData={naturalWidth:naturalWidth,naturalHeight:naturalHeight,aspectRatio:aspectRatio,ratio:width/naturalWidth,width:width,height:height,left:(viewerWidth-width)/2,top:(viewerHeight-height)/2};var initialImageData=extend({},imageData);if(options.rotatable){imageData.rotate=oldImageData.rotate||0;initialImageData.rotate=0}if(options.scalable){imageData.scaleX=oldImageData.scaleX||1;imageData.scaleY=oldImageData.scaleY||1;initialImageData.scaleX=1;initialImageData.scaleY=1}_this2.imageData=imageData;_this2.initialImageData=initialImageData;if(isFunction(callback)){callback()}})},renderImage:function renderImage(callback){var image=this.image,imageData=this.imageData;setStyle(image,extend({width:imageData.width,height:imageData.height,marginLeft:imageData.left,marginTop:imageData.top},getTransforms(imageData)));if(isFunction(callback)){if(this.transitioning){addListener(image,EVENT_TRANSITION_END,callback,{once:true})}else{callback()}}},resetImage:function resetImage(){var image=this.image;if(image){image.parentNode.removeChild(image);this.image=null}}};var events={bind:function bind(){var element=this.element,options=this.options,viewer=this.viewer;if(isFunction(options.view)){addListener(element,EVENT_VIEW,options.view)}if(isFunction(options.viewed)){addListener(element,EVENT_VIEWED,options.viewed)}addListener(viewer,EVENT_CLICK,this.onClick=proxy(this.click,this));addListener(viewer,EVENT_WHEEL,this.onWheel=proxy(this.wheel,this));addListener(viewer,EVENT_DRAG_START,this.onDragStart=proxy(this.dragstart,this));addListener(this.canvas,EVENT_POINTER_DOWN,this.onPointerDown=proxy(this.pointerdown,this));addListener(document,EVENT_POINTER_MOVE,this.onPointerMove=proxy(this.pointermove,this));addListener(document,EVENT_POINTER_UP,this.onPointerUp=proxy(this.pointerup,this));addListener(document,EVENT_KEY_DOWN,this.onKeyDown=proxy(this.keydown,this));addListener(window,EVENT_RESIZE,this.onResize=proxy(this.resize,this))},unbind:function unbind(){var element=this.element,options=this.options,viewer=this.viewer;if(isFunction(options.view)){removeListener(element,EVENT_VIEW,options.view)}if(isFunction(options.viewed)){removeListener(element,EVENT_VIEWED,options.viewed)}removeListener(viewer,EVENT_CLICK,this.onClick);removeListener(viewer,EVENT_WHEEL,this.onWheel);removeListener(viewer,EVENT_DRAG_START,this.onDragStart);removeListener(this.canvas,EVENT_POINTER_DOWN,this.onPointerDown);removeListener(document,EVENT_POINTER_MOVE,this.onPointerMove);removeListener(document,EVENT_POINTER_UP,this.onPointerUp);removeListener(document,EVENT_KEY_DOWN,this.onKeyDown);removeListener(window,EVENT_RESIZE,this.onResize)}};var handlers={click:function click(_ref){var target=_ref.target;var imageData=this.imageData;var action=getData(target,'action');switch(action){case'mix':if(this.played){this.stop()}else if(this.options.inline){if(this.fulled){this.exit()}else{this.full()}}else{this.hide()}break;case'view':this.view(getData(target,'index'));break;case'zoom-in':this.zoom(0.1,true);break;case'zoom-out':this.zoom(-0.1,true);break;case'one-to-one':this.toggle();break;case'reset':this.reset();break;case'prev':this.prev();break;case'play':this.play();break;case'next':this.next();break;case'rotate-left':this.rotate(-90);break;case'rotate-right':this.rotate(90);break;case'flip-horizontal':this.scaleX(-imageData.scaleX||-1);break;case'flip-vertical':this.scaleY(-imageData.scaleY||-1);break;default:if(this.played){this.stop()}}},load:function load(){var _this=this;var options=this.options,image=this.image,index=this.index,viewerData=this.viewerData;if(this.timeout){clearTimeout(this.timeout);this.timeout=false}if(!image){return}removeClass(image,CLASS_INVISIBLE);image.style.cssText='width:0;height:0;'+('margin-left:'+viewerData.width/2+'px;')+('margin-top:'+viewerData.height/2+'px;')+'max-width:none!important;visibility:visible;';this.initImage(function(){toggleClass(image,CLASS_TRANSITION,options.transition);toggleClass(image,CLASS_MOVE,options.movable);_this.renderImage(function(){_this.viewed=true;dispatchEvent(_this.element,EVENT_VIEWED,{originalImage:_this.images[index],index:index,image:image})})})},loadImage:function loadImage(e){var image=e.target;var parent=image.parentNode;var parentWidth=parent.offsetWidth||30;var parentHeight=parent.offsetHeight||50;var filled=!!getData(image,'filled');getImageNaturalSizes(image,function(naturalWidth,naturalHeight){var aspectRatio=naturalWidth/naturalHeight;var width=parentWidth;var height=parentHeight;if(parentHeight*aspectRatio>parentWidth){if(filled){width=parentHeight*aspectRatio}else{height=parentWidth/aspectRatio}}else if(filled){height=parentWidth/aspectRatio}else{width=parentHeight*aspectRatio}setStyle(image,{width:width,height:height,marginLeft:(parentWidth-width)/2,marginTop:(parentHeight-height)/2})})},keydown:function keydown(e){var options=this.options;var key=e.keyCode||e.which||e.charCode;if(!this.fulled||!options.keyboard){return}switch(key){case 27:if(this.played){this.stop()}else if(options.inline){if(this.fulled){this.exit()}}else{this.hide()}break;case 32:if(this.played){this.stop()}break;case 37:this.prev();break;case 38:e.preventDefault();this.zoom(options.zoomRatio,true);break;case 39:this.next();break;case 40:e.preventDefault();this.zoom(-options.zoomRatio,true);break;case 48:case 49:if(e.ctrlKey||e.shiftKey){e.preventDefault();this.toggle()}break;default:}},dragstart:function dragstart(e){if(e.target.tagName.toLowerCase()==='img'){e.preventDefault()}},pointerdown:function pointerdown(e){var options=this.options,pointers=this.pointers;if(!this.viewed||this.transitioning){return}if(e.changedTouches){each(e.changedTouches,function(touch){pointers[touch.identifier]=getPointer(touch)})}else{pointers[e.pointerId||0]=getPointer(e)}var action=options.movable?ACTION_MOVE:false;if(Object.keys(pointers).length>1){action=ACTION_ZOOM}else if((e.pointerType==='touch'||e.type==='touchmove')&&this.isSwitchable()){action=ACTION_SWITCH}this.action=action},pointermove:function pointermove(e){var options=this.options,pointers=this.pointers,action=this.action,image=this.image;if(!this.viewed||!action){return}e.preventDefault();if(e.changedTouches){each(e.changedTouches,function(touch){extend(pointers[touch.identifier],getPointer(touch,true))})}else{extend(pointers[e.pointerId||0],getPointer(e,true))}if(action===ACTION_MOVE&&options.transition&&hasClass(image,CLASS_TRANSITION)){removeClass(image,CLASS_TRANSITION)}this.change(e)},pointerup:function pointerup(e){var action=this.action,pointers=this.pointers;if(!this.viewed){return}if(e.changedTouches){each(e.changedTouches,function(touch){delete pointers[touch.identifier]})}else{delete pointers[e.pointerId||0]}if(!action){return}if(action===ACTION_MOVE&&this.options.transition){addClass(this.image,CLASS_TRANSITION)}this.action=false},resize:function resize(){var _this2=this;this.initContainer();this.initViewer();this.renderViewer();this.renderList();if(this.viewed){this.initImage(function(){_this2.renderImage()})}if(this.played){if(this.options.fullscreen&&this.fulled&&!document.fullscreenElement&&!document.mozFullScreenElement&&!document.webkitFullscreenElement&&!document.msFullscreenElement){this.stop();return}each(this.player.getElementsByTagName('img'),function(image){addListener(image,EVENT_LOAD,proxy(_this2.loadImage,_this2),{once:true});dispatchEvent(image,EVENT_LOAD)})}},start:function start(_ref2){var target=_ref2.target;if(target.tagName.toLowerCase()==='img'){this.target=target;this.show()}},wheel:function wheel(e){var _this3=this;if(!this.viewed){return}e.preventDefault();if(this.wheeling){return}this.wheeling=true;setTimeout(function(){_this3.wheeling=false},50);var ratio=Number(this.options.zoomRatio)||0.1;var delta=1;if(e.deltaY){delta=e.deltaY>0?1:-1}else if(e.wheelDelta){delta=-e.wheelDelta/120}else if(e.detail){delta=e.detail>0?1:-1}this.zoom(-delta*ratio,true,e)}};function _toConsumableArray(arr){if(Array.isArray(arr)){for(var i=0,arr2=Array(arr.length);i<arr.length;i++){arr2[i]=arr[i]}return arr2}else{return Array.from(arr)}}var methods={show:function show(){var _this=this;var element=this.element,options=this.options;if(options.inline||this.transitioning){return this}if(!this.ready){this.build()}if(isFunction(options.show)){addListener(element,EVENT_SHOW,options.show,{once:true})}if(dispatchEvent(element,EVENT_SHOW)===false){return this}this.open();var viewer=this.viewer;removeClass(viewer,CLASS_HIDE);addListener(element,EVENT_SHOWN,function(){_this.view(_this.target?[].concat(_toConsumableArray(_this.images)).indexOf(_this.target):_this.index);_this.target=false},{once:true});if(options.transition){this.transitioning=true;addClass(viewer,CLASS_TRANSITION);viewer.offsetWidth;addListener(viewer,EVENT_TRANSITION_END,proxy(this.shown,this),{once:true});addClass(viewer,CLASS_IN)}else{addClass(viewer,CLASS_IN);this.shown()}return this},hide:function hide(){var _this2=this;var element=this.element,options=this.options,viewer=this.viewer;if(options.inline||this.transitioning||!this.visible){return this}if(isFunction(options.hide)){addListener(element,EVENT_HIDE,options.hide,{once:true})}if(dispatchEvent(element,EVENT_HIDE)===false){return this}if(this.viewed&&options.transition){this.transitioning=true;addListener(this.image,EVENT_TRANSITION_END,function(){addListener(viewer,EVENT_TRANSITION_END,proxy(_this2.hidden,_this2),{once:true});removeClass(viewer,CLASS_IN)},{once:true});this.zoomTo(0,false,false,true)}else{removeClass(viewer,CLASS_IN);this.hidden()}return this},view:function view(index){var _this3=this;var element=this.element,title=this.title,canvas=this.canvas;index=Number(index)||0;if(!this.ready||!this.visible||this.played||index<0||index>=this.length||this.viewed&&index===this.index){return this}var item=this.items[index];var img=item.querySelector('img');var url=getData(img,'originalUrl');var alt=img.getAttribute('alt');var image=document.createElement('img');image.src=url;image.alt=alt;if(dispatchEvent(element,EVENT_VIEW,{originalImage:this.images[index],index:index,image:image})===false){return this}this.image=image;removeClass(this.items[this.index],CLASS_ACTIVE);addClass(item,CLASS_ACTIVE);this.viewed=false;this.index=index;this.imageData=null;addClass(image,CLASS_INVISIBLE);empty(canvas);canvas.appendChild(image);this.renderList();empty(title);addListener(element,EVENT_VIEWED,function(){var imageData=_this3.imageData;title.innerHTML=alt},{once:true});if(image.complete){this.load()}else{addListener(image,EVENT_LOAD,proxy(this.load,this),{once:true});if(this.timeout){clearTimeout(this.timeout)}this.timeout=setTimeout(function(){removeClass(image,CLASS_INVISIBLE);_this3.timeout=false},1000)}return this},prev:function prev(){this.view(Math.max(this.index-1,0));return this},next:function next(){this.view(Math.min(this.index+1,this.length-1));return this},move:function move(offsetX,offsetY){var imageData=this.imageData;this.moveTo(isUndefined(offsetX)?offsetX:imageData.left+Number(offsetX),isUndefined(offsetY)?offsetY:imageData.top+Number(offsetY));return this},moveTo:function moveTo(x){var y=arguments.length>1&&arguments[1]!==undefined?arguments[1]:x;var imageData=this.imageData;x=Number(x);y=Number(y);if(this.viewed&&!this.played&&this.options.movable){var changed=false;if(isNumber(x)){imageData.left=x;changed=true}if(isNumber(y)){imageData.top=y;changed=true}if(changed){this.renderImage()}}return this},zoom:function zoom(ratio){var hasTooltip=arguments.length>1&&arguments[1]!==undefined?arguments[1]:false;var _originalEvent=arguments.length>2&&arguments[2]!==undefined?arguments[2]:null;var imageData=this.imageData;ratio=Number(ratio);if(ratio<0){ratio=1/(1-ratio)}else{ratio=1+ratio}this.zoomTo(imageData.width*ratio/imageData.naturalWidth,hasTooltip,_originalEvent);return this},zoomTo:function zoomTo(ratio){var hasTooltip=arguments.length>1&&arguments[1]!==undefined?arguments[1]:false;var _originalEvent=arguments.length>2&&arguments[2]!==undefined?arguments[2]:null;var _zoomable=arguments.length>3&&arguments[3]!==undefined?arguments[3]:false;var options=this.options,pointers=this.pointers,imageData=this.imageData;ratio=Math.max(0,ratio);if(isNumber(ratio)&&this.viewed&&!this.played&&(_zoomable||options.zoomable)){if(!_zoomable){var minZoomRatio=Math.max(0.01,options.minZoomRatio);var maxZoomRatio=Math.min(100,options.maxZoomRatio);ratio=Math.min(Math.max(ratio,minZoomRatio),maxZoomRatio)}if(_originalEvent&&ratio>0.95&&ratio<1.05){ratio=1}var newWidth=imageData.naturalWidth*ratio;var newHeight=imageData.naturalHeight*ratio;if(_originalEvent){var offset=getOffset(this.viewer);var center=pointers&&Object.keys(pointers).length?getPointersCenter(pointers):{pageX:_originalEvent.pageX,pageY:_originalEvent.pageY};imageData.left-=(newWidth-imageData.width)*((center.pageX-offset.left-imageData.left)/imageData.width);imageData.top-=(newHeight-imageData.height)*((center.pageY-offset.top-imageData.top)/imageData.height)}else{imageData.left-=(newWidth-imageData.width)/2;imageData.top-=(newHeight-imageData.height)/2}imageData.width=newWidth;imageData.height=newHeight;imageData.ratio=ratio;this.renderImage();if(hasTooltip){this.tooltip()}}return this},rotate:function rotate(degree){this.rotateTo((this.imageData.rotate||0)+Number(degree));return this},rotateTo:function rotateTo(degree){var imageData=this.imageData;degree=Number(degree);if(isNumber(degree)&&this.viewed&&!this.played&&this.options.rotatable){imageData.rotate=degree;this.renderImage()}return this},scaleX:function scaleX(_scaleX){this.scale(_scaleX,this.imageData.scaleY);return this},scaleY:function scaleY(_scaleY){this.scale(this.imageData.scaleX,_scaleY);return this},scale:function scale(scaleX){var scaleY=arguments.length>1&&arguments[1]!==undefined?arguments[1]:scaleX;var imageData=this.imageData;scaleX=Number(scaleX);scaleY=Number(scaleY);if(this.viewed&&!this.played&&this.options.scalable){var changed=false;if(isNumber(scaleX)){imageData.scaleX=scaleX;changed=true}if(isNumber(scaleY)){imageData.scaleY=scaleY;changed=true}if(changed){this.renderImage()}}return this},play:function play(){var _this4=this;var options=this.options,player=this.player;var load=proxy(this.loadImage,this);var list=[];var total=0;var index=0;if(!this.visible||this.played){return this}if(options.fullscreen){this.requestFullscreen()}this.played=true;this.onLoadWhenPlay=load;addClass(player,CLASS_SHOW);each(this.items,function(item,i){var img=item.querySelector('img');var image=document.createElement('img');image.src=getData(img,'originalUrl');image.alt=img.getAttribute('alt');total+=1;addClass(image,CLASS_FADE);toggleClass(image,CLASS_TRANSITION,options.transition);if(hasClass(item,CLASS_ACTIVE)){addClass(image,CLASS_IN);index=i}list.push(image);addListener(image,EVENT_LOAD,load,{once:true});player.appendChild(image)});if(isNumber(options.interval)&&options.interval>0){var playing=function playing(){_this4.playing=setTimeout(function(){removeClass(list[index],CLASS_IN);index+=1;index=index<total?index:0;addClass(list[index],CLASS_IN);playing()},options.interval)};if(total>1){playing()}}return this},stop:function stop(){var _this5=this;var player=this.player;if(!this.played){return this}if(this.options.fullscreen){this.exitFullscreen()}this.played=false;clearTimeout(this.playing);each(this.player.getElementsByTagName('img'),function(image){if(!image.complete){removeListener(image,EVENT_LOAD,_this5.onLoadWhenPlay)}});removeClass(player,CLASS_SHOW);empty(player);return this},full:function full(){var _this6=this;var options=this.options,viewer=this.viewer,image=this.image,list=this.list;if(!this.visible||this.played||this.fulled||!options.inline){return this}this.fulled=true;this.open();addClass(this.button,CLASS_FULLSCREEN_EXIT);if(options.transition){removeClass(image,CLASS_TRANSITION);removeClass(list,CLASS_TRANSITION)}addClass(viewer,CLASS_FIXED);viewer.setAttribute('style','');setStyle(viewer,{zIndex:options.zIndex});this.initContainer();this.viewerData=extend({},this.containerData);this.renderList();this.initImage(function(){_this6.renderImage(function(){if(options.transition){setTimeout(function(){addClass(image,CLASS_TRANSITION);addClass(list,CLASS_TRANSITION)},0)}})});return this},exit:function exit(){var _this7=this;var options=this.options,viewer=this.viewer,image=this.image,list=this.list;if(!this.fulled){return this}this.fulled=false;this.close();removeClass(this.button,CLASS_FULLSCREEN_EXIT);if(options.transition){removeClass(image,CLASS_TRANSITION);removeClass(list,CLASS_TRANSITION)}removeClass(viewer,CLASS_FIXED);setStyle(viewer,{zIndex:options.zIndexInline});this.viewerData=extend({},this.parentData);this.renderViewer();this.renderList();this.initImage(function(){_this7.renderImage(function(){if(options.transition){setTimeout(function(){addClass(image,CLASS_TRANSITION);addClass(list,CLASS_TRANSITION)},0)}})});return this},tooltip:function tooltip(){var _this8=this;var options=this.options,tooltipBox=this.tooltipBox,imageData=this.imageData;if(!this.viewed||this.played||!options.tooltip){return this}tooltipBox.textContent=Math.round(imageData.ratio*100)+'%';if(!this.tooltiping){if(options.transition){if(this.fading){dispatchEvent(tooltipBox,EVENT_TRANSITION_END)}addClass(tooltipBox,CLASS_SHOW);addClass(tooltipBox,CLASS_FADE);addClass(tooltipBox,CLASS_TRANSITION);tooltipBox.offsetWidth;addClass(tooltipBox,CLASS_IN)}else{addClass(tooltipBox,CLASS_SHOW)}}else{clearTimeout(this.tooltiping)}this.tooltiping=setTimeout(function(){if(options.transition){addListener(tooltipBox,EVENT_TRANSITION_END,function(){removeClass(tooltipBox,CLASS_SHOW);removeClass(tooltipBox,CLASS_FADE);removeClass(tooltipBox,CLASS_TRANSITION);_this8.fading=false},{once:true});removeClass(tooltipBox,CLASS_IN);_this8.fading=true}else{removeClass(tooltipBox,CLASS_SHOW)}_this8.tooltiping=false},1000);return this},toggle:function toggle(){if(this.imageData.ratio===1){this.zoomTo(this.initialImageData.ratio,true)}else{this.zoomTo(1,true)}return this},reset:function reset(){if(this.viewed&&!this.played){this.imageData=extend({},this.initialImageData);this.renderImage()}return this},update:function update(){var _this9=this;var indexes=[];if(this.isImg&&!this.element.parentNode){return this.destroy()}this.length=this.images.length;if(this.ready){each(this.items,function(item,i){var img=item.querySelector('img');var image=_this9.images[i];if(image){if(image.src!==img.src){indexes.push(i)}}else{indexes.push(i)}});setStyle(this.list,{width:'auto'});this.initList();if(this.visible){if(this.length){if(this.viewed){var index=indexes.indexOf(this.index);if(index>=0){this.viewed=false;this.view(Math.max(this.index-(index+1),0))}else{addClass(this.items[this.index],CLASS_ACTIVE)}}}else{this.image=null;this.viewed=false;this.index=0;this.imageData=null;empty(this.canvas);empty(this.title)}}}return this},destroy:function destroy(){var element=this.element;if(this.options.inline){this.unbind()}else{if(this.visible){this.unbind()}removeListener(element,EVENT_CLICK,this.onStart)}this.unbuild();removeData(element,NAMESPACE);return this}};var _window$1=window;var document$1=_window$1.document;var others={open:function open(){var body=this.body;addClass(body,CLASS_OPEN);body.style.paddingRight=this.scrollbarWidth+'px'},close:function close(){var body=this.body;removeClass(body,CLASS_OPEN);body.style.paddingRight=0},shown:function shown(){var element=this.element,options=this.options;this.transitioning=false;this.fulled=true;this.visible=true;this.render();this.bind();if(isFunction(options.shown)){addListener(element,EVENT_SHOWN,options.shown,{once:true})}dispatchEvent(element,EVENT_SHOWN)},hidden:function hidden(){var element=this.element,options=this.options;this.transitioning=false;this.viewed=false;this.fulled=false;this.visible=false;this.unbind();this.close();addClass(this.viewer,CLASS_HIDE);this.resetList();this.resetImage();if(isFunction(options.hidden)){addListener(element,EVENT_HIDDEN,options.hidden,{once:true})}dispatchEvent(element,EVENT_HIDDEN)},requestFullscreen:function requestFullscreen(){if(this.fulled&&!document$1.fullscreenElement&&!document$1.mozFullScreenElement&&!document$1.webkitFullscreenElement&&!document$1.msFullscreenElement){var documentElement=document$1.documentElement;if(documentElement.requestFullscreen){documentElement.requestFullscreen()}else if(documentElement.msRequestFullscreen){documentElement.msRequestFullscreen()}else if(documentElement.mozRequestFullScreen){documentElement.mozRequestFullScreen()}else if(documentElement.webkitRequestFullscreen){documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT)}}},exitFullscreen:function exitFullscreen(){if(this.fulled){if(document$1.exitFullscreen){document$1.exitFullscreen()}else if(document$1.msExitFullscreen){document$1.msExitFullscreen()}else if(document$1.mozCancelFullScreen){document$1.mozCancelFullScreen()}else if(document$1.webkitExitFullscreen){document$1.webkitExitFullscreen()}}},change:function change(e){var pointers=this.pointers;var pointer=pointers[Object.keys(pointers)[0]];var offsetX=pointer.endX-pointer.startX;var offsetY=pointer.endY-pointer.startY;switch(this.action){case ACTION_MOVE:this.move(offsetX,offsetY);break;case ACTION_ZOOM:this.zoom(getMaxZoomRatio(pointers),false,e);break;case ACTION_SWITCH:this.action='switched';if(Math.abs(offsetX)>Math.abs(offsetY)){if(offsetX>1){this.prev()}else if(offsetX<-1){this.next()}}break;default:}each(pointers,function(p){p.startX=p.endX;p.startY=p.endY})},isSwitchable:function isSwitchable(){var imageData=this.imageData,viewerData=this.viewerData;return this.length>1&&imageData.left>=0&&imageData.top>=0&&imageData.width<=viewerData.width&&imageData.height<=viewerData.height}};var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor}}();function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}var AnotherViewer=void 0;var Viewer=function(){function Viewer(element){var options=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};_classCallCheck(this,Viewer);if(!element||element.nodeType!==1){throw new Error('The first argument is required and must be an element.');}this.element=element;this.options=extend({},DEFAULTS,isPlainObject(options)&&options);this.isImg=false;this.ready=false;this.visible=false;this.viewed=false;this.fulled=false;this.played=false;this.wheeling=false;this.playing=false;this.fading=false;this.tooltiping=false;this.transitioning=false;this.action=false;this.target=false;this.timeout=false;this.index=0;this.length=0;this.pointers={};this.init()}_createClass(Viewer,[{key:'init',value:function init(){var _this=this;var element=this.element,options=this.options;if(getData(element,NAMESPACE)){return}setData(element,NAMESPACE,this);var isImg=element.tagName.toLowerCase()==='img';var images=isImg?[element]:element.getElementsByTagName('img');each(images,function(image0){console.log(image0.className)});var length=images.length;if(!length){return}if(isFunction(options.ready)){addListener(element,EVENT_READY,options.ready,{once:true})}if(isUndefined(document.createElement(NAMESPACE).style.transition)){options.transition=false}this.isImg=isImg;this.length=length;this.count=0;this.images=images;this.body=document.body;this.scrollbarWidth=window.innerWidth-document.body.clientWidth;if(options.inline){var progress=proxy(this.progress,this);addListener(element,EVENT_READY,function(){_this.view()},{once:true});each(images,function(image){if(image.complete){progress()}else{addListener(image,EVENT_LOAD,progress,{once:true})}})}else{addListener(element,EVENT_CLICK,this.onStart=proxy(this.start,this))}}},{key:'progress',value:function progress(){this.count+=1;if(this.count===this.length){this.build()}}},{key:'build',value:function build(){var options=this.options;var element=this.element;if(this.ready){return}var parent=element.parentNode;var template=document.createElement('div');template.innerHTML=TEMPLATE;var viewer=template.querySelector('.'+NAMESPACE+'-container');var title=viewer.querySelector('.'+NAMESPACE+'-title');var toolbar=viewer.querySelector('.'+NAMESPACE+'-toolbar');var navbar=viewer.querySelector('.'+NAMESPACE+'-navbar');var button=viewer.querySelector('.'+NAMESPACE+'-button');this.parent=parent;this.viewer=viewer;this.title=title;this.toolbar=toolbar;this.navbar=navbar;this.button=button;this.canvas=viewer.querySelector('.'+NAMESPACE+'-canvas');this.footer=viewer.querySelector('.'+NAMESPACE+'-footer');this.tooltipBox=viewer.querySelector('.'+NAMESPACE+'-tooltip');this.player=viewer.querySelector('.'+NAMESPACE+'-player');this.list=viewer.querySelector('.'+NAMESPACE+'-list');addClass(title,!options.title?CLASS_HIDE:getResponsiveClass(options.title));addClass(toolbar,!options.toolbar?CLASS_HIDE:getResponsiveClass(options.toolbar));addClass(navbar,!options.navbar?CLASS_HIDE:getResponsiveClass(options.navbar));toggleClass(button,CLASS_HIDE,!options.button);toggleClass(toolbar.querySelector('.'+NAMESPACE+'-one-to-one'),CLASS_INVISIBLE,!options.zoomable);toggleClass(toolbar.querySelectorAll('li[class*="zoom"]'),CLASS_INVISIBLE,!options.zoomable);toggleClass(toolbar.querySelectorAll('li[class*="flip"]'),CLASS_INVISIBLE,!options.scalable);if(!options.rotatable){var rotates=toolbar.querySelectorAll('li[class*="rotate"]');addClass(rotates,CLASS_INVISIBLE);each(rotates,function(rotate){toolbar.appendChild(rotate)})}if(options.inline){addClass(button,CLASS_FULLSCREEN);setStyle(viewer,{zIndex:options.zIndexInline});if(getStyle(parent).position==='static'){setStyle(parent,{position:'relative'})}parent.insertBefore(viewer,element.nextSibling)}else{addClass(button,CLASS_CLOSE);addClass(viewer,CLASS_FIXED);addClass(viewer,CLASS_FADE);addClass(viewer,CLASS_HIDE);setStyle(viewer,{zIndex:options.zIndex});document.body.appendChild(viewer)}if(options.inline){this.render();this.bind();this.visible=true}this.ready=true;dispatchEvent(element,EVENT_READY)}},{key:'unbuild',value:function unbuild(){if(!this.ready){return}this.ready=false;this.viewer.parentNode.removeChild(this.viewer)}}],[{key:'noConflict',value:function noConflict(){window.Viewer=AnotherViewer;return Viewer}},{key:'setDefaults',value:function setDefaults(options){extend(DEFAULTS,isPlainObject(options)&&options)}}]);return Viewer}();extend(Viewer.prototype,render,events,handlers,methods,others);if(typeof window!=='undefined'){AnotherViewer=window.Viewer;window.Viewer=Viewer}return Viewer})));

viewer.css如下

.viewer-zoom-in::before,.viewer-zoom-out::before,.viewer-one-to-one::before,.viewer-reset::before,.viewer-prev::before,.viewer-play::before,.viewer-next::before,.viewer-rotate-left::before,.viewer-rotate-right::before,.viewer-flip-horizontal::before,.viewer-flip-vertical::before,.viewer-fullscreen::before,.viewer-fullscreen-exit::before,.viewer-close::before{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAAUCAYAAABWOyJDAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAQPSURBVHic7Zs/iFxVFMa/0U2UaJGksUgnIVhYxVhpjDbZCBmLdAYECxsRFBTUamcXUiSNncgKQbSxsxH8gzAP3FU2jY0kKKJNiiiIghFlccnP4p3nPCdv3p9778vsLOcHB2bfveeb7955c3jvvNkBIMdxnD64a94GHMfZu3iBcRynN7zAOI7TG15gHCeeNUkr8zaxG2lbYDYsdgMbktBsP03jdQwljSXdtBhLOmtjowC9Mg9L+knSlcD8TNKpSA9lBpK2JF2VdDSR5n5J64m0qli399hNFMUlpshQii5jbXTbHGviB0nLNeNDSd9VO4A2UdB2fp+x0eCnaXxWXGA2X0au/3HgN9P4LFCjIANOJdrLr0zzZ+BEpNYDwKbpnQMeAw4m8HjQtM6Z9qa917zPQwFr3M5KgA6J5rTJCdFZJj9/lyvGhsDvwFNVuV2MhhjrK6b9bFiE+j1r87eBl4HDwCF7/U/k+ofAX5b/EXBv5JoLMuILzf3Ap6Z3EzgdqHMCuF7hcQf4HDgeoHnccncqdK/TvSDWffFXI/exICY/xZyqc6XLWF1UFZna4gJ7q8BsRvgd2/xXpo6P+D9dfT7PpECtA3cnWPM0GXGFZh/wgWltA+cDNC7X+AP4GzjZQe+k5dRxuYPeiuXU7e1qwLpDz7dFjXKRaSwuMLvAlG8zZlG+YmiK1HoFqT7wP2z+4Q45TfEGcMt01xLoNZEBTwRqD4BLpnMLeC1A41UmVxsXgXeBayV/Wx20rpTyrpnWRft7p6O/FdqzGrDukPNtkaMoMo3FBdBSQMOnYBCReyf05s126fU9ytfX98+mY54Kxnp7S9K3kj6U9KYdG0h6UdLbkh7poFXMfUnSOyVvL0h6VtIXHbS6nOP+s/Zm9mvyXW1uuC9ohZ72E9uDmXWLJOB1GxsH+DxPftsB8B6wlGDN02TAkxG6+4D3TWsbeC5CS8CDFce+AW500LhhOW2020TRjK3b21HEmgti9m0RonxbdMZeVzV+/4tF3cBpP7E9mKHNL5q8h5g0eYsCMQz0epq8gQrwMXAgcs0FGXGFRcB9wCemF9PkbYqM/Bas7fxLwNeJPdTdpo4itQti8lPMqTpXuozVRVXPpbHI3KkNTB1NfkL81j2mvhDp91HgV9MKuRIqrykj3WPq4rHyL+axj8/qGPmTqi6F9YDlHOvJU6oYcTsh/TYSzWmTE6JT19CtLTJt32D6CmHe0eQn1O8z5AXgT4sx4Vcu0/EQecMydB8z0hUWkTd2t4CrwNEePqMBcAR4mrBbwyXLPWJa8zrXmmLEhNBmfpkuY2102xxrih+pb+ieAb6vGhuA97UcJ5KR8gZ77K+99xxeYBzH6Q3/Z0fHcXrDC4zjOL3hBcZxnN74F+zlvXFWXF9PAAAAAElFTkSuQmCC');background-repeat:no-repeat;color:transparent;display:block;font-size:0;height:20px;line-height:0;width:20px}.viewer-zoom-in::before{background-position:0 0;content:'Zoom In'}.viewer-zoom-out::before{background-position:-20px 0;content:'Zoom Out'}.viewer-one-to-one::before{background-position:-40px 0;content:'One to One'}.viewer-reset::before{background-position:-60px 0;content:'Reset'}.viewer-prev::before{background-position:-80px 0;content:'Previous'}.viewer-play::before{background-position:-100px 0;content:'Play'}.viewer-next::before{background-position:-120px 0;content:'Next'}.viewer-rotate-left::before{background-position:-140px 0;content:'Rotate Left'}.viewer-rotate-right::before{background-position:-160px 0;content:'Rotate Right'}.viewer-flip-horizontal::before{background-position:-180px 0;content:'Flip Horizontal'}.viewer-flip-vertical::before{background-position:-200px 0;content:'Flip Vertical'}.viewer-fullscreen::before{background-position:-220px 0;content:'Enter Full Screen'}.viewer-fullscreen-exit::before{background-position:-240px 0;content:'Exit Full Screen'}.viewer-close::before{background-position:-260px 0;content:'Close'}.viewer-container{background-color:rgba(0,0,0,.72);bottom:0;direction:ltr;font-size:0;left:0;line-height:0;overflow:hidden;position:absolute;right:0;-webkit-tap-highlight-color:transparent;top:0;-webkit-touch-callout:none;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.viewer-container::-moz-selection,.viewer-container *::-moz-selection{background-color:transparent}.viewer-container::selection,.viewer-container *::selection{background-color:transparent}.viewer-container img{display:block;height:auto;max-height:none !important;max-width:none !important;min-height:0 !important;min-width:0 !important;width:100%}.viewer-canvas{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0}.viewer-canvas > img{height:auto;margin:15px auto;max-width:90% !important;width:auto}.viewer-footer{bottom:0;left:0;overflow:hidden;position:absolute;right:0;text-align:center}.viewer-navbar{background-color:rgba(0,0,0,.5);overflow:hidden}.viewer-list{-webkit-box-sizing:content-box;box-sizing:content-box;height:50px;margin:0;overflow:hidden;padding:1px 0}.viewer-list > li{color:transparent;cursor:pointer;float:left;font-size:0;height:50px;line-height:0;opacity:.5;overflow:hidden;width:50px}.viewer-list > li + li{margin-left:1px}.viewer-list > .viewer-active{opacity:1}.viewer-player{background-color:#000;bottom:0;cursor:none;display:none;left:0;position:absolute;right:0;top:0}.viewer-player > img{left:0;position:absolute;top:0}.viewer-toolbar{margin:0 auto 5px;overflow:hidden;padding:3px 0;width:280px}.viewer-toolbar > li{background-color:rgba(0,0,0,.5);border-radius:50%;cursor:pointer;float:left;height:24px;overflow:hidden;width:24px}.viewer-toolbar > li:hover{background-color:rgba(0,0,0,.8)}.viewer-toolbar > li::before{margin:2px}.viewer-toolbar > li + li{margin-left:1px}.viewer-toolbar > .viewer-play{height:30px;margin-bottom:-3px;margin-top:-3px;width:30px}.viewer-toolbar > .viewer-play::before{margin:5px}.viewer-tooltip{background-color:rgba(0,0,0,.8);border-radius:10px;color:#fff;display:none;font-size:12px;height:20px;left:50%;line-height:20px;margin-left:-25px;margin-top:-10px;position:absolute;text-align:center;top:50%;width:50px}.viewer-title{color:#ddd;font-size:12px;line-height:1;max-width:90%;overflow:hidden;text-overflow:ellipsis}.viewer-title:hover{opacity:1}.viewer-button{background-color:rgba(0,0,0,.5);border-radius:50%;cursor:pointer;height:80px;overflow:hidden;position:absolute;right:-40px;top:-40px;width:80px}.viewer-button::before{bottom:15px;left:15px;position:absolute}.viewer-fixed{position:fixed}.viewer-open{overflow:hidden}.viewer-show{display:block}.viewer-hide{display:none}.viewer-invisible{visibility:hidden}.viewer-move{cursor:move;cursor:-webkit-grab;cursor:grab}.viewer-fade{opacity:0}.viewer-in{opacity:1}.viewer-transition{-webkit-transition:all .3s;transition:all .3s}@media (max-width:767px){.viewer-hide-xs-down{display:none}}@media (max-width:991px){.viewer-hide-sm-down{display:none}}@media (max-width:1199px){.viewer-hide-md-down{display:none}}