<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A simple jQuery image viewing plugin.">
<meta name="keywords" content="HTML, CSS, JS, JavaScript, jQuery plugin, image viewing, front-end, frontend, web development">
<meta name="author" content="Fengyuan Chen">-->
<title>Viewer</title>
<link rel="stylesheet" href="css/viewer.min.css">
</head>
<body>
<!-- Content -->
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-6">
<h3 class="page-header">Dem o</h3>
<div class="docs-galley">
<ul class="docs-pictures clearfix">
<li><img data-original="images/tibet-1.jpg" src="data:images/thumbnails/tibet-1.jpg" alt="Cuo Na Lake"></li>
<li><img data-original="images/tibet-2.jpg" src="data:images/thumbnails/tibet-2.jpg" alt="Tibetan Plateau"></li>
<li><img data-original="images/tibet-3.jpg" src="data:images/thumbnails/tibet-3.jpg" alt="Jokhang Temple"></li>
<li><img data-original="images/tibet-4.jpg" src="data:images/thumbnails/tibet-4.jpg" alt="Potala Palace 1"></li>
<li><img data-original="images/tibet-5.jpg" src="data:images/thumbnails/tibet-5.jpg" alt="Potala Palace 2"></li>
<li><img data-original="images/tibet-6.jpg" src="data:images/thumbnails/tibet-6.jpg" alt="Potala Palace 3"></li>
<li><img data-original="images/tibet-7.jpg" src="data:images/thumbnails/tibet-7.jpg" alt="Lhasa River"></li>
<li><img data-original="images/tibet-8.jpg" src="data:images/thumbnails/tibet-8.jpg" alt="Namtso 1"></li>
<li><img data-original="images/tibet-9.jpg" src="data:images/thumbnails/tibet-9.jpg" alt="Namtso 2"></li>
</ul>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/viewer.min.js"></script>
<script>
/*
var url,
options = {
inline: true,
url: 'data-original',
build: function (e) {
console.log(e.type);
},
built: function (e) {
console.log(e.type);
},
show: function (e) {
console.log(e.type);
},
shown: function (e) {
console.log(e.type);
},
hide: function (e) {
console.log(e.type);
},
hidden: function (e) {
console.log(e.type);
},
view: function (e) {
console.log(e.type);
},
viewed: function (e) {
console.log(e.type);
}
};
$('.docs-pictures').viewer(url);*/
$('.docs-pictures').viewer("data-original"); </script>
</body>
</html>
html
/*!
* Viewer v0.5.1
* https://github.com/fengyuanchen/viewer
*
* Copyright (c) 2015-2016 Fengyuan Chen
* Released under the MIT license
*
* Date: 2016-03-11T07:57:59.486Z
*/
!function(i){"function"==typeof define&&define.amd?define("viewer",["jquery"],i):i("object"==typeof exports?require("jquery"):jQuery)}(function(i){"use strict";function t(i){return"string"==typeof i}function e(i){return"number"==typeof i&&!isNaN(i)}function s(i){return"undefined"==typeof i}function n(i,t){var s=[];return e(t)&&s.push(t),s.slice.apply(i,s)}function o(i,t){var e=n(arguments,2);return function(){return i.apply(t,e.concat(n(arguments)))}}function a(i){var t=[],s=i.rotate,n=i.scaleX,o=i.scaleY;return e(s)&&t.push("rotate("+s+"deg)"),e(n)&&e(o)&&t.push("scale("+n+","+o+")"),t.length?t.join(" "):"none"}function h(i){return i.offsetWidth}function r(i){return t(i)?i.replace(/^.*\//,"").replace(/[\?&#].*$/,""):""}function l(i,t){var e;return i.naturalWidth?t(i.naturalWidth,i.naturalHeight):(e=document.createElement("img"),e.onload=function(){t(this.width,this.height)},void(e.src=i.src))}function d(t){var e=t.length,s=0,n=0;return e&&(i.each(t,function(i,t){s+=t.pageX,n+=t.pageY}),s/=e,n/=e),{pageX:s,pageY:n}}function c(i){switch(i){case 2:return x;case 3:return $;case 4:return C}}function u(t,e){this.$element=i(t),this.options=i.extend({},u.DEFAULTS,i.isPlainObject(e)&&e),this.isImg=!1,this.isBuilt=!1,this.isShown=!1,this.isViewed=!1,this.isFulled=!1,this.isPlayed=!1,this.wheeling=!1,this.playing=!1,this.fading=!1,this.tooltiping=!1,this.transitioning=!1,this.action=!1,this.target=!1,this.timeout=!1,this.index=0,this.length=0,this.init()}var m=i(window),v=i(document),f="viewer",g=document.createElement(f),w="viewer-fixed",p="viewer-open",b="viewer-show",y="viewer-hide",x="viewer-hide-xs-down",$="viewer-hide-sm-down",C="viewer-hide-md-down",F="viewer-fade",z="viewer-in",Y="viewer-move",k="viewer-active",I="viewer-invisible",X="viewer-transition",T="viewer-fullscreen",P="viewer-fullscreen-exit",V="viewer-close",E="img",S="mousedown touchstart pointerdown MSPointerDown",D="mousemove touchmove pointermove MSPointerMove",L="mouseup touchend touchcancel pointerup pointercancel MSPointerUp MSPointerCancel",q="wheel mousewheel DOMMouseScroll",R="transitionend",M="load."+f,W="keydown."+f,A="click."+f,_="resize."+f,j="build."+f,B="built."+f,H="show."+f,U="shown."+f,N="hide."+f,O="hidden."+f,Z="view."+f,K="viewed."+f,Q="undefined"!=typeof g.style.transition,G=Math.round,J=Math.sqrt,ii=Math.abs,ti=Math.min,ei=Math.max,si=Number;u.prototype={constructor:u,init:function(){var t=this.options,e=this.$element,s=e.is(E),n=s?e:e.find(E),o=n.length,a=i.proxy(this.ready,this);o&&(i.isFunction(t.build)&&e.one(j,t.build),this.trigger(j).isDefaultPrevented()||(Q||(t.transition=!1),this.isImg=s,this.length=o,this.count=0,this.$images=n,this.$body=i("body"),t.inline?(e.one(B,i.proxy(function(){this.view()},this)),n.each(function(){this.complete?a():i(this).one(M,a)})):e.on(A,i.proxy(this.start,this))))},ready:function(){this.count++,this.count===this.length&&this.build()},build:function(){var t,e,s,n,o,a,h=this.options,r=this.$element;this.isBuilt||(this.$parent=t=r.parent(),this.$viewer=e=i(u.TEMPLATE),this.$canvas=e.find(".viewer-canvas"),this.$footer=e.find(".viewer-footer"),this.$title=s=e.find(".viewer-title"),this.$toolbar=n=e.find(".viewer-toolbar"),this.$navbar=o=e.find(".viewer-navbar"),this.$button=a=e.find(".viewer-button"),this.$tooltip=e.find(".viewer-tooltip"),this.$player=e.find(".viewer-player"),this.$list=e.find(".viewer-list"),s.addClass(h.title?c(h.title):y),n.addClass(h.toolbar?c(h.toolbar):y),n.find("li[class*=zoom]").toggleClass(I,!h.zoomable),n.find("li[class*=flip]").toggleClass(I,!h.scalable),h.rotatable||n.find("li[class*=rotate]").addClass(I).appendTo(n),o.addClass(h.navbar?c(h.navbar):y),a.toggleClass(y,!h.button),h.inline?(a.addClass(T),e.css("z-index",h.zIndexInline),"static"===t.css("position")&&t.css("position","relative")):(a.addClass(V),e.css("z-index",h.zIndex).addClass([w,F,y].join(" "))),r.after(e),h.inline&&(this.render(),this.bind(),this.isShown=!0),this.isBuilt=!0,i.isFunction(h.built)&&r.one(B,h.built),this.trigger(B))},unbuild:function(){this.isBuilt&&(this.isBuilt=!1,this.$viewer.remove())},bind:function(){var t=this.options,e=this.$element;i.isFunction(t.view)&&e.on(Z,t.view),i.isFunction(t.viewed)&&e.on(K,t.viewed),this.$viewer.on(A,i.proxy(this.click,this)).on(q,i.proxy(this.wheel,this)),this.$canvas.on(S,i.proxy(this.mousedown,this)),v.on(D,this._mousemove=o(this.mousemove,this)).on(L,this._mouseup=o(this.mouseup,this)).on(W,this._keydown=o(this.keydown,this)),m.on(_,this._resize=o(this.resize,this))},unbind:function(){var t=this.options,e=this.$element;i.isFunction(t.view)&&e.off(Z,t.view),i.isFunction(t.viewed)&&e.off(K,t.viewed),this.$viewer.off(A,this.click).off(q,this.wheel),this.$canvas.off(S,this.mousedown),v.off(D,this._mousemove).off(L,this._mouseup).off(W,this._keydown),m.off(_,this._resize)},render:function(){this.initContainer(),this.initViewer(),this.initList(),this.renderViewer()},initContainer:function(){this.container={width:m.innerWidth(),height:m.innerHeight()}},initViewer:function(){var t,e=this.options,s=this.$parent;e.inline&&(this.parent=t={width:ei(s.width(),e.minWidth),height:ei(s.height(),e.minHeight)}),!this.isFulled&&t||(t=this.container),this.viewer=i.extend({},t)},renderViewer:function(){this.options.inline&&!this.isFulled&&this.$viewer.css(this.viewer)},initList:function(){var e=this.options,s=this.$element,n=this.$list,o=[];this.$images.each(function(s){var n=this.src,a=this.alt||r(n),h=e.url;n&&(t(h)?h=this.getAttribute(h):i.isFunction(h)&&(h=h.call(this,this)),o.push('<li><img src="'+n+'" data-action="view" data-index="'+s+'" data-original-url="'+(h||n)+'" alt="'+a+'"></li>'))}),n.html(o.join("")).find(E).one(M,{filled:!0},i.proxy(this.loadImage,this)),this.$items=n.children(),e.transition&&s.one(K,function(){n.addClass(X)})},renderList:function(i){var t=i||this.index,e=this.$items.eq(t).width(),s=e+1;this.$list.css({width:s*this.length,marginLeft:(this.viewer.width-e)/2-s*t})},resetList:function(){this.$list.empty().removeClass(X).css("margin-left",0)},initImage:function(t){var e=this.options,s=this.$image,n=this.viewer,o=this.$footer.height(),a=n.width,h=ei(n.height-o,o),r=this.image||{};l(s[0],i.proxy(function(s,n){var o,l,d=s/n,c=a,u=h;h*d>a?u=a/d:c=h*d,c=ti(.9*c,s),u=ti(.9*u,n),l={naturalWidth:s,naturalHeight:n,aspectRatio:d,ratio:c/s,width:c,height:u,left:(a-c)/2,top:(h-u)/2},o=i.extend({},l),e.rotatable&&(l.rotate=r.rotate||0,o.rotate=0),e.scalable&&(l.scaleX=r.scaleX||1,l.scaleY=r.scaleY||1,o.scaleX=1,o.scaleY=1),this.image=l,this.initialImage=o,i.isFunction(t)&&t()},this))},renderImage:function(t){var e=this.image,s=this.$image;s.css({width:e.width,height:e.height,marginLeft:e.left,marginTop:e.top,transform:a(e)}),i.isFunction(t)&&(this.transitioning?s.one(R,t):t())},resetImage:function(){this.$image&&(this.$image.remove(),this.$image=null)},start:function(t){var e=t.target;i(e).is("img")&&(this.target=e,this.show())},click:function(t){var e=i(t.target),s=e.data("action"),n=this.image;switch(s){case"mix":this.isPlayed?this.stop():this.options.inline?this.isFulled?this.exit():this.full():this.hide();break;case"view":this.view(e.data("index"));break;case"zoom-in":this.zoom(.1,!0);break;case"zoom-out":this.zoom(-.1,!0);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(-n.scaleX||-1);break;case"flip-vertical":this.scaleY(-n.scaleY||-1);break;default:this.isPlayed&&this.stop()}},load:function(){var t=this.options,e=this.viewer,s=this.$image;this.timeout&&(clearTimeout(this.timeout),this.timeout=!1),s.removeClass(I).css("cssText","width:0;height:0;margin-left:"+e.width/2+"px;margin-top:"+e.height/2+"px;max-width:none!important;visibility:visible;"),this.initImage(i.proxy(function(){s.toggleClass(X,t.transition).toggleClass(Y,t.movable),this.renderImage(i.proxy(function(){this.isViewed=!0,this.trigger(K)},this))},this))},loadImage:function(t){var e=t.target,s=i(e),n=s.parent(),o=n.width(),a=n.height(),h=t.data&&t.data.filled;l(e,function(i,t){var e=i/t,n=o,r=a;a*e>o?h?n=a*e:r=o/e:h?r=o/e:n=a*e,s.css({width:n,height:r,marginLeft:(o-n)/2,marginTop:(a-r)/2})})},resize:function(){this.initContainer(),this.initViewer(),this.renderViewer(),this.renderList(),this.isViewed&&this.initImage(i.proxy(function(){this.renderImage()},this)),this.isPlayed&&this.$player.find(E).one(M,i.proxy(this.loadImage,this)).trigger(M)},wheel:function(t){var e=t.originalEvent||t,s=si(this.options.zoomRatio)||.1,n=1;this.isViewed&&(t.preventDefault(),this.wheeling||(this.wheeling=!0,setTimeout(i.proxy(function(){this.wheeling=!1},this),50),e.deltaY?n=e.deltaY>0?1:-1:e.wheelDelta?n=-e.wheelDelta/120:e.detail&&(n=e.detail>0?1:-1),this.zoom(-n*s,!0,t)))},keydown:function(i){var t=this.options,e=i.which;if(this.isFulled&&t.keyboard)switch(e){case 27:this.isPlayed?this.stop():t.inline?this.isFulled&&this.exit():this.hide();break;case 32:this.isPlayed&&this.stop();break;case 37:this.prev();break;case 38:i.preventDefault(),this.zoom(t.zoomRatio,!0);break;case 39:this.next();break;case 40:i.preventDefault(),this.zoom(-t.zoomRatio,!0);break;case 48:case 49:(i.ctrlKey||i.shiftKey)&&(i.preventDefault(),this.toggle())}},mousedown:function(i){var t,e=this.options,s=i.originalEvent,n=s&&s.touches,o=i,a=e.movable?"move":!1;if(this.isViewed){if(n){if(t=n.length,t>1){if(!e.zoomable||2!==t)return;o=n[1],this.startX2=o.pageX,this.startY2=o.pageY,a="zoom"}else this.isSwitchable()&&(a="switch");o=n[0]}a&&(i.preventDefault(),this.action=a,this.startX=o.pageX||s&&s.pageX,this.startY=o.pageY||s&&s.pageY)}},mousemove:function(i){var t,e=this.options,s=this.action,n=this.$image,o=i.originalEvent,a=o&&o.touches,h=i;if(this.isViewed){if(a){if(t=a.length,t>1){if(!e.zoomable||2!==t)return;h=a[1],this.endX2=h.pageX,this.endY2=h.pageY}h=a[0]}s&&(i.preventDefault(),"move"===s&&e.transition&&n.hasClass(X)&&n.removeClass(X),this.endX=h.pageX||o&&o.pageX,this.endY=h.pageY||o&&o.pageY,this.change(i))}},mouseup:function(i){var t=this.action;t&&(i.preventDefault(),"move"===t&&this.options.transition&&this.$image.addClass(X),this.action=!1)},show:function(){var t,e=this.options;e.inline||this.transitioning||(this.isBuilt||this.build(),i.isFunction(e.show)&&this.$element.one(H,e.show),this.trigger(H).isDefaultPrevented()||(this.$body.addClass(p),t=this.$viewer.removeClass(y),this.$element.one(U,i.proxy(function(){this.view(this.target?this.$images.index(this.target):this.index),this.target=!1},this)),e.transition?(this.transitioning=!0,t.addClass(X),h(t[0]),t.one(R,i.proxy(this.shown,this)).addClass(z)):(t.addClass(z),this.shown())))},hide:function(){var t=this.options,e=this.$viewer;t.inline||this.transitioning||!this.isShown||(i.isFunction(t.hide)&&this.$element.one(N,t.hide),this.trigger(N).isDefaultPrevented()||(this.isViewed&&t.transition?(this.transitioning=!0,this.$image.one(R,i.proxy(function(){e.one(R,i.proxy(this.hidden,this)).removeClass(z)},this)),this.zoomTo(0,!1,!1,!0)):(e.removeClass(z),this.hidden())))},view:function(t){var e,s,n,o,a,h=this.$title;t=Number(t)||0,!this.isShown||this.isPlayed||0>t||t>=this.length||this.isViewed&&t===this.index||this.trigger(Z).isDefaultPrevented()||(s=this.$items.eq(t),n=s.find(E),o=n.data("originalUrl"),a=n.attr("alt"),this.$image=e=i('<img src="'+o+'" alt="'+a+'">'),this.isViewed&&this.$items.eq(this.index).removeClass(k),s.addClass(k),this.isViewed=!1,this.index=t,this.image=null,this.$canvas.html(e.addClass(I)),this.renderList(),h.empty(),this.$element.one(K,i.proxy(function(){var i=this.image,t=i.naturalWidth,e=i.naturalHeight;h.html(a+" ("+t+" × "+e+")")},this)),e[0].complete?this.load():(e.one(M,i.proxy(this.load,this)),this.timeout&&clearTimeout(this.timeout),this.timeout=setTimeout(i.proxy(function(){e.removeClass(I),this.timeout=!1},this),1e3)))},prev:function(){this.view(ei(this.index-1,0))},next:function(){this.view(ti(this.index+1,this.length-1))},move:function(i,t){var e=this.image;this.moveTo(s(i)?i:e.left+si(i),s(t)?t:e.top+si(t))},moveTo:function(i,t){var n=this.image,o=!1;s(t)&&(t=i),i=si(i),t=si(t),this.isViewed&&!this.isPlayed&&this.options.movable&&(e(i)&&(n.left=i,o=!0),e(t)&&(n.top=t,o=!0),o&&this.renderImage())},zoom:function(i,t,e){var s=this.image;i=si(i),i=0>i?1/(1-i):1+i,this.zoomTo(s.width*i/s.naturalWidth,t,e)},zoomTo:function(i,t,s,n){var o,a,h,r,l,c=this.options,u=.01,m=100,v=this.image,f=v.width,g=v.height;i=ei(0,i),e(i)&&this.isViewed&&!this.isPlayed&&(n||c.zoomable)&&(n||(u=ei(u,c.minZoomRatio),m=ti(m,c.maxZoomRatio),i=ti(ei(i,u),m)),i>.95&&1.05>i&&(i=1),a=v.naturalWidth*i,h=v.naturalHeight*i,s&&(o=s.originalEvent)?(r=this.$viewer.offset(),l=o.touches?d(o.touches):{pageX:s.pageX||o.pageX||0,pageY:s.pageY||o.pageY||0},v.left-=(a-f)*((l.pageX-r.left-v.left)/f),v.top-=(h-g)*((l.pageY-r.top-v.top)/g)):(v.left-=(a-f)/2,v.top-=(h-g)/2),v.width=a,v.height=h,v.ratio=i,this.renderImage(),t&&this.tooltip())},rotate:function(i){this.rotateTo((this.image.rotate||0)+si(i))},rotateTo:function(i){var t=this.image;i=si(i),e(i)&&this.isViewed&&!this.isPlayed&&this.options.rotatable&&(t.rotate=i,this.renderImage())},scale:function(i,t){var n=this.image,o=!1;s(t)&&(t=i),i=si(i),t=si(t),this.isViewed&&!this.isPlayed&&this.options.scalable&&(e(i)&&(n.scaleX=i,o=!0),e(t)&&(n.scaleY=t,o=!0),o&&this.renderImage())},scaleX:function(i){this.scale(i,this.image.scaleY)},scaleY:function(i){this.scale(this.image.scaleX,i)},play:function(){var t,s=this.options,n=this.$player,o=i.proxy(this.loadImage,this),a=[],h=0,r=0;this.isShown&&!this.isPlayed&&(s.fullscreen&&this.requestFullscreen(),this.isPlayed=!0,n.addClass(b),this.$items.each(function(t){var e=i(this),l=e.find(E),d=i('<img src="'+l.data("originalUrl")+'" alt="'+l.attr("alt")+'">');h++,d.addClass(F).toggleClass(X,s.transition),e.hasClass(k)&&(d.addClass(z),r=t),a.push(d),d.one(M,{filled:!1},o),n.append(d)}),e(s.interval)&&s.interval>0&&(t=i.proxy(function(){this.playing=setTimeout(function(){a[r].removeClass(z),r++,r=h>r?r:0,a[r].addClass(z),t()},s.interval)},this),h>1&&t()))},stop:function(){this.isPlayed&&(this.options.fullscreen&&this.exitFullscreen(),this.isPlayed=!1,clearTimeout(this.playing),this.$player.removeClass(b).empty())},full:function(){var t=this.options,e=this.$image,s=this.$list;this.isShown&&!this.isPlayed&&!this.isFulled&&t.inline&&(this.isFulled=!0,this.$body.addClass(p),this.$button.addClass(P),t.transition&&(e.removeClass(X),s.removeClass(X)),this.$viewer.addClass(w).removeAttr("style").css("z-index",t.zIndex),this.initContainer(),this.viewer=i.extend({},this.container),this.renderList(),this.initImage(i.proxy(function(){this.renderImage(function(){t.transition&&setTimeout(function(){e.addClass(X),s.addClass(X)},0)})},this)))},exit:function(){var t=this.options,e=this.$image,s=this.$list;this.isFulled&&(this.isFulled=!1,this.$body.removeClass(p),this.$button.removeClass(P),t.transition&&(e.removeClass(X),s.removeClass(X)),this.$viewer.removeClass(w).css("z-index",t.zIndexInline),this.viewer=i.extend({},this.parent),this.renderViewer(),this.renderList(),this.initImage(i.proxy(function(){this.renderImage(function(){t.transition&&setTimeout(function(){e.addClass(X),s.addClass(X)},0)})},this)))},tooltip:function(){var t=this.options,e=this.$tooltip,s=this.image,n=[b,F,X].join(" ");this.isViewed&&!this.isPlayed&&t.tooltip&&(e.text(G(100*s.ratio)+"%"),this.tooltiping?clearTimeout(this.tooltiping):t.transition?(this.fading&&e.trigger(R),e.addClass(n),h(e[0]),e.addClass(z)):e.addClass(b),this.tooltiping=setTimeout(i.proxy(function(){t.transition?(e.one(R,i.proxy(function(){e.removeClass(n),this.fading=!1},this)).removeClass(z),this.fading=!0):e.removeClass(b),this.tooltiping=!1},this),1e3))},toggle:function(){1===this.image.ratio?this.zoomTo(this.initialImage.ratio,!0):this.zoomTo(1,!0)},reset:function(){this.isViewed&&!this.isPlayed&&(this.image=i.extend({},this.initialImage),this.renderImage())},update:function(){var t,e=this.$element,s=this.$images,n=[];if(this.isImg){if(!e.parent().length)return this.destroy()}else this.$images=s=e.find(E),this.length=s.length;this.isBuilt&&(i.each(this.$items,function(t){var e=i(this).find("img")[0],o=s[t];o?o.src!==e.src&&n.push(t):n.push(t)}),this.$list.width("auto"),this.initList(),this.isShown&&(this.length?this.isViewed&&(t=i.inArray(this.index,n),t>=0?(this.isViewed=!1,this.view(ei(this.index-(t+1),0))):this.$items.eq(this.index).addClass(k)):(this.$image=null,this.isViewed=!1,this.index=0,this.image=null,this.$canvas.empty(),this.$title.empty())))},destroy:function(){var i=this.$element;this.options.inline?this.unbind():(this.isShown&&this.unbind(),i.off(A,this.start)),this.unbuild(),i.removeData(f)},trigger:function(t,e){var s=i.Event(t,e);return this.$element.trigger(s),s},shown:function(){var t=this.options;this.transitioning=!1,this.isFulled=!0,this.isShown=!0,this.isVisible=!0,this.render(),this.bind(),i.isFunction(t.shown)&&this.$element.one(U,t.shown),this.trigger(U)},hidden:function(){var t=this.options;this.transitioning=!1,this.isViewed=!1,this.isFulled=!1,this.isShown=!1,this.isVisible=!1,this.unbind(),this.$body.removeClass(p),this.$viewer.addClass(y),this.resetList(),this.resetImage(),i.isFunction(t.hidden)&&this.$element.one(O,t.hidden),this.trigger(O)},requestFullscreen:function(){var i=document.documentElement;!this.isFulled||document.fullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement||document.msFullscreenElement||(i.requestFullscreen?i.requestFullscreen():i.msRequestFullscreen?i.msRequestFullscreen():i.mozRequestFullScreen?i.mozRequestFullScreen():i.webkitRequestFullscreen&&i.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT))},exitFullscreen:function(){this.isFulled&&(document.exitFullscreen?document.exitFullscreen():document.msExitFullscreen?document.msExitFullscreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.webkitExitFullscreen&&document.webkitExitFullscreen())},change:function(i){var t=this.endX-this.startX,e=this.endY-this.startY;switch(this.action){case"move":this.move(t,e);break;case"zoom":this.zoom(function(i,t,e,s){var n=J(i*i+t*t),o=J(e*e+s*s);return(o-n)/n}(ii(this.startX-this.startX2),ii(this.startY-this.startY2),ii(this.endX-this.endX2),ii(this.endY-this.endY2)),!1,i),this.startX2=this.endX2,this.startY2=this.endY2;break;case"switch":this.action="switched",ii(t)>ii(e)&&(t>1?this.prev():-1>t&&this.next())}this.startX=this.endX,this.startY=this.endY},isSwitchable:function(){var i=this.image,t=this.viewer;return i.left>=0&&i.top>=0&&i.width<=t.width&&i.height<=t.height}},u.DEFAULTS={inline:!1,button:!0,navbar:!0,title:!0,toolbar:!0,tooltip:!0,movable:!0,zoomable:!0,rotatable:!0,scalable:!0,transition:!0,fullscreen:!0,keyboard:!0,interval:5e3,minWidth:200,minHeight:100,zoomRatio:.1,minZoomRatio:.01,maxZoomRatio:100,zIndex:2015,zIndexInline:0,url:"src",build:null,built:null,show:null,shown:null,hide:null,hidden:null,view:null,viewed:null},u.setDefaults=function(t){i.extend(u.DEFAULTS,t)},u.TEMPLATE='<div class="viewer-container"><div class="viewer-canvas"></div><div class="viewer-footer"><div class="viewer-title"></div><ul class="viewer-toolbar"><li class="viewer-zoom-in" data-action="zoom-in"></li><li class="viewer-zoom-out" data-action="zoom-out"></li><li class="viewer-one-to-one" data-action="one-to-one"></li><li class="viewer-reset" data-action="reset"></li><li class="viewer-prev" data-action="prev"></li><li class="viewer-play" data-action="play"></li><li class="viewer-next" data-action="next"></li><li class="viewer-rotate-left" data-action="rotate-left"></li><li class="viewer-rotate-right" data-action="rotate-right"></li><li class="viewer-flip-horizontal" data-action="flip-horizontal"></li><li 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 class="viewer-button" data-action="mix"></div><div class="viewer-player"></div></div>',u.other=i.fn.viewer,i.fn.viewer=function(e){var o,a=n(arguments,1);return this.each(function(){var s,n=i(this),h=n.data(f);if(!h){if(/destroy|hide|exit|stop|reset/.test(e))return;n.data(f,h=new u(this,e))}t(e)&&i.isFunction(s=h[e])&&(o=s.apply(h,a))}),s(o)?this:o},i.fn.viewer.Constructor=u,i.fn.viewer.setDefaults=u.setDefaults,i.fn.viewer.noConflict=function(){return i.fn.viewer=u.other,this}});
viewer.min.js
/*!
* Viewer.js v0.3.1
* https://github.com/fengyuanchen/viewerjs
*
* Copyright (c) 2015-2016 Fengyuan Chen
* Released under the MIT license
*
* Date: 2016-02-02T11:35:36.273Z
*/.viewer-container,.viewer-navbar{background-color:#000;overflow:hidden}.viewer-canvas,.viewer-container,.viewer-footer,.viewer-player{right:;bottom:;left:}.viewer-button,.viewer-canvas,.viewer-container,.viewer-footer,.viewer-list,.viewer-navbar,.viewer-open,.viewer-title,.viewer-toolbar,.viewer-toolbar>li{overflow:hidden}.viewer-close:before,.viewer-flip-horizontal:before,.viewer-flip-vertical:before,.viewer-fullscreen-exit:before,.viewer-fullscreen:before,.viewer-next:before,.viewer-one-to-one:before,.viewer-play:before,.viewer-prev:before,.viewer-reset:before,.viewer-rotate-left:before,.viewer-rotate-right:before,.viewer-zoom-in:before,.viewer-zoom-out:before{font-size:;line-height:;display:block;width:20px;height:20px;color:transparent;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}.viewer-zoom-in:before{content:'Zoom In';background-position:0 0}.viewer-zoom-out:before{content:'Zoom Out';background-position:-20px 0}.viewer-one-to-one:before{content:'One to One';background-position:-40px 0}.viewer-reset:before{content:'Reset';background-position:-60px 0}.viewer-prev:before{content:'Previous';background-position:-80px 0}.viewer-play:before{content:'Play';background-position:-100px 0}.viewer-next:before{content:'Next';background-position:-120px 0}.viewer-rotate-left:before{content:'Rotate Left';background-position:-140px 0}.viewer-rotate-right:before{content:'Rotate Right';background-position:-160px 0}.viewer-flip-horizontal:before{content:'Flip Horizontal';background-position:-180px 0}.viewer-flip-vertical:before{content:'Flip Vertical';background-position:-200px 0}.viewer-fullscreen:before{content:'Enter Full Screen';background-position:-220px 0}.viewer-fullscreen-exit:before{content:'Exit Full Screen';background-position:-240px 0}.viewer-close:before{content:'Close';background-position:-260px 0}.viewer-container{font-size:;line-height:;position:absolute;top:;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:rgba(0,0,0,.5);direction:ltr!important;-ms-touch-action:none;touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout: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;width:100%;min-width:0!important;max-width:none!important;height:auto;min-height:0!important;max-height:none!important}.viewer-player,.viewer-tooltip{display:none;position:absolute}.viewer-canvas{position:absolute;top:}.viewer-canvas>img{width:auto;max-width:90%!important;height:auto;margin:15px auto}.viewer-footer{position:absolute;text-align:center}.viewer-navbar{background-color:rgba(0,0,0,.5)}.viewer-list{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;height:50px;margin:;padding:1px 0}.viewer-list>li{font-size:;line-height:;float:left;overflow:hidden;width:30px;height:50px;cursor:pointer;opacity:.5;color:transparent;filter:alpha(opacity=50)}.viewer-list>li+li{margin-left:1px}.viewer-list>.viewer-active{opacity:;filter:alpha(opacity=100)}.viewer-player{top:;cursor:none;background-color:#000}.viewer-player>img{position:absolute;top:;left:}.viewer-toolbar{width:280px;margin:0 auto 5px;padding:3px 0}.viewer-toolbar>li{float:left;width:24px;height:24px;cursor:pointer;border-radius:50%;background-color:#000;background-color:rgba(0,0,0,.5)}.viewer-toolbar>li:hover{background-color:#000;background-color:rgba(0,0,0,.8)}.viewer-toolbar>li:before{margin:2px}.viewer-toolbar>li+li{margin-left:1px}.viewer-toolbar>.viewer-play{width:30px;height:30px;margin-top:-3px;margin-bottom:-3px}.viewer-toolbar>.viewer-play:before{margin:5px}.viewer-tooltip{font-size:12px;line-height:20px;top:50%;left:50%;width:50px;height:20px;margin-top:-10px;margin-left:-25px;text-align:center;color:#fff;border-radius:10px;background-color:#000;background-color:rgba(0,0,0,.8)}.viewer-title{font-size:12px;line-height:;display:inline-block;max-width:90%;margin:0 5% 5px;white-space:nowrap;text-overflow:ellipsis;opacity:.8;color:#ccc;filter:alpha(opacity=80)}.viewer-title:hover{opacity:;filter:alpha(opacity=100)}.viewer-button{position:absolute;top:-40px;right:-40px;width:80px;height:80px;cursor:pointer;border-radius:50%;background-color:#000;background-color:rgba(0,0,0,.5)}.viewer-button:before{position:absolute;bottom:15px;left:15px}.viewer-fixed{position:fixed}.viewer-show{display:block}.viewer-hide{display:none}.viewer-invisible{visibility:hidden}.viewer-move{cursor:move;cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}.viewer-fade{opacity:;filter:alpha(opacity=0)}.viewer-in{opacity:;filter:alpha(opacity=100)}.viewer-transition{-webkit-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}@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}}
viewer.min.css
/*!
* Viewer v0.5.1
* https://github.com/fengyuanchen/viewer
*
* Copyright (c) 2015-2016 Fengyuan Chen
* Released under the MIT license
*
* Date: 2016-03-11T07:57:59.486Z
*/ (function (factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as anonymous module.
define('viewer', ['jquery'], factory);
} else if (typeof exports === 'object') {
// Node / CommonJS
factory(require('jquery'));
} else {
// Browser globals.
factory(jQuery);
}
})(function ($) { 'use strict'; var $window = $(window);
var $document = $(document); // Constants
var NAMESPACE = 'viewer';
var ELEMENT_VIEWER = document.createElement(NAMESPACE); // Classes
var CLASS_FIXED = 'viewer-fixed';
var CLASS_OPEN = 'viewer-open';
var CLASS_SHOW = 'viewer-show';
var CLASS_HIDE = 'viewer-hide';
var CLASS_HIDE_XS_DOWN = 'viewer-hide-xs-down';
var CLASS_HIDE_SM_DOWN = 'viewer-hide-sm-down';
var CLASS_HIDE_MD_DOWN = 'viewer-hide-md-down';
var CLASS_FADE = 'viewer-fade';
var CLASS_IN = 'viewer-in';
var CLASS_MOVE = 'viewer-move';
var CLASS_ACTIVE = 'viewer-active';
var CLASS_INVISIBLE = 'viewer-invisible';
var CLASS_TRANSITION = 'viewer-transition';
var CLASS_FULLSCREEN = 'viewer-fullscreen';
var CLASS_FULLSCREEN_EXIT = 'viewer-fullscreen-exit';
var CLASS_CLOSE = 'viewer-close'; // Selectors
var SELECTOR_IMG = 'img'; // Events
var EVENT_MOUSEDOWN = 'mousedown touchstart pointerdown MSPointerDown';
var EVENT_MOUSEMOVE = 'mousemove touchmove pointermove MSPointerMove';
var EVENT_MOUSEUP = 'mouseup touchend touchcancel pointerup pointercancel MSPointerUp MSPointerCancel';
var EVENT_WHEEL = 'wheel mousewheel DOMMouseScroll';
var EVENT_TRANSITIONEND = 'transitionend';
var EVENT_LOAD = 'load.' + NAMESPACE;
var EVENT_KEYDOWN = 'keydown.' + NAMESPACE;
var EVENT_CLICK = 'click.' + NAMESPACE;
var EVENT_RESIZE = 'resize.' + NAMESPACE;
var EVENT_BUILD = 'build.' + NAMESPACE;
var EVENT_BUILT = 'built.' + NAMESPACE;
var EVENT_SHOW = 'show.' + NAMESPACE;
var EVENT_SHOWN = 'shown.' + NAMESPACE;
var EVENT_HIDE = 'hide.' + NAMESPACE;
var EVENT_HIDDEN = 'hidden.' + NAMESPACE;
var EVENT_VIEW = 'view.' + NAMESPACE;
var EVENT_VIEWED = 'viewed.' + NAMESPACE; // Supports
var SUPPORT_TRANSITION = typeof ELEMENT_VIEWER.style.transition !== 'undefined'; // Others
var round = Math.round;
var sqrt = Math.sqrt;
var abs = Math.abs;
var min = Math.min;
var max = Math.max;
var num = Number; function isString(s) {
return typeof s === 'string';
} function isNumber(n) {
return typeof n === 'number' && !isNaN(n);
} function isUndefined(u) {
return typeof u === 'undefined';
} function toArray(obj, offset) {
var args = []; if (isNumber(offset)) { // It's necessary for IE8
args.push(offset);
} return args.slice.apply(obj, args);
} // Custom proxy to avoid jQuery's guid
function proxy(fn, context) {
var args = toArray(arguments, 2); return function () {
return fn.apply(context, args.concat(toArray(arguments)));
};
} function getTransform(options) {
var transforms = [];
var rotate = options.rotate;
var scaleX = options.scaleX;
var scaleY = options.scaleY; if (isNumber(rotate)) {
transforms.push('rotate(' + rotate + 'deg)');
} if (isNumber(scaleX) && isNumber(scaleY)) {
transforms.push('scale(' + scaleX + ',' + scaleY + ')');
} return transforms.length ? transforms.join(' ') : 'none';
} // Force reflow to enable CSS3 transition
function forceReflow(element) {
return element.offsetWidth;
} // e.g.: http://domain.com/path/to/picture.jpg?size=1280×960 -> picture.jpg
function getImageName(url) {
return isString(url) ? url.replace(/^.*\//, '').replace(/[\?&#].*$/, '') : '';
} function getImageSize(image, callback) {
var newImage; // Modern browsers
if (image.naturalWidth) {
return callback(image.naturalWidth, image.naturalHeight);
} // IE8: Don't use `new Image()` here
newImage = document.createElement('img'); newImage.onload = function () {
callback(this.width, this.height);
}; newImage.src = image.src;
} function getTouchesCenter(touches) {
var length = touches.length;
var pageX = 0;
var pageY = 0; if (length) {
$.each(touches, function (i, touch) {
pageX += touch.pageX;
pageY += touch.pageY;
}); pageX /= length;
pageY /= length;
} return {
pageX: pageX,
pageY: pageY
};
} function getResponsiveClass(option) {
switch (option) {
case 2:
return CLASS_HIDE_XS_DOWN; case 3:
return CLASS_HIDE_SM_DOWN; case 4:
return CLASS_HIDE_MD_DOWN;
}
} function Viewer(element, options) {
this.$element = $(element);
this.options = $.extend({}, Viewer.DEFAULTS, $.isPlainObject(options) && options);
this.isImg = false;
this.isBuilt = false;
this.isShown = false;
this.isViewed = false;
this.isFulled = false;
this.isPlayed = 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.init();
} Viewer.prototype = {
constructor: Viewer, init: function () {
var options = this.options;
var $this = this.$element;
var isImg = $this.is(SELECTOR_IMG);
var $images = isImg ? $this : $this.find(SELECTOR_IMG);
var length = $images.length;
var ready = $.proxy(this.ready, this); if (!length) {
return;
} if ($.isFunction(options.build)) {
$this.one(EVENT_BUILD, options.build);
} if (this.trigger(EVENT_BUILD).isDefaultPrevented()) {
return;
} // Override `transition` option if it is not supported
if (!SUPPORT_TRANSITION) {
options.transition = false;
} this.isImg = isImg;
this.length = length;
this.count = 0;
this.$images = $images;
this.$body = $('body'); if (options.inline) {
$this.one(EVENT_BUILT, $.proxy(function () {
this.view();
}, this)); $images.each(function () {
if (this.complete) {
ready();
} else {
$(this).one(EVENT_LOAD, ready);
}
});
} else {
$this.on(EVENT_CLICK, $.proxy(this.start, this));
}
}, ready: function () {
this.count++; if (this.count === this.length) {
this.build();
}
}, build: function () {
var options = this.options;
var $this = this.$element;
var $parent;
var $viewer;
var $title;
var $toolbar;
var $navbar;
var $button; if (this.isBuilt) {
return;
} this.$parent = $parent = $this.parent();
this.$viewer = $viewer = $(Viewer.TEMPLATE);
this.$canvas = $viewer.find('.viewer-canvas');
this.$footer = $viewer.find('.viewer-footer');
this.$title = $title = $viewer.find('.viewer-title');
this.$toolbar = $toolbar = $viewer.find('.viewer-toolbar');
this.$navbar = $navbar = $viewer.find('.viewer-navbar');
this.$button = $button = $viewer.find('.viewer-button');
this.$tooltip = $viewer.find('.viewer-tooltip');
this.$player = $viewer.find('.viewer-player');
this.$list = $viewer.find('.viewer-list'); $title.addClass(!options.title ? CLASS_HIDE : getResponsiveClass(options.title)); $toolbar.addClass(!options.toolbar ? CLASS_HIDE : getResponsiveClass(options.toolbar));
$toolbar.find('li[class*=zoom]').toggleClass(CLASS_INVISIBLE, !options.zoomable);
$toolbar.find('li[class*=flip]').toggleClass(CLASS_INVISIBLE, !options.scalable); if (!options.rotatable) {
$toolbar.find('li[class*=rotate]').addClass(CLASS_INVISIBLE).appendTo($toolbar);
} $navbar.addClass(!options.navbar ? CLASS_HIDE : getResponsiveClass(options.navbar));
$button.toggleClass(CLASS_HIDE, !options.button); if (options.inline) {
$button.addClass(CLASS_FULLSCREEN);
$viewer.css('z-index', options.zIndexInline); if ($parent.css('position') === 'static') {
$parent.css('position', 'relative');
}
} else {
$button.addClass(CLASS_CLOSE);
$viewer.
css('z-index', options.zIndex).
addClass([CLASS_FIXED, CLASS_FADE, CLASS_HIDE].join(' '));
} $this.after($viewer); if (options.inline) {
this.render();
this.bind();
this.isShown = true;
} this.isBuilt = true; if ($.isFunction(options.built)) {
$this.one(EVENT_BUILT, options.built);
} this.trigger(EVENT_BUILT);
}, unbuild: function () {
if (!this.isBuilt) {
return;
} this.isBuilt = false;
this.$viewer.remove();
}, bind: function () {
var options = this.options;
var $this = this.$element; if ($.isFunction(options.view)) {
$this.on(EVENT_VIEW, options.view);
} if ($.isFunction(options.viewed)) {
$this.on(EVENT_VIEWED, options.viewed);
} this.$viewer.
on(EVENT_CLICK, $.proxy(this.click, this)).
on(EVENT_WHEEL, $.proxy(this.wheel, this)); this.$canvas.on(EVENT_MOUSEDOWN, $.proxy(this.mousedown, this)); $document.
on(EVENT_MOUSEMOVE, (this._mousemove = proxy(this.mousemove, this))).
on(EVENT_MOUSEUP, (this._mouseup = proxy(this.mouseup, this))).
on(EVENT_KEYDOWN, (this._keydown = proxy(this.keydown, this))); $window.on(EVENT_RESIZE, (this._resize = proxy(this.resize, this)));
}, unbind: function () {
var options = this.options;
var $this = this.$element; if ($.isFunction(options.view)) {
$this.off(EVENT_VIEW, options.view);
} if ($.isFunction(options.viewed)) {
$this.off(EVENT_VIEWED, options.viewed);
} this.$viewer.
off(EVENT_CLICK, this.click).
off(EVENT_WHEEL, this.wheel); this.$canvas.off(EVENT_MOUSEDOWN, this.mousedown); $document.
off(EVENT_MOUSEMOVE, this._mousemove).
off(EVENT_MOUSEUP, this._mouseup).
off(EVENT_KEYDOWN, this._keydown); $window.off(EVENT_RESIZE, this._resize);
}, render: function () {
this.initContainer();
this.initViewer();
this.initList();
this.renderViewer();
}, initContainer: function () {
this.container = {
width: $window.innerWidth(),
height: $window.innerHeight()
};
}, initViewer: function () {
var options = this.options;
var $parent = this.$parent;
var viewer; if (options.inline) {
this.parent = viewer = {
width: max($parent.width(), options.minWidth),
height: max($parent.height(), options.minHeight)
};
} if (this.isFulled || !viewer) {
viewer = this.container;
} this.viewer = $.extend({}, viewer);
}, renderViewer: function () {
if (this.options.inline && !this.isFulled) {
this.$viewer.css(this.viewer);
}
}, initList: function () {
var options = this.options;
var $this = this.$element;
var $list = this.$list;
var list = []; this.$images.each(function (i) {
var src = this.src;
var alt = this.alt || getImageName(src);
var url = options.url; if (!src) {
return;
} if (isString(url)) {
url = this.getAttribute(url);
} else if ($.isFunction(url)) {
url = url.call(this, this);
} list.push(
'<li>' +
'<img' +
' src="' + src + '"' +
' data-action="view"' +
' data-index="' + i + '"' +
' data-original-url="' + (url || src) + '"' +
' alt="' + alt + '"' +
'>' +
'</li>'
);
}); $list.html(list.join('')).find(SELECTOR_IMG).one(EVENT_LOAD, {
filled: true
}, $.proxy(this.loadImage, this)); this.$items = $list.children(); if (options.transition) {
$this.one(EVENT_VIEWED, function () {
$list.addClass(CLASS_TRANSITION);
});
}
}, renderList: function (index) {
var i = index || this.index;
var width = this.$items.eq(i).width();
var outerWidth = width + 1; // 1 pixel of `margin-left` width // Place the active item in the center of the screen
this.$list.css({
width: outerWidth * this.length,
marginLeft: (this.viewer.width - width) / 2 - outerWidth * i
});
}, resetList: function () {
this.$list.empty().removeClass(CLASS_TRANSITION).css('margin-left', 0);
}, initImage: function (callback) {
var options = this.options;
var $image = this.$image;
var viewer = this.viewer;
var footerHeight = this.$footer.height();
var viewerWidth = viewer.width;
var viewerHeight = max(viewer.height - footerHeight, footerHeight);
var oldImage = this.image || {}; getImageSize($image[0], $.proxy(function (naturalWidth, naturalHeight) {
var aspectRatio = naturalWidth / naturalHeight;
var width = viewerWidth;
var height = viewerHeight;
var initialImage;
var image; if (viewerHeight * aspectRatio > viewerWidth) {
height = viewerWidth / aspectRatio;
} else {
width = viewerHeight * aspectRatio;
} width = min(width * 0.9, naturalWidth);
height = min(height * 0.9, naturalHeight); image = {
naturalWidth: naturalWidth,
naturalHeight: naturalHeight,
aspectRatio: aspectRatio,
ratio: width / naturalWidth,
width: width,
height: height,
left: (viewerWidth - width) / 2,
top: (viewerHeight - height) / 2
}; initialImage = $.extend({}, image); if (options.rotatable) {
image.rotate = oldImage.rotate || 0;
initialImage.rotate = 0;
} if (options.scalable) {
image.scaleX = oldImage.scaleX || 1;
image.scaleY = oldImage.scaleY || 1;
initialImage.scaleX = 1;
initialImage.scaleY = 1;
} this.image = image;
this.initialImage = initialImage; if ($.isFunction(callback)) {
callback();
}
}, this));
}, renderImage: function (callback) {
var image = this.image;
var $image = this.$image; $image.css({
width: image.width,
height: image.height,
marginLeft: image.left,
marginTop: image.top,
transform: getTransform(image)
}); if ($.isFunction(callback)) {
if (this.transitioning) {
$image.one(EVENT_TRANSITIONEND, callback);
} else {
callback();
}
}
}, resetImage: function () {
if (this.$image) {
this.$image.remove();
this.$image = null;
}
}, start: function (e) {
var target = e.target; if ($(target).is('img')) {
this.target = target;
this.show();
}
}, click: function (e) {
var $target = $(e.target);
var action = $target.data('action');
var image = this.image; switch (action) {
case 'mix':
if (this.isPlayed) {
this.stop();
} else {
if (this.options.inline) {
if (this.isFulled) {
this.exit();
} else {
this.full();
}
} else {
this.hide();
}
} break; case 'view':
this.view($target.data('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(-image.scaleX || -1);
break; case 'flip-vertical':
this.scaleY(-image.scaleY || -1);
break; default:
if (this.isPlayed) {
this.stop();
}
}
}, load: function () {
var options = this.options;
var viewer = this.viewer;
var $image = this.$image; if (this.timeout) {
clearTimeout(this.timeout);
this.timeout = false;
} $image.removeClass(CLASS_INVISIBLE).css('cssText', (
'width:0;' +
'height:0;' +
'margin-left:' + viewer.width / 2 + 'px;' +
'margin-top:' + viewer.height / 2 + 'px;' +
'max-width:none!important;' +
'visibility:visible;'
)); this.initImage($.proxy(function () {
$image.
toggleClass(CLASS_TRANSITION, options.transition).
toggleClass(CLASS_MOVE, options.movable); this.renderImage($.proxy(function () {
this.isViewed = true;
this.trigger(EVENT_VIEWED);
}, this));
}, this));
}, loadImage: function (e) {
var image = e.target;
var $image = $(image);
var $parent = $image.parent();
var parentWidth = $parent.width();
var parentHeight = $parent.height();
var filled = e.data && e.data.filled; getImageSize(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;
}
} $image.css({
width: width,
height: height,
marginLeft: (parentWidth - width) / 2,
marginTop: (parentHeight - height) / 2
});
});
}, resize: function () {
this.initContainer();
this.initViewer();
this.renderViewer();
this.renderList(); if (this.isViewed) {
this.initImage($.proxy(function () {
this.renderImage();
}, this));
} if (this.isPlayed) {
this.$player.
find(SELECTOR_IMG).
one(EVENT_LOAD, $.proxy(this.loadImage, this)).
trigger(EVENT_LOAD);
}
}, wheel: function (event) {
var e = event.originalEvent || event;
var ratio = num(this.options.zoomRatio) || 0.1;
var delta = 1; if (!this.isViewed) {
return;
} event.preventDefault(); // Limit wheel speed to prevent zoom too fast
if (this.wheeling) {
return;
} this.wheeling = true; setTimeout($.proxy(function () {
this.wheeling = false;
}, this), 50); 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, event);
}, keydown: function (e) {
var options = this.options;
var which = e.which; if (!this.isFulled || !options.keyboard) {
return;
} switch (which) { // (Key: Esc)
case 27:
if (this.isPlayed) {
this.stop();
} else {
if (options.inline) {
if (this.isFulled) {
this.exit();
}
} else {
this.hide();
}
} break; // (Key: Space)
case 32:
if (this.isPlayed) {
this.stop();
} break; // View previous (Key: ←)
case 37:
this.prev();
break; // Zoom in (Key: ↑)
case 38: // Prevent scroll on Firefox
e.preventDefault(); this.zoom(options.zoomRatio, true);
break; // View next (Key: →)
case 39:
this.next();
break; // Zoom out (Key: ↓)
case 40: // Prevent scroll on Firefox
e.preventDefault(); this.zoom(-options.zoomRatio, true);
break; // Zoom out to initial size (Key: Ctrl + 0)
case 48:
// Go to next // Zoom in to natural size (Key: Ctrl + 1)
case 49:
if (e.ctrlKey || e.shiftKey) {
e.preventDefault();
this.toggle();
} break; // No default
}
}, mousedown: function (event) {
var options = this.options;
var originalEvent = event.originalEvent;
var touches = originalEvent && originalEvent.touches;
var e = event;
var action = options.movable ? 'move' : false;
var touchesLength; if (!this.isViewed) {
return;
} if (touches) {
touchesLength = touches.length; if (touchesLength > 1) {
if (options.zoomable && touchesLength === 2) {
e = touches[1];
this.startX2 = e.pageX;
this.startY2 = e.pageY;
action = 'zoom';
} else {
return;
}
} else {
if (this.isSwitchable()) {
action = 'switch';
}
} e = touches[0];
} if (action) {
event.preventDefault();
this.action = action; // IE8 has `event.pageX/Y`, but not `event.originalEvent.pageX/Y`
// IE10 has `event.originalEvent.pageX/Y`, but not `event.pageX/Y`
this.startX = e.pageX || originalEvent && originalEvent.pageX;
this.startY = e.pageY || originalEvent && originalEvent.pageY;
}
}, mousemove: function (event) {
var options = this.options;
var action = this.action;
var $image = this.$image;
var originalEvent = event.originalEvent;
var touches = originalEvent && originalEvent.touches;
var e = event;
var touchesLength; if (!this.isViewed) {
return;
} if (touches) {
touchesLength = touches.length; if (touchesLength > 1) {
if (options.zoomable && touchesLength === 2) {
e = touches[1];
this.endX2 = e.pageX;
this.endY2 = e.pageY;
} else {
return;
}
} e = touches[0];
} if (action) {
event.preventDefault(); if (action === 'move' && options.transition && $image.hasClass(CLASS_TRANSITION)) {
$image.removeClass(CLASS_TRANSITION);
} this.endX = e.pageX || originalEvent && originalEvent.pageX;
this.endY = e.pageY || originalEvent && originalEvent.pageY; this.change(event);
}
}, mouseup: function (event) {
var action = this.action; if (action) {
event.preventDefault(); if (action === 'move' && this.options.transition) {
this.$image.addClass(CLASS_TRANSITION);
} this.action = false;
}
}, // Show the viewer (only available in modal mode)
show: function () {
var options = this.options;
var $viewer; if (options.inline || this.transitioning) {
return;
} if (!this.isBuilt) {
this.build();
} if ($.isFunction(options.show)) {
this.$element.one(EVENT_SHOW, options.show);
} if (this.trigger(EVENT_SHOW).isDefaultPrevented()) {
return;
} this.$body.addClass(CLASS_OPEN);
$viewer = this.$viewer.removeClass(CLASS_HIDE); this.$element.one(EVENT_SHOWN, $.proxy(function () {
this.view(this.target ? this.$images.index(this.target) : this.index);
this.target = false;
}, this)); if (options.transition) {
this.transitioning = true;
$viewer.addClass(CLASS_TRANSITION);
forceReflow($viewer[0]);
$viewer.one(EVENT_TRANSITIONEND, $.proxy(this.shown, this)).addClass(CLASS_IN);
} else {
$viewer.addClass(CLASS_IN);
this.shown();
}
}, // Hide the viewer (only available in modal mode)
hide: function () {
var options = this.options;
var $viewer = this.$viewer; if (options.inline || this.transitioning || !this.isShown) {
return;
} if ($.isFunction(options.hide)) {
this.$element.one(EVENT_HIDE, options.hide);
} if (this.trigger(EVENT_HIDE).isDefaultPrevented()) {
return;
} if (this.isViewed && options.transition) {
this.transitioning = true;
this.$image.one(EVENT_TRANSITIONEND, $.proxy(function () {
$viewer.one(EVENT_TRANSITIONEND, $.proxy(this.hidden, this)).removeClass(CLASS_IN);
}, this));
this.zoomTo(0, false, false, true);
} else {
$viewer.removeClass(CLASS_IN);
this.hidden();
}
}, /**
* View one of the images with image's index
*
* @param {Number} index
*/
view: function (index) {
var $title = this.$title;
var $image;
var $item;
var $img;
var url;
var alt; index = Number(index) || 0; if (!this.isShown || this.isPlayed || index < 0 || index >= this.length ||
this.isViewed && index === this.index) {
return;
} if (this.trigger(EVENT_VIEW).isDefaultPrevented()) {
return;
} $item = this.$items.eq(index);
$img = $item.find(SELECTOR_IMG);
url = $img.data('originalUrl');
alt = $img.attr('alt'); this.$image = $image = $('<img src="' + url + '" alt="' + alt + '">'); if (this.isViewed) {
this.$items.eq(this.index).removeClass(CLASS_ACTIVE);
} $item.addClass(CLASS_ACTIVE); this.isViewed = false;
this.index = index;
this.image = null;
this.$canvas.html($image.addClass(CLASS_INVISIBLE)); // Center current item
this.renderList(); // Clear title
$title.empty(); // Generate title after viewed
this.$element.one(EVENT_VIEWED, $.proxy(function () {
var image = this.image;
var width = image.naturalWidth;
var height = image.naturalHeight; $title.html(alt + ' (' + width + ' × ' + height + ')');
}, this)); if ($image[0].complete) {
this.load();
} else {
$image.one(EVENT_LOAD, $.proxy(this.load, this)); if (this.timeout) {
clearTimeout(this.timeout);
} // Make the image visible if it fails to load within 1s
this.timeout = setTimeout($.proxy(function () {
$image.removeClass(CLASS_INVISIBLE);
this.timeout = false;
}, this), 1000);
}
}, // View the previous image
prev: function () {
this.view(max(this.index - 1, 0));
}, // View the next image
next: function () {
this.view(min(this.index + 1, this.length - 1));
}, /**
* Move the image with relative offsets
*
* @param {Number} offsetX
* @param {Number} offsetY (optional)
*/
move: function (offsetX, offsetY) {
var image = this.image; this.moveTo(
isUndefined(offsetX) ? offsetX : image.left + num(offsetX),
isUndefined(offsetY) ? offsetY : image.top + num(offsetY)
);
}, /**
* Move the image to an absolute point
*
* @param {Number} x
* @param {Number} y (optional)
*/
moveTo: function (x, y) {
var image = this.image;
var changed = false; // If "y" is not present, its default value is "x"
if (isUndefined(y)) {
y = x;
} x = num(x);
y = num(y); if (this.isViewed && !this.isPlayed && this.options.movable) {
if (isNumber(x)) {
image.left = x;
changed = true;
} if (isNumber(y)) {
image.top = y;
changed = true;
} if (changed) {
this.renderImage();
}
}
}, /**
* Zoom the image with a relative ratio
*
* @param {Number} ratio
* @param {Boolean} hasTooltip (optional)
* @param {jQuery Event} _event (private)
*/
zoom: function (ratio, hasTooltip, _event) {
var image = this.image; ratio = num(ratio); if (ratio < 0) {
ratio = 1 / (1 - ratio);
} else {
ratio = 1 + ratio;
} this.zoomTo(image.width * ratio / image.naturalWidth, hasTooltip, _event);
}, /**
* Zoom the image to an absolute ratio
*
* @param {Number} ratio
* @param {Boolean} hasTooltip (optional)
* @param {jQuery Event} _event (private)
* @param {Boolean} _zoomable (private)
*/
zoomTo: function (ratio, hasTooltip, _event, _zoomable) {
var options = this.options;
var minZoomRatio = 0.01;
var maxZoomRatio = 100;
var image = this.image;
var width = image.width;
var height = image.height;
var originalEvent;
var newWidth;
var newHeight;
var offset;
var center; ratio = max(0, ratio); if (isNumber(ratio) && this.isViewed && !this.isPlayed && (_zoomable || options.zoomable)) {
if (!_zoomable) {
minZoomRatio = max(minZoomRatio, options.minZoomRatio);
maxZoomRatio = min(maxZoomRatio, options.maxZoomRatio);
ratio = min(max(ratio, minZoomRatio), maxZoomRatio);
} if (ratio > 0.95 && ratio < 1.05) {
ratio = 1;
} newWidth = image.naturalWidth * ratio;
newHeight = image.naturalHeight * ratio; if (_event && (originalEvent = _event.originalEvent)) {
offset = this.$viewer.offset();
center = originalEvent.touches ? getTouchesCenter(originalEvent.touches) : {
pageX: _event.pageX || originalEvent.pageX || 0,
pageY: _event.pageY || originalEvent.pageY || 0
}; // Zoom from the triggering point of the event
image.left -= (newWidth - width) * (
((center.pageX - offset.left) - image.left) / width
);
image.top -= (newHeight - height) * (
((center.pageY - offset.top) - image.top) / height
);
} else { // Zoom from the center of the image
image.left -= (newWidth - width) / 2;
image.top -= (newHeight - height) / 2;
} image.width = newWidth;
image.height = newHeight;
image.ratio = ratio;
this.renderImage(); if (hasTooltip) {
this.tooltip();
}
}
}, /**
* Rotate the image with a relative degree
*
* @param {Number} degree
*/
rotate: function (degree) {
this.rotateTo((this.image.rotate || 0) + num(degree));
}, /**
* Rotate the image to an absolute degree
* https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#rotate()
*
* @param {Number} degree
*/
rotateTo: function (degree) {
var image = this.image; degree = num(degree); if (isNumber(degree) && this.isViewed && !this.isPlayed && this.options.rotatable) {
image.rotate = degree;
this.renderImage();
}
}, /**
* Scale the image
* https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#scale()
*
* @param {Number} scaleX
* @param {Number} scaleY (optional)
*/
scale: function (scaleX, scaleY) {
var image = this.image;
var changed = false; // If "scaleY" is not present, its default value is "scaleX"
if (isUndefined(scaleY)) {
scaleY = scaleX;
} scaleX = num(scaleX);
scaleY = num(scaleY); if (this.isViewed && !this.isPlayed && this.options.scalable) {
if (isNumber(scaleX)) {
image.scaleX = scaleX;
changed = true;
} if (isNumber(scaleY)) {
image.scaleY = scaleY;
changed = true;
} if (changed) {
this.renderImage();
}
}
}, /**
* Scale the abscissa of the image
*
* @param {Number} scaleX
*/
scaleX: function (scaleX) {
this.scale(scaleX, this.image.scaleY);
}, /**
* Scale the ordinate of the image
*
* @param {Number} scaleY
*/
scaleY: function (scaleY) {
this.scale(this.image.scaleX, scaleY);
}, // Play the images
play: function () {
var options = this.options;
var $player = this.$player;
var load = $.proxy(this.loadImage, this);
var list = [];
var total = 0;
var index = 0;
var playing; if (!this.isShown || this.isPlayed) {
return;
} if (options.fullscreen) {
this.requestFullscreen();
} this.isPlayed = true;
$player.addClass(CLASS_SHOW); this.$items.each(function (i) {
var $this = $(this);
var $img = $this.find(SELECTOR_IMG);
var $image = $('<img src="' + $img.data('originalUrl') + '" alt="' + $img.attr('alt') + '">'); total++; $image.addClass(CLASS_FADE).toggleClass(CLASS_TRANSITION, options.transition); if ($this.hasClass(CLASS_ACTIVE)) {
$image.addClass(CLASS_IN);
index = i;
} list.push($image);
$image.one(EVENT_LOAD, {
filled: false
}, load);
$player.append($image);
}); if (isNumber(options.interval) && options.interval > 0) {
playing = $.proxy(function () {
this.playing = setTimeout(function () {
list[index].removeClass(CLASS_IN);
index++;
index = index < total ? index : 0;
list[index].addClass(CLASS_IN); playing();
}, options.interval);
}, this); if (total > 1) {
playing();
}
}
}, // Stop play
stop: function () {
if (!this.isPlayed) {
return;
} if (this.options.fullscreen) {
this.exitFullscreen();
} this.isPlayed = false;
clearTimeout(this.playing);
this.$player.removeClass(CLASS_SHOW).empty();
}, // Enter modal mode (only available in inline mode)
full: function () {
var options = this.options;
var $image = this.$image;
var $list = this.$list; if (!this.isShown || this.isPlayed || this.isFulled || !options.inline) {
return;
} this.isFulled = true;
this.$body.addClass(CLASS_OPEN);
this.$button.addClass(CLASS_FULLSCREEN_EXIT); if (options.transition) {
$image.removeClass(CLASS_TRANSITION);
$list.removeClass(CLASS_TRANSITION);
} this.$viewer.addClass(CLASS_FIXED).removeAttr('style').css('z-index', options.zIndex);
this.initContainer();
this.viewer = $.extend({}, this.container);
this.renderList();
this.initImage($.proxy(function () {
this.renderImage(function () {
if (options.transition) {
setTimeout(function () {
$image.addClass(CLASS_TRANSITION);
$list.addClass(CLASS_TRANSITION);
}, 0);
}
});
}, this));
}, // Exit modal mode (only available in inline mode)
exit: function () {
var options = this.options;
var $image = this.$image;
var $list = this.$list; if (!this.isFulled) {
return;
} this.isFulled = false;
this.$body.removeClass(CLASS_OPEN);
this.$button.removeClass(CLASS_FULLSCREEN_EXIT); if (options.transition) {
$image.removeClass(CLASS_TRANSITION);
$list.removeClass(CLASS_TRANSITION);
} this.$viewer.removeClass(CLASS_FIXED).css('z-index', options.zIndexInline);
this.viewer = $.extend({}, this.parent);
this.renderViewer();
this.renderList();
this.initImage($.proxy(function () {
this.renderImage(function () {
if (options.transition) {
setTimeout(function () {
$image.addClass(CLASS_TRANSITION);
$list.addClass(CLASS_TRANSITION);
}, 0);
}
});
}, this));
}, // Show the current ratio of the image with percentage
tooltip: function () {
var options = this.options;
var $tooltip = this.$tooltip;
var image = this.image;
var classes = [
CLASS_SHOW,
CLASS_FADE,
CLASS_TRANSITION
].join(' '); if (!this.isViewed || this.isPlayed || !options.tooltip) {
return;
} $tooltip.text(round(image.ratio * 100) + '%'); if (!this.tooltiping) {
if (options.transition) {
if (this.fading) {
$tooltip.trigger(EVENT_TRANSITIONEND);
} $tooltip.addClass(classes);
forceReflow($tooltip[0]);
$tooltip.addClass(CLASS_IN);
} else {
$tooltip.addClass(CLASS_SHOW);
}
} else {
clearTimeout(this.tooltiping);
} this.tooltiping = setTimeout($.proxy(function () {
if (options.transition) {
$tooltip.one(EVENT_TRANSITIONEND, $.proxy(function () {
$tooltip.removeClass(classes);
this.fading = false;
}, this)).removeClass(CLASS_IN); this.fading = true;
} else {
$tooltip.removeClass(CLASS_SHOW);
} this.tooltiping = false;
}, this), 1000);
}, // Toggle the image size between its natural size and initial size
toggle: function () {
if (this.image.ratio === 1) {
this.zoomTo(this.initialImage.ratio, true);
} else {
this.zoomTo(1, true);
}
}, // Reset the image to its initial state
reset: function () {
if (this.isViewed && !this.isPlayed) {
this.image = $.extend({}, this.initialImage);
this.renderImage();
}
}, // Update viewer when images changed
update: function () {
var $this = this.$element;
var $images = this.$images;
var indexes = [];
var index; if (this.isImg) { // Destroy viewer if the target image was deleted
if (!$this.parent().length) {
return this.destroy();
}
} else {
this.$images = $images = $this.find(SELECTOR_IMG);
this.length = $images.length;
} if (this.isBuilt) {
$.each(this.$items, function (i) {
var img = $(this).find('img')[0];
var image = $images[i]; if (image) {
if (image.src !== img.src) {
indexes.push(i);
}
} else {
indexes.push(i);
}
}); this.$list.width('auto');
this.initList(); if (this.isShown) {
if (this.length) {
if (this.isViewed) {
index = $.inArray(this.index, indexes); if (index >= 0) {
this.isViewed = false;
this.view(max(this.index - (index + 1), 0));
} else {
this.$items.eq(this.index).addClass(CLASS_ACTIVE);
}
}
} else {
this.$image = null;
this.isViewed = false;
this.index = 0;
this.image = null;
this.$canvas.empty();
this.$title.empty();
}
}
}
}, // Destroy the viewer
destroy: function () {
var $this = this.$element; if (this.options.inline) {
this.unbind();
} else {
if (this.isShown) {
this.unbind();
} $this.off(EVENT_CLICK, this.start);
} this.unbuild();
$this.removeData(NAMESPACE);
}, // A shortcut for triggering custom events
trigger: function (type, data) {
var e = $.Event(type, data); this.$element.trigger(e); return e;
}, shown: function () {
var options = this.options; this.transitioning = false;
this.isFulled = true;
this.isShown = true;
this.isVisible = true;
this.render();
this.bind(); if ($.isFunction(options.shown)) {
this.$element.one(EVENT_SHOWN, options.shown);
} this.trigger(EVENT_SHOWN);
}, hidden: function () {
var options = this.options; this.transitioning = false;
this.isViewed = false;
this.isFulled = false;
this.isShown = false;
this.isVisible = false;
this.unbind();
this.$body.removeClass(CLASS_OPEN);
this.$viewer.addClass(CLASS_HIDE);
this.resetList();
this.resetImage(); if ($.isFunction(options.hidden)) {
this.$element.one(EVENT_HIDDEN, options.hidden);
} this.trigger(EVENT_HIDDEN);
}, requestFullscreen: function () {
var documentElement = document.documentElement; if (this.isFulled && !document.fullscreenElement && !document.mozFullScreenElement &&
!document.webkitFullscreenElement && !document.msFullscreenElement) { 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 () {
if (this.isFulled) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}, change: function (event) {
var offsetX = this.endX - this.startX;
var offsetY = this.endY - this.startY; switch (this.action) { // Move the current image
case 'move':
this.move(offsetX, offsetY);
break; // Zoom the current image
case 'zoom':
this.zoom(function (x1, y1, x2, y2) {
var z1 = sqrt(x1 * x1 + y1 * y1);
var z2 = sqrt(x2 * x2 + y2 * y2); return (z2 - z1) / z1;
}(
abs(this.startX - this.startX2),
abs(this.startY - this.startY2),
abs(this.endX - this.endX2),
abs(this.endY - this.endY2)
), false, event); this.startX2 = this.endX2;
this.startY2 = this.endY2;
break; case 'switch':
this.action = 'switched'; if (abs(offsetX) > abs(offsetY)) {
if (offsetX > 1) {
this.prev();
} else if (offsetX < -1) {
this.next();
}
} break; // No default
} // Override
this.startX = this.endX;
this.startY = this.endY;
}, isSwitchable: function () {
var image = this.image;
var viewer = this.viewer; return (image.left >= 0 && image.top >= 0 && image.width <= viewer.width &&
image.height <= viewer.height);
}
}; Viewer.DEFAULTS = {
// Enable inline mode
inline: false, // Show the button on the top-right of the viewer
button: true, // Show the navbar
navbar: true, // Show the title
title: true, // Show the toolbar
toolbar: true, // Show the tooltip with image ratio (percentage) when zoom in or zoom out
tooltip: true, // Enable to move the image
movable: true, // Enable to zoom the image
zoomable: true, // Enable to rotate the image
rotatable: true, // Enable to scale the image
scalable: true, // Enable CSS3 Transition for some special elements
transition: true, // Enable to request fullscreen when play
fullscreen: true, // Enable keyboard support
keyboard: true, // Define interval of each image when playing
interval: 5000, // Min width of the viewer in inline mode
minWidth: 200, // Min height of the viewer in inline mode
minHeight: 100, // Define the ratio when zoom the image by wheeling mouse
zoomRatio: 0.1, // Define the min ratio of the image when zoom out
minZoomRatio: 0.01, // Define the max ratio of the image when zoom in
maxZoomRatio: 100, // Define the CSS `z-index` value of viewer in modal mode.
zIndex: 2015, // Define the CSS `z-index` value of viewer in inline mode.
zIndexInline: 0, // Define where to get the original image URL for viewing
// Type: String (an image attribute) or Function (should return an image URL)
url: 'src', // Event shortcuts
build: null,
built: null,
show: null,
shown: null,
hide: null,
hidden: null,
view: null,
viewed: null
}; Viewer.setDefaults = function (options) {
$.extend(Viewer.DEFAULTS, options);
}; Viewer.TEMPLATE = (
'<div class="viewer-container">' +
'<div class="viewer-canvas"></div>' +
'<div class="viewer-footer">' +
'<div class="viewer-title"></div>' +
'<ul class="viewer-toolbar">' +
'<li class="viewer-zoom-in" data-action="zoom-in"></li>' +
'<li class="viewer-zoom-out" data-action="zoom-out"></li>' +
'<li class="viewer-one-to-one" data-action="one-to-one"></li>' +
'<li class="viewer-reset" data-action="reset"></li>' +
'<li class="viewer-prev" data-action="prev"></li>' +
'<li class="viewer-play" data-action="play"></li>' +
'<li class="viewer-next" data-action="next"></li>' +
'<li class="viewer-rotate-left" data-action="rotate-left"></li>' +
'<li class="viewer-rotate-right" data-action="rotate-right"></li>' +
'<li class="viewer-flip-horizontal" data-action="flip-horizontal"></li>' +
'<li 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 class="viewer-button" data-action="mix"></div>' +
'<div class="viewer-player"></div>' +
'</div>'
); // Save the other viewer
Viewer.other = $.fn.viewer; // Register as jQuery plugin
$.fn.viewer = function (options) {
var args = toArray(arguments, 1);
var result; this.each(function () {
var $this = $(this);
var data = $this.data(NAMESPACE);
var fn; if (!data) {
if (/destroy|hide|exit|stop|reset/.test(options)) {
return;
} $this.data(NAMESPACE, (data = new Viewer(this, options)));
} if (isString(options) && $.isFunction(fn = data[options])) {
result = fn.apply(data, args);
}
}); return isUndefined(result) ? this : result;
}; $.fn.viewer.Constructor = Viewer;
$.fn.viewer.setDefaults = Viewer.setDefaults; // No conflict
$.fn.viewer.noConflict = function () {
$.fn.viewer = Viewer.other;
return this;
}; });
viewer.js未压缩版
1、在属性data-original中存放显示弹框后的图片路径，alt中的文字将作为图片的标题，显示在弹框中图片的下方
2、兼容到IE8，但是低版本浏览器中无法旋转
