├── images ├── 1.jpg ├── 2.jpg ├── 3.jpg ├── 4.jpg ├── 5.jpeg ├── 6.jpeg ├── 6.jpg ├── 7.jpg └── 8.jpeg ├── javascripts ├── photo.js └── drag.js ├── .gitattributes ├── README.md ├── .gitignore ├── stylesheets ├── reset.css └── main.css └── index.html /images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Iamlars/photos/HEAD/images/1.jpg -------------------------------------------------------------------------------- /images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Iamlars/photos/HEAD/images/2.jpg -------------------------------------------------------------------------------- /images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Iamlars/photos/HEAD/images/3.jpg -------------------------------------------------------------------------------- /images/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Iamlars/photos/HEAD/images/4.jpg -------------------------------------------------------------------------------- /images/5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Iamlars/photos/HEAD/images/5.jpeg -------------------------------------------------------------------------------- /images/6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Iamlars/photos/HEAD/images/6.jpeg -------------------------------------------------------------------------------- /images/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Iamlars/photos/HEAD/images/6.jpg -------------------------------------------------------------------------------- /images/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Iamlars/photos/HEAD/images/7.jpg -------------------------------------------------------------------------------- /images/8.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Iamlars/photos/HEAD/images/8.jpeg -------------------------------------------------------------------------------- /javascripts/photo.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Iamlars/photos/HEAD/javascripts/photo.js -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | 7 | # Standard to msysgit 8 | *.doc diff=astextplain 9 | *.DOC diff=astextplain 10 | *.docx diff=astextplain 11 | *.DOCX diff=astextplain 12 | *.dot diff=astextplain 13 | *.DOT diff=astextplain 14 | *.pdf diff=astextplain 15 | *.PDF diff=astextplain 16 | *.rtf diff=astextplain 17 | *.RTF diff=astextplain 18 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # photos 2 | 简单的图片查看器 3 | 4 | ### 用法示例 5 | 6 | $(function(){ 7 | // 一般调用 8 | $('#photo').Photo(); 9 | 10 | // 以下为全部默认设置 11 | $('#photo').Photo({ 12 | // 应用相册查看器的标签，可以是 ".img" 也可以是 "img" 13 | target: 'img', 14 | // 最大放大倍数 15 | maxScale: 3, 16 | // 最小缩小倍数 17 | minScale: 0.5, 18 | // 图片左右切换的按钮 19 | prevBtn: $('#J_prev_photo'), 20 | nextBtn: $('#J_next_photo'), 21 | // 是否加载字体图标库 22 | loadFont: true, 23 | // 是否允许图片拖动 24 | isDrag: true 25 | }); 26 | }) 27 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Windows image file caches 2 | Thumbs.db 3 | ehthumbs.db 4 | 5 | # Folder config file 6 | Desktop.ini 7 | 8 | # Recycle Bin used on file shares 9 | $RECYCLE.BIN/ 10 | 11 | # Windows Installer files 12 | *.cab 13 | *.msi 14 | *.msm 15 | *.msp 16 | 17 | # Windows shortcuts 18 | *.lnk 19 | 20 | # ========================= 21 | # Operating System Files 22 | # ========================= 23 | 24 | # OSX 25 | # ========================= 26 | 27 | .DS_Store 28 | .AppleDouble 29 | .LSOverride 30 | 31 | # Thumbnails 32 | ._* 33 | 34 | # Files that might appear on external disk 35 | .Spotlight-V100 36 | .Trashes 37 | 38 | # Directories potentially created on remote AFP share 39 | .AppleDB 40 | .AppleDesktop 41 | Network Trash Folder 42 | Temporary Items 43 | .apdisk 44 | -------------------------------------------------------------------------------- /stylesheets/reset.css: -------------------------------------------------------------------------------- 1 | html,body,div,iframe, 2 | h1,h2,h3,h4,h5,h6, 3 | p,fieldset,form,label, 4 | span,a,em,img, b,i, 5 | dl,dt,dd,ol,ul,li, 6 | table,caption,tbody,thead,tr,th,td, { 7 | margin: 0; 8 | padding: 0; 9 | } 10 | img{border:0} 11 | ol, ul { 12 | list-style: none; 13 | } 14 | a{color:#123166;text-decoration: none} 15 | 16 | a:hover{ 17 | color: #ffa000; 18 | text-decoration: underline; 19 | } 20 | input{ 21 | font-size: 14px; 22 | outline: none; 23 | } 24 | select{ 25 | outline: none; 26 | } 27 | table { 28 | border-collapse: collapse; 29 | border-spacing: 0; 30 | } 31 | body{ 32 | font: 12px/150% 'Helvetica Neue',Tahoma,Arial,'Microsoft yahei',"Hiragino Sans GB",STXihei,SimSun,sans-serif; 33 | -webkit-font-smoothing: antialiased; 34 | -moz-osx-font-smoothing: grayscale; 35 | font-smoothing: antialiased; 36 | text-rendering: optimizeLegibility; 37 | color: #313131; 38 | } 39 | 40 | .clearfix:after{ 41 | content: ''; 42 | display: table; 43 | clear:both; 44 | } 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /index.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 |
0/0
26 |
27 |
28 |
29 | 30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 | 44 | 45 | 46 | 66 | 67 | -------------------------------------------------------------------------------- /stylesheets/main.css: -------------------------------------------------------------------------------- 1 | .photo-browser-wrap{display: none} 2 | 3 | .photo-browser{ 4 | z-index: 9998; 5 | position: fixed; 6 | width: 100%; 7 | height: 100%; 8 | top:0; 9 | left: 0; 10 | } 11 | 12 | .photo-browser .fa{ 13 | z-index: 9999; 14 | position: absolute; 15 | font-size: 70px; 16 | color: #fff; 17 | top:50%; 18 | margin-top: -35px; 19 | text-align: center; 20 | cursor: pointer; 21 | } 22 | .photo-browser .fa.disable{ 23 | color: #666; 24 | cursor: default; 25 | } 26 | .photo-browser .fa-close{ 27 | right: 10px; 28 | top:50px; 29 | font-size: 20px; 30 | } 31 | .photo-browser .fa-search-plus{ 32 | right: 70px; 33 | top:50px; 34 | font-size: 20px; 35 | } 36 | .photo-browser .fa-search-minus{ 37 | right: 40px; 38 | top:50px; 39 | font-size: 20px; 40 | } 41 | .photo-browser .fa-angle-left{ 42 | left: 10px; 43 | } 44 | .photo-browser .fa-angle-right{ 45 | right:10px; 46 | } 47 | .photo-browser .photo-index{ 48 | z-index: 10000; 49 | position: absolute; 50 | width: 100px; 51 | left: 50%; 52 | margin-left: -50px; 53 | top:15px; 54 | color: #fff; 55 | font-size: 20px; 56 | text-align: center; 57 | } 58 | .photo-browser .content{ 59 | z-index: 9998; 60 | width: 10000px; 61 | overflow: hidden; 62 | text-align: center; 63 | display: table-cell; 64 | vertical-align: middle; 65 | } 66 | .photo-browser .content img{ 67 | display: inline-block; 68 | position: relative; 69 | border: 10px solid #fff; 70 | background: #eee; 71 | } 72 | .photo-browser .content img.not-drag{ 73 | -webkit-transition: all .4s linear; 74 | -moz-transition: all .4s linear; 75 | transition: all .4s linear; 76 | } 77 | .photo-browser .thumb-wrap{ 78 | z-index: 10000; 79 | position: absolute; 80 | padding: 10px 0; 81 | left: 0; 82 | bottom:0; 83 | width: 100%; 84 | overflow: hidden; 85 | background: #000; 86 | } 87 | .photo-browser .thumb-box{ 88 | width: 800px; 89 | margin: auto; 90 | overflow: hidden; 91 | } 92 | .photo-browser .thumb{ 93 | position: relative; 94 | width: 9999px; 95 | } 96 | .photo-browser .thumb span{ 97 | display: inline-block; 98 | width: 80px; 99 | line-height: 50px; 100 | height: 50px; 101 | overflow: hidden; 102 | margin:0 10px; 103 | text-align: center; 104 | box-sizing: border-box; 105 | } 106 | .photo-browser .thumb span.active{ 107 | border: 3px solid #fff; 108 | } 109 | .photo-browser .thumb img{ 110 | width: 100%; 111 | vertical-align: middle; 112 | } 113 | .photo-browser-bg{ 114 | z-index: 9997; 115 | position: fixed; 116 | width: 100%; 117 | height: 100%; 118 | top:0; 119 | left: 0; 120 | background: #000; 121 | opacity: 0.8; 122 | } -------------------------------------------------------------------------------- /javascripts/drag.js: -------------------------------------------------------------------------------- 1 | (function($) { 2 | var udf, 3 | datakey = 'jquery-drag', 4 | win = window, 5 | doc = win.document, 6 | $doc = $(doc), 7 | $body = $(doc.body), 8 | defaults = { 9 | // 鼠标操作区域选择器，默认为this 10 | // 参数为选择器字符串 11 | handle: null, 12 | 13 | // 鼠标拖拽时，移动的目标，即从handle开始查找最近匹配的祖先元素 14 | // 默认为this 15 | // 参数为选择器字符串 16 | drag: null, 17 | 18 | // 拖拽轴向，x：水平，y：垂直，xy：所有 19 | axis: 'xy', 20 | 21 | // 鼠标形状，为空时将不会自动设置 22 | cursor: 'move', 23 | 24 | // 拖拽对象的最小位置，格式为{left: 10, top: 10} 25 | min: null, 26 | 27 | // 拖拽对象的最大位置，格式为{left: 1000, top: 1000} 28 | max: null, 29 | 30 | // 拖拽时的层级值 31 | zIndex: 9999, 32 | 33 | // 拖拽开始前回调 34 | // this: drag element 35 | // arg0: event 36 | // arg1: instance 37 | ondragbefore: $.noop, 38 | 39 | 40 | // 拖拽开始后回调 41 | // this: drag element 42 | // arg0: event 43 | // arg1: instance 44 | ondragstart: $.noop, 45 | 46 | // 拖拽中回调 47 | // this: drag element 48 | // arg0: event 49 | // arg1: instance 50 | ondrag: $.noop, 51 | 52 | // 拖拽结束后回调 53 | // this: drag element 54 | // arg0: event 55 | // arg1: instance 56 | ondragend: $.noop 57 | }; 58 | 59 | $.fn.drag = function(settings) { 60 | // 当前第1个参数为字符串 61 | var run = $.type(settings) === 'string', 62 | // 获取运行方法时的其他参数 63 | args = [].slice.call(arguments, 1), 64 | // 复制默认配置 65 | options = $.extend({}, defaults), 66 | // 运行实例化方法的元素 67 | $element, 68 | // 实例化对象 69 | instance; 70 | 71 | // 运行实例化方法，第1个字符不能是“_” 72 | // 下划线开始的方法皆为私有方法 73 | if (run && run[0] !== '_') { 74 | if (!this.length) return; 75 | 76 | // 只取集合中的第1个元素 77 | $element = $(this[0]); 78 | 79 | // 获取保存的实例化对象 80 | instance = $element.data(datakey); 81 | 82 | // 若未保存实例化对象，则先保存实例化对象 83 | if (!instance) $element.data(datakey, instance = new Constructor($element[0], options)._init()); 84 | 85 | // 防止与静态方法重合，只运行原型上的方法 86 | // 返回原型方法结果，否则返回undefined 87 | return Constructor.prototype[settings] ? Constructor.prototype[settings].apply(instance, args) : udf; 88 | } 89 | // instantiation options 90 | else if (!run) { 91 | // 合并参数 92 | options = $.extend(options, settings); 93 | } 94 | 95 | return this.each(function() { 96 | var element = this, 97 | instance = $(element).data(datakey); 98 | 99 | // 如果没有保存实例 100 | if (!instance) { 101 | // 保存实例 102 | $(element).data(datakey, instance = new Constructor(element, options)._init()); 103 | } 104 | }); 105 | }; 106 | 107 | $.fn.drag.defaults = defaults; 108 | 109 | function Constructor(element, options) { 110 | this.element = element; 111 | this.options = options; 112 | } 113 | 114 | Constructor.prototype = { 115 | _init: function() { 116 | var the = this, 117 | options = the.options, 118 | $element = $(the.element); 119 | 120 | the.$element = $element; 121 | 122 | // 采用事件代理 123 | if (options.handle) { 124 | $element.on('mousedown taphold', options.handle, $.proxy(the._start, the)); 125 | } else { 126 | $element.on('mousedown taphold', $.proxy(the._start, the)); 127 | } 128 | 129 | $doc.mousemove($.proxy(the._move, the)) 130 | .mouseup($.proxy(the._end, the)) 131 | .bind('touchmove', $.proxy(the._move, the)) 132 | .bind('touchend', $.proxy(the._end, the)) 133 | .bind('touchcancel', $.proxy(the._end, the)); 134 | 135 | return the; 136 | }, 137 | 138 | 139 | 140 | /** 141 | * 拖拽开始回调 142 | * @param {Object} e event 143 | * @return undefined 144 | * @version 1.0 145 | * 2014年7月3日18:29:40 146 | */ 147 | _start: function(eve) { 148 | if (!this.is) { 149 | var 150 | oe = eve.originalEvent, 151 | the = this, 152 | options = the.options, 153 | $element = the.$element, 154 | $handle = options.handle ? $(eve.target).closest(options.handle) : $(eve.target), 155 | $drag = options.drag ? $handle.closest(options.drag) : $element, 156 | cssPos, 157 | offset, 158 | te = oe.touches ? oe.touches[0] : eve; 159 | 160 | if (!$element.has($drag).length) $drag = $element; 161 | 162 | the.$drag = $drag; 163 | options.ondragbefore.call($drag[0], eve, the); 164 | 165 | the.zIndex = $drag.css('z-index'); 166 | the.cursor = $body.css('cursor'); 167 | the.$drag = $drag.css('z-index', options.zIndex); 168 | cssPos = $drag.css('position'); 169 | offset = $drag.offset(); 170 | 171 | if (cssPos === 'static') { 172 | $drag.css('position', 'relative'); 173 | } 174 | // 不是相对于 static 的 175 | else if (cssPos === 'fixed' || cssPos === 'absolute') { 176 | $drag.css($drag.position()); 177 | } 178 | 179 | 180 | the.pos = { 181 | x: te.pageX, 182 | y: te.pageY, 183 | l: offset.left, 184 | t: offset.top 185 | }; 186 | the.is = !0; 187 | if (the.options.cursor) $body.css('cursor', options.cursor); 188 | 189 | options.ondragstart.call($drag[0], eve, the); 190 | 191 | eve.preventDefault(); 192 | } 193 | }, 194 | 195 | 196 | 197 | 198 | /** 199 | * 拖拽移动回调 200 | * @param {Object} e event 201 | * @return undefined 202 | * @version 1.0 203 | * 2014年7月3日18:29:40 204 | */ 205 | _move: function(eve) { 206 | if (this.is) { 207 | var 208 | oe = eve.originalEvent, 209 | the = this, 210 | options = the.options, 211 | min = options.min, 212 | max = options.max, 213 | pos = the.pos, 214 | $drag = the.$drag, 215 | offset = $drag.parent(!0).offset(), 216 | minLeft, minTop, maxLeft, maxTop, 217 | to = {}, 218 | te = oe.touches ? oe.touches[0] : eve; 219 | 220 | 221 | // axis 222 | if (~options.axis.indexOf('x')) to.left = te.pageX - pos.x + pos.l; 223 | if (~options.axis.indexOf('y')) to.top = te.pageY - pos.y + pos.t; 224 | 225 | // min 226 | if (min && min.left !== udf) { 227 | if (to.left < (minLeft = min.left + offset.left)) to.left = minLeft; 228 | } 229 | if (min && min.top !== udf) { 230 | if (to.top < (minTop = min.top + offset.top)) to.top = minTop; 231 | } 232 | 233 | // max 234 | if (max && max.left !== udf) { 235 | if (to.left > (maxLeft = max.left + offset.left)) to.left = maxLeft; 236 | } 237 | if (max && max.top !== udf && to.top > max.top) { 238 | if (to.top > (maxTop = max.top + offset.top)) to.top = maxTop; 239 | } 240 | 241 | $drag.offset(to); 242 | options.ondrag.call($drag[0], eve, the); 243 | 244 | eve.preventDefault(); 245 | } 246 | }, 247 | 248 | 249 | 250 | /** 251 | * 拖拽结束回调 252 | * @param {Object} e event 253 | * @return undefined 254 | * @version 1.0 255 | * 2014年7月3日18:29:40 256 | */ 257 | _end: function(eve) { 258 | if (this.is) { 259 | var the = this, 260 | $drag = the.$drag; 261 | 262 | the.is = !1; 263 | if (the.options.cursor) $body.css('cursor', the.cursor); 264 | $drag.css('z-index', the.zIndex); 265 | the.options.ondragend.call($drag[0], eve, the); 266 | eve.preventDefault(); 267 | } 268 | }, 269 | 270 | 271 | 272 | /** 273 | * 设置或获取选项 274 | * @param {String/Object} key 键或键值对 275 | * @param {*} val 值 276 | * @return 获取时返回键值，否则返回this 277 | * @version 1.0 278 | * 2014年7月3日20:08:16 279 | */ 280 | options: function(key, val) { 281 | // get 282 | if ($.type(key) === 'string' && val === udf) return this.options[key]; 283 | 284 | var map = {}; 285 | if ($.type(key) === 'object') map = key; 286 | else map[key] = val; 287 | 288 | this.options = $.extend(this.options, map); 289 | } 290 | }; 291 | 292 | }(window.jQuery)); --------------------------------------------------------------------------------