├── img ├── imlogo.png ├── tibet-1.jpg ├── tibet-2.jpg ├── tibet-3.jpg ├── tibet-4.jpg ├── tibet-5.jpg ├── tibet-6.jpg ├── tibet-7.jpg ├── tibet-8.jpg ├── tibet-9.jpg ├── lineartop.png ├── sketch_01.jpg ├── sketch_02.jpg ├── sketch_03.jpg └── sketch_04.jpg ├── js ├── common.js ├── viewer-jquery.min.js └── viewer.min.js ├── css ├── mobie.css ├── style.css ├── reset.css └── viewer.min.css ├── index_pc.html ├── index_mobile.html └── README.md /img/imlogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/godShira/Viewerjs/HEAD/img/imlogo.png -------------------------------------------------------------------------------- /img/tibet-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/godShira/Viewerjs/HEAD/img/tibet-1.jpg -------------------------------------------------------------------------------- /img/tibet-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/godShira/Viewerjs/HEAD/img/tibet-2.jpg -------------------------------------------------------------------------------- /img/tibet-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/godShira/Viewerjs/HEAD/img/tibet-3.jpg -------------------------------------------------------------------------------- /img/tibet-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/godShira/Viewerjs/HEAD/img/tibet-4.jpg -------------------------------------------------------------------------------- /img/tibet-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/godShira/Viewerjs/HEAD/img/tibet-5.jpg -------------------------------------------------------------------------------- /img/tibet-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/godShira/Viewerjs/HEAD/img/tibet-6.jpg -------------------------------------------------------------------------------- /img/tibet-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/godShira/Viewerjs/HEAD/img/tibet-7.jpg -------------------------------------------------------------------------------- /img/tibet-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/godShira/Viewerjs/HEAD/img/tibet-8.jpg -------------------------------------------------------------------------------- /img/tibet-9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/godShira/Viewerjs/HEAD/img/tibet-9.jpg -------------------------------------------------------------------------------- /img/lineartop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/godShira/Viewerjs/HEAD/img/lineartop.png -------------------------------------------------------------------------------- /img/sketch_01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/godShira/Viewerjs/HEAD/img/sketch_01.jpg -------------------------------------------------------------------------------- /img/sketch_02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/godShira/Viewerjs/HEAD/img/sketch_02.jpg -------------------------------------------------------------------------------- /img/sketch_03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/godShira/Viewerjs/HEAD/img/sketch_03.jpg -------------------------------------------------------------------------------- /img/sketch_04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/godShira/Viewerjs/HEAD/img/sketch_04.jpg -------------------------------------------------------------------------------- /js/common.js: -------------------------------------------------------------------------------- 1 | window.onload=function(){ 2 | rootsize(); 3 | }; 4 | //当浏览器窗口大小改变时，设置根字号 5 | window.onresize=function(){ 6 | rootsize(); 7 | }; 8 | //cal兼容Google浏览器的写法 9 | function rootsize(){ 10 | var deviceWidth = document.documentElement.clientWidth;//获取页面可见宽度 11 | if(deviceWidth > 750) deviceWidth = 750; 12 | document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px'; 13 | } 14 | -------------------------------------------------------------------------------- /css/mobie.css: -------------------------------------------------------------------------------- 1 | /*float高度塌陷清除*/ 2 | .clearfix:after { 3 | display: block; 4 | height: 0; 5 | content: ''; 6 | clear: both; 7 | } 8 | 9 | /*marginTop生效*/ 10 | .befo:before, .afte:after { 11 | content: ''; 12 | display: table; 13 | } 14 | 15 | html{font-size:-webkit-calc(100vw/7.5);font-size:calc(100vw/7.5);} 16 | .wrap{max-width: 750px;margin:0 auto;} 17 | body{ background: #f6f6f6; } 18 | .title{ 19 | border-top: 1px solid #e5e5e5; 20 | border-bottom: 1px solid #e5e5e5; 21 | height: 0.88rem; 22 | line-height: 0.88rem; 23 | text-align: center; 24 | font-size: 0.34rem; 25 | color: #656565; 26 | background: #ffffff; 27 | } 28 | .main{ 29 | padding: 0.25rem; 30 | margin-top: 0.3rem; 31 | } 32 | .images .item { 33 | position: relative; 34 | float: left; 35 | width: 33.3333%; 36 | padding: 0; 37 | margin: 0; 38 | border-width: 0 0 2px 2px; 39 | border-style: solid; 40 | border-color: transparent; 41 | -webkit-box-sizing: border-box; 42 | -moz-box-sizing: border-box; 43 | box-sizing: border-box; 44 | } 45 | .images .item img{ 46 | width: 2.4rem; 47 | height: 2.4rem; 48 | } -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | .topbar { 2 | position: absolute; 3 | left: 0; 4 | top: 0; 5 | width: 100%; 6 | height: 150px; 7 | background: transparent url(../img/lineartop.png) repeat-x center top; 8 | z-index: 900; 9 | } 10 | .toppic { 11 | max-width: 1170px; 12 | min-width: 980px; 13 | width: 80%; 14 | height: 75px; 15 | margin: 0 auto; 16 | } 17 | .logoLink { 18 | float: left; 19 | display: block; 20 | width: 125px; 21 | height: 0px; 22 | overflow: hidden; 23 | padding-top: 76px; 24 | font-size: 0; 25 | background: transparent url(../img/imlogo.png) no-repeat left 15px; 26 | } 27 | .topNav { 28 | float: left; 29 | width: 450px; 30 | padding-left: 18px; 31 | } 32 | .topNav li{ 33 | float: left; 34 | margin-left: 20px; 35 | padding: 0 20px; 36 | font: 18px/75px "微软雅黑"; 37 | color: #fff; 38 | } 39 | .images{ 40 | width: 725px; 41 | height: 735px; 42 | overflow: hidden; 43 | margin: 0 auto; 44 | font-size: 0; 45 | } 46 | .images .item { 47 | position: relative; 48 | float: left; 49 | width: 33.3333%; 50 | padding: 0; 51 | margin: 0; 52 | border-width: 0 0 5px 5px; 53 | border-style: solid; 54 | border-color: transparent; 55 | -webkit-box-sizing: border-box; 56 | -moz-box-sizing: border-box; 57 | box-sizing: border-box; 58 | } 59 | .images .item img{ 60 | display: block; 61 | width: 240px; 62 | height: 240px; 63 | } 64 | .main { 65 | max-width: 1170px; 66 | min-width: 980px; 67 | width: 80%; 68 | margin: 150px auto; 69 | } 70 | .viewer-toolbar { 71 | margin: 0 auto 45px; 72 | } -------------------------------------------------------------------------------- /index_pc.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | jQuery图片查看器viewer.js 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 | 图片查看器logo 18 |
    19 |
  • jQuery版本
    • 20 |
  • 图片查看器
    • 21 |
22 |
23 |
24 |
25 | 26 | 27 |
28 |
29 | 40 |
41 |
42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /css/reset.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /* reset */ 3 | html, body, div, span, applet, object, iframe, 4 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 5 | a, abbr, acronym, address, big, cite, code, 6 | del, dfn, em, img, ins, kbd, q, s, samp, 7 | small, strike, strong, sub, sup, tt, var, 8 | b, u, i, center, 9 | dl, dt, dd, ol, ul, li, 10 | fieldset, form, label, legend, 11 | table, caption, tbody, tfoot, thead, tr, th, td, 12 | article, aside, canvas, details, embed, 13 | figure, figcaption, footer, header, 14 | menu, nav, output, ruby, section, summary, 15 | time, mark, audio, video { 16 | margin: 0; 17 | padding: 0; 18 | border: 0; 19 | font-size: 100%; 20 | vertical-align: baseline; 21 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*取消链接高亮*/ 22 | } 23 | 24 | /* HTML5 display-role reset for older browsers */ 25 | article, aside, details, figcaption, figure, 26 | footer, header, menu, nav, section { 27 | display: block; 28 | } 29 | 30 | /* ---------- General styles ---------- */ 31 | html { 32 | -webkit-tap-highlight-color: transparent; 33 | -webkit-text-size-adjust: none; /* forbidden iPhone/Safari font size adjust*/ 34 | -ms-text-size-adjust: none; 35 | } 36 | 37 | body { 38 | word-break: break-all; 39 | position: relative; 40 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 41 | -webkit-overflow-scrolling: touch; 42 | } 43 | 44 | ol, ul { 45 | list-style: none; 46 | } 47 | 48 | a { 49 | text-decoration: none; 50 | } 51 | 52 | h1, h2, h3, h4, h5, h6 { 53 | font-size: 100%; 54 | } 55 | 56 | /* img fit*/ 57 | img { 58 | border: none; 59 | display: block; 60 | max-width: 100%; 61 | height: auto; 62 | -ms-interpolation-mode: bicubic; 63 | } 64 | 65 | button, input, textarea { 66 | outline: none; 67 | } 68 | 69 | blockquote, q { 70 | quotes: none; 71 | } 72 | 73 | blockquote:before, blockquote:after, 74 | q:before, q:after { 75 | content: ''; 76 | } 77 | 78 | /* remember to define focus styles! */ 79 | :focus { 80 | outline: 0; 81 | } 82 | 83 | /* remember to highlight inserts somehow! */ 84 | ins { 85 | text-decoration: none; 86 | } 87 | 88 | del { 89 | text-decoration: line-through; 90 | } 91 | 92 | /* tables still need 'cellspacing="0"' in the markup */ 93 | table { 94 | border-collapse: collapse; 95 | border-spacing: 0; 96 | } 97 | 98 | /*float高度塌陷清除*/ 99 | .clearfix:after { 100 | display: block; 101 | height: 0; 102 | content: ''; 103 | clear: both; 104 | } 105 | 106 | /*marginTop生效*/ 107 | .befo:before, .afte:after { 108 | content: ''; 109 | display: table; 110 | } 111 | 112 | /* 去除iPhone中默认的input样式 */ 113 | input[type="submit"], 114 | input[type="reset"], 115 | input[type="button"], 116 | input { 117 | /*-webkit-appearance: none;*/ 118 | resize: none; 119 | } 120 | 121 | 122 | -------------------------------------------------------------------------------- /index_mobile.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | jQuery图片查看器移动端viewer.js 36 | 37 | 38 |
39 |
jQuery图片查看器
40 |
41 | 52 |
53 |
54 | 55 | 56 | 57 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Viewerjs jQuery图片查看器 2 | ## 更新 3 | ### Viewer.js 有以下特点： 4 | - 支持移动设备触摸事件 5 | - 支持响应式 6 | - 支持放大/缩小 7 | - 支持旋转（类似微博的图片旋转） 8 | - 支持水平/垂直翻转 9 | - 支持图片移动 10 | - 支持键盘 11 | - 支持全屏幻灯片模式（可做屏保） 12 | - 支持缩略图 13 | - 支持标题显示 14 | - 支持多种自定义事件 15 | 16 | ## 使用方法 17 | ### 载入 CSS 文件 18 | ```CSS 19 | 20 | 21 | 22 | ``` 23 | 24 | ### DOM底部载入 JavaScript 文件 25 | ```JavaScript 26 | 27 | 28 | 29 | ``` 30 | 31 | ### DOM 结构 32 | ```html 33 | 44 | ``` 45 | ### 调用 Viewer 46 | ```javascript 47 | $('#dowebok').viewer({ 48 | url: 'data-original' 49 | }); 50 | ``` 51 | ## 常用配置 Common API 52 | 53 | 54 | | Name 名称 | Type 类型 | Default 默认值| Description 说明| 55 | | ------------ | ------- | ------- | ----------- | 56 | | inline | 布尔值 | false | 启用 inline 模式 | 57 | | button | 布尔值 | true | 显示右上角关闭按钮（jQuery 版本无效） | 58 | | navbar | 布尔值/整型 | true | 显示缩略图导航 | 59 | | title | 布尔值/整型 | true | 显示当前图片的标题（现实 alt 属性及图片尺寸） | 60 | | toolbar | 布尔值/整型 | true | 显示工具栏 | 61 | | tooltip | 布尔值 | true | 显示缩放百分比 | 62 | | movable | 布尔值 | true | 图片是否可移动 | 63 | | zoomable | 布尔值 | true | 图片是否可缩放 | 64 | | rotatable | 布尔值 | true | 图片是否可旋转 | 65 | | scalable | 布尔值 | true | 图片是否可翻转 | 66 | | transition | 布尔值 | true | 使用 CSS3 过度 | 67 | | fullscreen | 布尔值 | true | 播放时是否全屏 | 68 | | keyboard | 布尔值 | true | 是否支持键盘 | 69 | | interval | 整型 | 5000 | 播放间隔，单位为毫秒 | 70 | | zoomRatio | 浮点型 | 0.1 | 鼠标滚动时的缩放比例 | 71 | | minZoomRatio | 浮点型 | 0.01 | 最小缩放比例 | 72 | | maxZoomRatio | 数字 | 100 | 最大缩放比例 | 73 | | zIndex | 数字 | 2015 | 设置图片查看器 modal 模式时的 z-index | 74 | | zIndexInline | 数字 | 0 | 设置图片查看器 inline 模式时的 z-index | 75 | | url | 字符串/函数 | src | 设置大图片的 url | 76 | | build | 函数 | null | 回调函数，具体查看演示 | 77 | | built | 函数 | null | 回调函数，具体查看演示 | 78 | | show | 函数 | null | 回调函数，具体查看演示 | 79 | | shown | 函数 | null | 回调函数，具体查看演示 | 80 | | hide | 函数 | null | 回调函数，具体查看演示 | 81 | | hidden | 函数 | null | 回调函数，具体查看演示 | 82 | | view | 函数 | null | 回调函数，具体查看演示 | 83 | | viewed | 函数 | null | 回调函数，具体查看演示 | 84 | 85 | ## 移动端效果如下图所示： 86 | 87 |

88 |  效果图 89 |      90 | 效果图 91 |

92 | 93 | ## pc端效果如下图所示： 94 | 95 |

96 |  效果图 97 |

98 |

99 |  效果图 100 |

101 | 102 | ** [⬆ 回到顶部](#更新) ** 103 | -------------------------------------------------------------------------------- /css/viewer.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Viewer.js v0.3.1 3 | * https://github.com/fengyuanchen/viewerjs 4 | * 5 | * Copyright (c) 2015-2016 Fengyuan Chen 6 | * Released under the MIT license 7 | * 8 | * Date: 2016-02-02T11:35:36.273Z 9 | */.viewer-container,.viewer-navbar{background-color:#000;overflow:hidden}.viewer-canvas,.viewer-container,.viewer-footer,.viewer-player{right:0;bottom:0;left:0}.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:0;line-height:0;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:0;line-height:0;position:absolute;top:0;-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:0}.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:0;padding:1px 0}.viewer-list>li{font-size:0;line-height:0;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:1;filter:alpha(opacity=100)}.viewer-player{top:0;cursor:none;background-color:#000}.viewer-player>img{position:absolute;top:0;left:0}.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:1;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:1;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:0;filter:alpha(opacity=0)}.viewer-in{opacity:1;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}} -------------------------------------------------------------------------------- /js/viewer-jquery.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Viewer v0.5.0 3 | * https://github.com/fengyuanchen/viewer 4 | * 5 | * Copyright (c) 2015-2016 Fengyuan Chen 6 | * Released under the MIT license 7 | * 8 | * Date: 2016-01-21T09:59:52.834Z 9 | */ 10 | !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",z="viewer-fade",F="viewer-in",Y="viewer-move",k="viewer-active",I="viewer-invisible",X="viewer-transition",P="viewer-fullscreen",T="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,_="click."+f,j="resize."+f,A="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(A,t.build),this.trigger(A).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(_,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),h.inline?(a.addClass(P),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,z,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(){var i=this.options,t=this.$element;this.isBuilt&&(i.inline&&t.removeClass(y),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(_,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(j,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(_,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(j,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('
  • '+a+'
    • '))}),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.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.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(F)):(t.addClass(F),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(F)},this)),this.zoomTo(0,!1,!1,!0)):(e.removeClass(F),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(''+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(''+l.attr(');h++,d.addClass(z).toggleClass(X,s.transition),e.hasClass(k)&&(d.addClass(F),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(F),r++,r=h>r?r:0,a[r].addClass(F),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(T),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(T),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,z,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(F)):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(F),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(_,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.TEMPLATE='
      ',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}}); -------------------------------------------------------------------------------- /js/viewer.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Viewer.js v0.3.1 3 | * https://github.com/fengyuanchen/viewerjs 4 | * 5 | * Copyright (c) 2015-2016 Fengyuan Chen 6 | * Released under the MIT license 7 | * 8 | * Date: 2016-02-02T11:35:52.542Z 9 | */ 10 | !function(e,t){"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("Viewer requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(e,t){"use strict";function i(e){return Ae.call(e).slice(8,-1).toLowerCase()}function n(e){return"string"==typeof e}function a(e){return"number"==typeof e&&!isNaN(e)}function o(e){return"undefined"==typeof e}function r(e){return"object"==typeof e&&null!==e}function s(e){var t,i;if(!r(e))return!1;try{return t=e.constructor,i=t.prototype,t&&i&&Ce.call(i,"isPrototypeOf")}catch(n){return!1}}function l(e){return"function"===i(e)}function u(e){return Array.isArray?Array.isArray(e):"array"===i(e)}function c(e,t){return t=t>=0?t:0,Array.from?Array.from(e).slice(t):_e.call(e,t)}function d(e,t){var i=-1;return t.indexOf?t.indexOf(e):(f(t,function(t,n){return t===e?(i=n,!1):void 0}),i)}function m(e){return n(e)&&(e=e.trim?e.trim():e.replace(Le,"1")),e}function f(e,t){var i,n;if(e&&l(t))if(u(e)||a(e.length))for(n=0,i=e.length;i>n&&t.call(e,e[n],n,e)!==!1;n++);else if(r(e))for(n in e)if(e.hasOwnProperty(n)&&t.call(e,e[n],n,e)===!1)break;return e}function h(e){var t;if(arguments.length>1){if(t=c(arguments),Object.assign)return Object.assign.apply(Object,t);t.shift(),f(t,function(t){f(t,function(t,i){e[i]=t})})}return e}function v(e,t){var i=c(arguments,2);return function(){return e.apply(t,i.concat(c(arguments)))}}function g(e,t){var i=e.style;f(t,function(e,t){Ie.test(t)&&a(e)&&(e+="px"),i[t]=e})}function w(t){return e.getComputedStyle?e.getComputedStyle(t,null):t.currentStyle}function p(e,t){return e.classList?e.classList.contains(t):e.className.indexOf(t)>-1}function b(e,t){var i;if(t){if(a(e.length))return f(e,function(e){b(e,t)});if(e.classList)return e.classList.add(t);i=m(e.className),i?i.indexOf(t)<0&&(e.className=i+" "+t):e.className=t}}function y(e,t){return t?a(e.length)?f(e,function(e){y(e,t)}):e.classList?e.classList.remove(t):void(e.className.indexOf(t)>=0&&(e.className=e.className.replace(t,""))):void 0}function x(e,t,i){return a(e.length)?f(e,function(e){x(e,t,i)}):void(i?b(e,t):y(e,t))}function z(e,t){return r(e[t])?e[t]:e.dataset?e.dataset[t]:e.getAttribute("data-"+t)}function D(e,t,i){r(i)&&o(e[t])?e[t]=i:e.dataset?e.dataset[t]=i:e.setAttribute("data-"+t,i)}function E(e,t){r(e[t])?delete e[t]:e.dataset?delete e.dataset[t]:e.removeAttribute("data-"+t)}function k(e,t,i,n){var a=m(t).split(Te),o=i;return a.length>1?f(a,function(t){k(e,t,i)}):(n&&(i=function(){return I(e,t,i),o.apply(e,arguments)}),void(e.addEventListener?e.addEventListener(t,i,!1):e.attachEvent&&e.attachEvent("on"+t,i)))}function I(e,t,i){var n=m(t).split(Te);return n.length>1?f(n,function(t){I(e,t,i)}):void(e.removeEventListener?e.removeEventListener(t,i,!1):e.detachEvent&&e.detachEvent("on"+t,i))}function L(e,t){var i;return e.dispatchEvent?(l(H)?i=new H(t,{bubbles:!0,cancelable:!0}):(i=W.createEvent("Event"),i.initEvent(t,!0,!0)),e.dispatchEvent(i)):e.fireEvent?e.fireEvent("on"+t):void 0}function T(e){e.preventDefault?e.preventDefault():e.returnValue=!1}function Y(t){var i,n=t||e.event;return n.target||(n.target=n.srcElement||W),a(n.pageX)||(i=W.documentElement,n.pageX=n.clientX+(e.scrollX||i&&i.scrollLeft||0)-(i&&i.clientLeft||0),n.pageY=n.clientY+(e.scrollY||i&&i.scrollTop||0)-(i&&i.clientTop||0)),n}function F(t){var i=W.documentElement,n=t.getBoundingClientRect();return{left:n.left+(e.scrollX||i&&i.scrollLeft||0)-(i&&i.clientLeft||0),top:n.top+(e.scrollY||i&&i.scrollTop||0)-(i&&i.clientTop||0)}}function X(e){var t=e.length,i=0,n=0;return t&&(f(e,function(e){i+=e.pageX,n+=e.pageY}),i/=t,n/=t),{pageX:i,pageY:n}}function S(e,t){return e.getElementsByTagName(t)}function V(e,t){return e.getElementsByClassName?e.getElementsByClassName(t):e.querySelectorAll("."+t)}function N(e,t){return t.length?f(t,function(t){N(e,t)}):void e.appendChild(t)}function P(e){e.parentNode&&e.parentNode.removeChild(e)}function A(e){for(;e.firstChild;)e.removeChild(e.firstChild)}function C(e,t){o(e.textContent)?e.innerText=t:e.textContent=t}function _(e){return e.offsetWidth}function R(e){return n(e)?e.replace(/^.*\//,"").replace(/[\?&#].*$/,""):""}function q(e,t){var i;return e.naturalWidth?t(e.naturalWidth,e.naturalHeight):(i=W.createElement("img"),i.onload=function(){t(this.width,this.height)},void(i.src=e.src))}function M(e){var t=[],i=e.rotate,n=e.scaleX,o=e.scaleY;return a(i)&&t.push("rotate("+i+"deg)"),a(n)&&a(o)&&t.push("scale("+n+","+o+")"),t.length?t.join(" "):"none"}function B(e){switch(e){case 2:return G;case 3:return J;case 4:return Q}}function O(e,t){var i=this;i.element=e,i.options=h({},O.DEFAULTS,s(t)&&t),i.isImg=!1,i.isBuilt=!1,i.isShown=!1,i.isViewed=!1,i.isFulled=!1,i.isPlayed=!1,i.wheeling=!1,i.playing=!1,i.fading=!1,i.tooltiping=!1,i.transitioning=!1,i.action=!1,i.target=!1,i.timeout=!1,i.index=0,i.length=0,i.init()}var W=e.document,H=e.Event,j="viewer",U=j+"-fixed",Z=j+"-open",K=j+"-show",$=j+"-hide",G="viewer-hide-xs-down",J="viewer-hide-sm-down",Q="viewer-hide-md-down",ee=j+"-fade",te=j+"-in",ie=j+"-move",ne=j+"-active",ae=j+"-invisible",oe=j+"-transition",re=j+"-fullscreen",se=j+"-fullscreen-exit",le=j+"-close",ue="mousedown touchstart pointerdown MSPointerDown",ce="mousemove touchmove pointermove MSPointerMove",de="mouseup touchend touchcancel pointerup pointercancel MSPointerUp MSPointerCancel",me="wheel mousewheel DOMMouseScroll",fe="transitionend",he="load",ve="keydown",ge="click",we="resize",pe="build",be="built",ye="show",xe="shown",ze="hide",De="hidden",Ee="view",ke="viewed",Ie=/width|height|left|top|marginLeft|marginTop/,Le=/^\s+(.*)\s+$/,Te=/\s+/,Ye="undefined"!=typeof W.createElement(j).style.transition,Fe=Math.min,Xe=Math.max,Se=Math.abs,Ve=Math.sqrt,Ne=Math.round,Pe=Object.prototype,Ae=Pe.toString,Ce=Pe.hasOwnProperty,_e=Array.prototype.slice;O.prototype={constructor:O,init:function(){var e=this,t=e.options,i=e.element,n="img"===i.tagName.toLowerCase(),a=n?[i]:S(i,"img"),o=a.length,r=v(e.ready,e);z(i,j)||(D(i,j,e),o&&(l(t.build)&&k(i,pe,t.build,!0),L(i,pe)!==!1&&(Ye||(t.transition=!1),e.isImg=n,e.length=o,e.count=0,e.images=a,e.body=W.body,t.inline?(k(i,be,function(){e.view()},!0),f(a,function(e){e.complete?r():k(e,he,r,!0)})):k(i,ge,e._start=v(e.start,e)))))},ready:function(){var e=this;e.count++,e.count===e.length&&e.build()},build:function(){var e,t,i,n,a,o,r,s,u=this,c=u.options,d=u.element;u.isBuilt||(e=W.createElement("div"),e.innerHTML=O.TEMPLATE,u.parent=t=d.parentNode,u.viewer=i=V(e,"viewer-container")[0],u.canvas=V(i,"viewer-canvas")[0],u.footer=V(i,"viewer-footer")[0],u.title=r=V(i,"viewer-title")[0],u.toolbar=a=V(i,"viewer-toolbar")[0],u.navbar=o=V(i,"viewer-navbar")[0],u.button=n=V(i,"viewer-button")[0],u.tooltipBox=V(i,"viewer-tooltip")[0],u.player=V(i,"viewer-player")[0],u.list=V(i,"viewer-list")[0],b(r,c.title?B(c.title):$),b(a,c.toolbar?B(c.toolbar):$),b(o,c.navbar?B(c.navbar):$),x(n,$,!c.button),x(a.querySelectorAll("li[class*=zoom]"),ae,!c.zoomable),x(a.querySelectorAll("li[class*=flip]"),ae,!c.scalable),c.rotatable||(s=a.querySelectorAll("li[class*=rotate]"),b(s,ae),N(a,s)),c.inline?(b(n,re),g(i,{zIndex:c.zIndexInline}),"static"===w(t).position&&g(t,{position:"relative"})):(b(n,le),b(i,U),b(i,ee),b(i,$),g(i,{zIndex:c.zIndex})),t.insertBefore(i,d.nextSibling),c.inline&&(u.render(),u.bind(),u.isShown=!0),u.isBuilt=!0,l(c.built)&&k(d,be,c.built,!0),L(d,be))},unbuild:function(){var e=this;e.isBuilt&&(e.isBuilt=!1,P(e.viewer))},bind:function(){var t=this,i=t.options,n=t.element,a=t.viewer;l(i.view)&&k(n,Ee,i.view),l(i.viewed)&&k(n,ke,i.viewed),k(a,ge,t._click=v(t.click,t)),k(a,me,t._wheel=v(t.wheel,t)),k(t.canvas,ue,t._mousedown=v(t.mousedown,t)),k(W,ce,t._mousemove=v(t.mousemove,t)),k(W,de,t._mouseup=v(t.mouseup,t)),k(W,ve,t._keydown=v(t.keydown,t)),k(e,we,t._resize=v(t.resize,t))},unbind:function(){var t=this,i=t.options,n=t.element,a=t.viewer;l(i.view)&&I(n,Ee,i.view),l(i.viewed)&&I(n,ke,i.viewed),I(a,ge,t._click),I(a,me,t._wheel),I(t.canvas,ue,t._mousedown),I(W,ce,t._mousemove),I(W,de,t._mouseup),I(W,ve,t._keydown),I(e,we,t._resize)},render:function(){var e=this;e.initContainer(),e.initViewer(),e.initList(),e.renderViewer()},initContainer:function(){var t=this;t.containerData={width:e.innerWidth,height:e.innerHeight}},initViewer:function(){var e,t=this,i=t.options,n=t.parent;i.inline&&(t.parentData=e={width:Xe(n.offsetWidth,i.minWidth),height:Xe(n.offsetHeight,i.minHeight)}),(t.isFulled||!e)&&(e=t.containerData),t.viewerData=h({},e)},renderViewer:function(){var e=this;e.options.inline&&!e.isFulled&&g(e.viewer,e.viewerData)},initList:function(){var e=this,t=e.options,i=e.element,a=e.list,o=[];f(e.images,function(a,r){var s=a.src,u=a.alt||R(s),c=t.url;s&&(n(c)?c=a.getAttribute(c):l(c)&&(c=c.call(i,e)),o.push('
    • '+u+'
      • '))}),a.innerHTML=o.join(""),f(S(a,"img"),function(t){D(t,"filled",!0),k(t,he,v(e.loadImage,e),!0)}),e.items=S(a,"li"),t.transition&&k(i,ke,function(){b(a,oe)},!0)},renderList:function(e){var t=this,i=e||t.index,n=t.items[i].offsetWidth||30,a=n+1;g(t.list,{width:a*t.length,marginLeft:(t.viewerData.width-n)/2-a*i})},resetList:function(){var e=this;A(e.list),y(e.list,oe),g({marginLeft:0})},initImage:function(e){var t=this,i=t.options,n=t.image,a=t.viewerData,o=t.footer.offsetHeight,r=a.width,s=Xe(a.height-o,o),u=t.imageData||{};q(n,function(n,a){var o,c,d=n/a,m=r,f=s;s*d>r?f=r/d:m=s*d,m=Fe(.9*m,n),f=Fe(.9*f,a),c={naturalWidth:n,naturalHeight:a,aspectRatio:d,ratio:m/n,width:m,height:f,left:(r-m)/2,top:(s-f)/2},o=h({},c),i.rotatable&&(c.rotate=u.rotate||0,o.rotate=0),i.scalable&&(c.scaleX=u.scaleX||1,c.scaleY=u.scaleY||1,o.scaleX=1,o.scaleY=1),t.imageData=c,t.initialImageData=o,l(e)&&e()})},renderImage:function(e){var t=this,i=t.image,n=t.imageData,a=M(n);g(i,{width:n.width,height:n.height,marginLeft:n.left,marginTop:n.top,WebkitTransform:a,msTransform:a,transform:a}),l(e)&&(t.transitioning?k(i,fe,e,!0):e())},resetImage:function(){var e=this;e.image&&(P(e.image),e.image=null)},start:function(e){var t=this,i=Y(e),n=i.target;"img"===n.tagName.toLowerCase()&&(t.target=n,t.show())},click:function(e){var t=this,i=Y(e),n=i.target,a=z(n,"action"),o=t.imageData;switch(a){case"mix":t.isPlayed?t.stop():t.options.inline?t.isFulled?t.exit():t.full():t.hide();break;case"view":t.view(z(n,"index"));break;case"zoom-in":t.zoom(.1,!0);break;case"zoom-out":t.zoom(-.1,!0);break;case"one-to-one":t.toggle();break;case"reset":t.reset();break;case"prev":t.prev();break;case"play":t.play();break;case"next":t.next();break;case"rotate-left":t.rotate(-90);break;case"rotate-right":t.rotate(90);break;case"flip-horizontal":t.scaleX(-o.scaleX||-1);break;case"flip-vertical":t.scaleY(-o.scaleY||-1);break;default:t.isPlayed&&t.stop()}},load:function(){var e=this,t=e.options,i=e.image,n=e.viewerData;e.timeout&&(clearTimeout(e.timeout),e.timeout=!1),y(i,ae),i.style.cssText="width:0;height:0;margin-left:"+n.width/2+"px;margin-top:"+n.height/2+"px;max-width:none!important;visibility:visible;",e.initImage(function(){x(i,oe,t.transition),x(i,ie,t.movable),e.renderImage(function(){e.isViewed=!0,L(e.element,ke)})})},loadImage:function(e){var t=Y(e),i=t.target,n=i.parentNode,a=n.offsetWidth||30,o=n.offsetHeight||50,r=!!z(i,"filled");q(i,function(e,t){var n=e/t,s=a,l=o;o*n>a?r?s=o*n:l=a/n:r?l=a/n:s=o*n,g(i,{width:s,height:l,marginLeft:(a-s)/2,marginTop:(o-l)/2})})},resize:function(){var e=this;e.initContainer(),e.initViewer(),e.renderViewer(),e.renderList(),e.isViewed&&e.initImage(function(){e.renderImage()}),e.isPlayed&&f(S(e.player,"img"),function(t){k(t,he,v(e.loadImage,e),!0),L(t,he)})},wheel:function(e){var t=this,i=Y(e),n=Number(t.options.zoomRatio)||.1,a=1;t.isViewed&&(T(i),t.wheeling||(t.wheeling=!0,setTimeout(function(){t.wheeling=!1},50),i.deltaY?a=i.deltaY>0?1:-1:i.wheelDelta?a=-i.wheelDelta/120:i.detail&&(a=i.detail>0?1:-1),t.zoom(-a*n,!0,i)))},keydown:function(e){var t=this,i=Y(e),n=t.options,a=i.keyCode||i.which||i.charCode;if(t.isFulled&&n.keyboard)switch(a){case 27:t.isPlayed?t.stop():n.inline?t.isFulled&&t.exit():t.hide();break;case 32:t.isPlayed&&t.stop();break;case 37:t.prev();break;case 38:T(i),t.zoom(n.zoomRatio,!0);break;case 39:t.next();break;case 40:T(i),t.zoom(-n.zoomRatio,!0);break;case 48:case 49:(i.ctrlKey||i.shiftKey)&&(T(i),t.toggle())}},mousedown:function(e){var t,i,n=this,a=n.options,o=Y(e),r=a.movable?"move":!1,s=o.touches;if(n.isViewed){if(s){if(t=s.length,t>1){if(!a.zoomable||2!==t)return;i=s[1],n.startX2=i.pageX,n.startY2=i.pageY,r="zoom"}else n.isSwitchable()&&(r="switch");i=s[0]}r&&(T(o),n.action=r,n.startX=i?i.pageX:o.pageX,n.startY=i?i.pageY:o.pageY)}},mousemove:function(e){var t,i,n=this,a=n.options,o=Y(e),r=n.action,s=n.image,l=o.touches;if(n.isViewed){if(l){if(t=l.length,t>1){if(!a.zoomable||2!==t)return;i=l[1],n.endX2=i.pageX,n.endY2=i.pageY}i=l[0]}r&&(T(o),"move"===r&&a.transition&&p(s,oe)&&y(s,oe),n.endX=i?i.pageX:o.pageX,n.endY=i?i.pageY:o.pageY,n.change(o))}},mouseup:function(e){var t=this,i=Y(e),n=t.action;n&&(T(i),"move"===n&&t.options.transition&&b(t.image,oe),t.action=!1)},show:function(){var e,t=this,i=t.options,n=t.element;return i.inline||t.transitioning?t:(t.isBuilt||t.build(),e=t.viewer,l(i.show)&&k(n,ye,i.show,!0),L(n,ye)===!1?t:(b(t.body,Z),y(e,$),k(n,xe,function(){t.view(t.target?d(t.target,c(t.images)):t.index),t.target=!1},!0),i.transition?(t.transitioning=!0,b(e,oe),_(e),k(e,fe,v(t.shown,t),!0),b(e,te)):(b(e,te),t.shown()),t))},hide:function(){var e=this,t=e.options,i=e.element,n=e.viewer;return t.inline||e.transitioning||!e.isShown?e:(l(t.hide)&&k(i,ze,t.hide,!0),L(i,ze)===!1?e:(e.isViewed&&t.transition?(e.transitioning=!0,k(e.image,fe,function(){k(n,fe,v(e.hidden,e),!0),y(n,te)},!0),e.zoomTo(0,!1,!1,!0)):(y(n,te),e.hidden()),e))},view:function(e){var t,i,n,a,o,r=this,s=r.element,l=r.title,u=r.canvas;return e=Number(e)||0,!r.isShown||r.isPlayed||0>e||e>=r.length||r.isViewed&&e===r.index?r:L(s,Ee)===!1?r:(i=r.items[e],n=S(i,"img")[0],a=z(n,"originalUrl"),o=n.getAttribute("alt"),t=W.createElement("img"),t.src=a,t.alt=o,r.image=t,r.isViewed&&y(r.items[r.index],ne),b(i,ne),r.isViewed=!1,r.index=e,r.imageData=null,b(u,ae),A(u),N(u,t),r.renderList(),A(l),k(s,ke,function(){var e=r.imageData,t=e.naturalWidth,i=e.naturalHeight;C(l,o+" ("+t+" × "+i+")")},!0),t.complete?r.load():(k(t,he,v(r.load,r),!0),r.timeout&&clearTimeout(r.timeout),r.timeout=setTimeout(function(){y(t,ae),r.timeout=!1},1e3)),r)},prev:function(){var e=this;return e.view(Xe(e.index-1,0)),e},next:function(){var e=this;return e.view(Fe(e.index+1,e.length-1)),e},move:function(e,t){var i=this,n=i.imageData;return i.moveTo(o(e)?e:n.left+Number(e),o(t)?t:n.top+Number(t)),i},moveTo:function(e,t){var i=this,n=i.imageData,r=!1;return o(t)&&(t=e),e=Number(e),t=Number(t),i.isViewed&&!i.isPlayed&&i.options.movable&&(a(e)&&(n.left=e,r=!0),a(t)&&(n.top=t,r=!0),r&&i.renderImage()),i},zoom:function(e,t,i){var n=this,a=n.imageData;return e=Number(e),e=0>e?1/(1-e):1+e,n.zoomTo(a.width*e/a.naturalWidth,t,i),n},zoomTo:function(e,t,i,n){var o,r,s,l,u=this,c=u.options,d=.01,m=100,f=u.imageData;return e=Xe(0,e),a(e)&&u.isViewed&&!u.isPlayed&&(n||c.zoomable)&&(n||(d=Xe(d,c.minZoomRatio),m=Fe(m,c.maxZoomRatio),e=Fe(Xe(e,d),m)),e>.95&&1.05>e&&(e=1),o=f.naturalWidth*e,r=f.naturalHeight*e,i?(s=F(u.viewer),l=i.touches?X(i.touches):{pageX:i.pageX,pageY:i.pageY},f.left-=(o-f.width)*((l.pageX-s.left-f.left)/f.width),f.top-=(r-f.height)*((l.pageY-s.top-f.top)/f.height)):(f.left-=(o-f.width)/2,f.top-=(r-f.height)/2),f.width=o,f.height=r,f.ratio=e,u.renderImage(),t&&u.tooltip()),u},rotate:function(e){var t=this;return t.rotateTo((t.imageData.rotate||0)+Number(e)),t},rotateTo:function(e){var t=this,i=t.imageData;return e=Number(e),a(e)&&t.isViewed&&!t.isPlayed&&t.options.rotatable&&(i.rotate=e,t.renderImage()),t},scale:function(e,t){var i=this,n=i.imageData,r=!1;return o(t)&&(t=e),e=Number(e),t=Number(t),i.isViewed&&!i.isPlayed&&i.options.scalable&&(a(e)&&(n.scaleX=e,r=!0),a(t)&&(n.scaleY=t,r=!0),r&&i.renderImage()),i},scaleX:function(e){var t=this;return t.scale(e,t.imageData.scaleY),t},scaleY:function(e){var t=this;return t.scale(t.imageData.scaleX,e),t},play:function(){var e,t=this,i=t.options,n=t.player,o=v(t.loadImage,t),r=[],s=0,l=0;return!t.isShown||t.isPlayed?t:(i.fullscreen&&t.requestFullscreen(),t.isPlayed=!0,b(n,K),f(t.items,function(e,t){var a=S(e,"img")[0],u=W.createElement("img");u.src=z(a,"originalUrl"),u.alt=a.getAttribute("alt"),s++,b(u,ee),x(u,oe,i.transition),p(e,ne)&&(b(u,te),l=t),r.push(u),k(u,he,o,!0),N(n,u)}),a(i.interval)&&i.interval>0&&(e=function(){t.playing=setTimeout(function(){y(r[l],te),l++,l=s>l?l:0,b(r[l],te),e()},i.interval)},s>1&&e()),t)},stop:function(){var e=this,t=e.player;return e.isPlayed?(e.options.fullscreen&&e.exitFullscreen(),e.isPlayed=!1,clearTimeout(e.playing),y(t,K),A(t),e):e},full:function(){var e=this,t=e.options,i=e.viewer,n=e.image,a=e.list;return!e.isShown||e.isPlayed||e.isFulled||!t.inline?e:(e.isFulled=!0,b(e.body,Z),b(e.button,se),t.transition&&(y(n,oe),y(a,oe)),b(i,U),i.setAttribute("style",""),g(i,{zIndex:t.zIndex}),e.initContainer(),e.viewerData=h({},e.containerData),e.renderList(),e.initImage(function(){e.renderImage(function(){t.transition&&setTimeout(function(){b(n,oe),b(a,oe)},0)})}),e)},exit:function(){var e=this,t=e.options,i=e.viewer,n=e.image,a=e.list;return e.isFulled?(e.isFulled=!1,y(e.body,Z),y(e.button,se),t.transition&&(y(n,oe),y(a,oe)),y(i,U),g(i,{zIndex:t.zIndexInline}),e.viewerData=h({},e.parentData),e.renderViewer(),e.renderList(),e.initImage(function(){e.renderImage(function(){t.transition&&setTimeout(function(){b(n,oe),b(a,oe)},0)})}),e):e},tooltip:function(){var e=this,t=e.options,i=e.tooltipBox,n=e.imageData;return e.isViewed&&!e.isPlayed&&t.tooltip?(C(i,Ne(100*n.ratio)+"%"),e.tooltiping?clearTimeout(e.tooltiping):t.transition?(e.fading&&L(i,fe),b(i,K),b(i,ee),b(i,oe),_(i),b(i,te)):b(i,K),e.tooltiping=setTimeout(function(){t.transition?(k(i,fe,function(){y(i,K),y(i,ee),y(i,oe),e.fading=!1},!0),y(i,te),e.fading=!0):y(i,K),e.tooltiping=!1},1e3),e):e},toggle:function(){var e=this;return 1===e.imageData.ratio?e.zoomTo(e.initialImageData.ratio,!0):e.zoomTo(1,!0),e},reset:function(){var e=this;return e.isViewed&&!e.isPlayed&&(e.imageData=h({},e.initialImageData),e.renderImage()),e},update:function(){var e,t=this,i=[];return t.isImg&&!t.element.parentNode?t.destroy():(t.length=t.images.length,t.isBuilt&&(f(t.items,function(e,n){var a=S(e,"img")[0],o=t.images[n];o?o.src!==a.src&&i.push(n):i.push(n)}),g(t.list,{width:"auto"}),t.initList(),t.isShown&&(t.length?t.isViewed&&(e=d(t.index,i),e>=0?(t.isViewed=!1,t.view(Xe(t.index-(e+1),0))):b(t.items[t.index],ne)):(t.image=null,t.isViewed=!1,t.index=0,t.imageData=null,A(t.canvas),A(t.title)))),t)},destroy:function(){var e=this,t=e.element;return e.options.inline?e.unbind():(e.isShown&&e.unbind(),I(t,ge,e._start)),e.unbuild(),E(t,j),e},shown:function(){var e=this,t=e.options,i=e.element;e.transitioning=!1,e.isFulled=!0,e.isShown=!0,e.isVisible=!0,e.render(),e.bind(),l(t.shown)&&k(i,xe,t.shown,!0),L(i,xe)},hidden:function(){var e=this,t=e.options,i=e.element;e.transitioning=!1,e.isViewed=!1,e.isFulled=!1,e.isShown=!1,e.isVisible=!1,e.unbind(),y(e.body,Z),b(e.viewer,$),e.resetList(),e.resetImage(),l(t.hidden)&&k(i,De,t.hidden,!0),L(i,De)},requestFullscreen:function(){var e=this,t=W.documentElement;!e.isFulled||W.fullscreenElement||W.mozFullScreenElement||W.webkitFullscreenElement||W.msFullscreenElement||(t.requestFullscreen?t.requestFullscreen():t.msRequestFullscreen?t.msRequestFullscreen():t.mozRequestFullScreen?t.mozRequestFullScreen():t.webkitRequestFullscreen&&t.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT))},exitFullscreen:function(){var e=this;e.isFulled&&(W.exitFullscreen?W.exitFullscreen():W.msExitFullscreen?W.msExitFullscreen():W.mozCancelFullScreen?W.mozCancelFullScreen():W.webkitExitFullscreen&&W.webkitExitFullscreen())},change:function(e){var t=this,i=t.endX-t.startX,n=t.endY-t.startY;switch(t.action){case"move":t.move(i,n);break;case"zoom":t.zoom(function(e,t,i,n){var a=Ve(e*e+t*t),o=Ve(i*i+n*n);return(o-a)/a}(Se(t.startX-t.startX2),Se(t.startY-t.startY2),Se(t.endX-t.endX2),Se(t.endY-t.endY2)),!1,e),t.startX2=t.endX2,t.startY2=t.endY2;break;case"switch":t.action="switched",Se(i)>Se(n)&&(i>1?t.prev():-1>i&&t.next())}t.startX=t.endX,t.startY=t.endY},isSwitchable:function(){var e=this,t=e.imageData,i=e.viewerData;return t.left>=0&&t.top>=0&&t.width<=i.width&&t.height<=i.height}},O.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},O.TEMPLATE='
        ';var Re=e.Viewer;return O.noConflict=function(){return e.Viewer=Re,O},O.setDefaults=function(e){h(O.DEFAULTS,e)},"function"==typeof define&&define.amd&&define("viewer",[],function(){return O}),t||(e.Viewer=O),O}); --------------------------------------------------------------------------------