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-z\d])([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}}