├── .editorconfig ├── .eslintrc ├── .github └── FUNDING.yml ├── .gitignore ├── .stylelintrc ├── .travis.yml ├── LICENSE ├── README.md ├── bower.json ├── dist ├── jquery.magnify.css ├── jquery.magnify.js ├── jquery.magnify.min.css └── jquery.magnify.min.js ├── docs ├── css │ ├── docs.css │ ├── jquery.magnify.css │ ├── magnify-bezelless-theme.css │ ├── magnify-white-theme.css │ ├── snack-helper.css │ └── snack.css ├── index.html └── js │ ├── jquery.magnify.js │ └── vendor │ ├── jquery-1.12.4.min.js │ └── modernizr-2.8.3.min.js ├── examples ├── bezel-less-style.html ├── custom-toolbar.html ├── display-in-modal.html ├── modal-init-maximized.html └── standard-with-scroll.html ├── package-lock.json ├── package.json └── src ├── js ├── core.js ├── draggable.js ├── intro.js ├── movable.js ├── outro.js ├── resizable.js ├── rotate.js └── utilities.js └── sass ├── _fullscreen.scss ├── _general.scss ├── _helpers.scss ├── _loader.scss ├── _resizable.scss └── magnify.scss /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | end_of_line = lf 6 | indent_size = 2 7 | indent_style = space 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "env": { 4 | "browser": true, 5 | "commonjs": true, 6 | "es6": true, 7 | "jquery": true 8 | }, 9 | "ignorePatterns": [ 10 | "dist", 11 | "docs" 12 | ], 13 | "extends": "eslint:recommended", 14 | "rules": { 15 | "quotes": [ 16 | "error", 17 | "single" 18 | ], 19 | "semi": [ 20 | "error", 21 | "always" 22 | ], 23 | "no-extra-boolean-cast": "warn", 24 | "no-unused-vars": "warn" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: magnify 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | bower_components/ 3 | *.log 4 | 5 | build/ 6 | test/ 7 | -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "ignoreFiles": [ 3 | "dist/**", 4 | "docs/**" 5 | ], 6 | "extends": [ 7 | "stylelint-config-standard", 8 | "stylelint-config-recommended-scss" 9 | ], 10 | "rules": { 11 | "number-leading-zero": "never", 12 | "no-descending-specificity": null 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 14 4 | - 12 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Zongbin 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | > [!WARNING] 2 | > This repository will be maintained just in small iteration. The plugin is easy to use, but its customization can be troublesome. To improve the plugin's flexibility, I made another repository [PhotoViewer](https://github.com/nzbin/photoviewer) which is the enhanced version of Magnify. 3 | 4 | # Magnify 5 | 6 | [![Travis](https://img.shields.io/travis/nzbin/magnify.svg)](https://travis-ci.org/nzbin/magnify) 7 | [![npm](https://img.shields.io/npm/v/jquery.magnify.svg)](https://www.npmjs.com/package/jquery.magnify) 8 | [![Bower](https://img.shields.io/bower/v/jquery.magnify)](https://github.com/nzbin/magnify) 9 | [![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/nzbin/magnify/blob/master/LICENSE) 10 | [![Financial Contributors on Open Collective](https://opencollective.com/magnify/all/badge.svg?label=financial+contributors)](https://opencollective.com/magnify) 11 | 12 | Magnify is a jQuery plugin to view images just like in windows. 13 | 14 | [[ website ]](https://nzbin.github.io/magnify/) 15 | 16 | ## Features 17 | 18 | - Modal draggable 19 | - Modal resizable 20 | - Modal maximizable 21 | - Image movable 22 | - Image zoomable 23 | - Image rotatable 24 | - Keyboard control 25 | - Fullscreen showing 26 | - Multiple instances 27 | - Browser support IE7+ 28 | - RTL support 29 | 30 | ## Installation 31 | 32 | You can install the plugin via npm 33 | 34 | ```sh 35 | $ npm install jquery.magnify --save 36 | ``` 37 | 38 | or via bower 39 | 40 | ```sh 41 | $ bower install jquery.magnify --save 42 | ``` 43 | 44 | ## Usage 45 | 46 | ### 1.Include files 47 | 48 | The usage of magnify is very simple. 49 | 50 | ```html 51 | 52 | 53 | 54 | 55 | ``` 56 | 57 | The icons in magnify use svg default, you can customize them in options. 58 | 59 | ### 2.Html structure 60 | 61 | The default structure as below: 62 | 63 | ```html 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | ``` 74 | 75 | or 76 | 77 | ```html 78 | 79 | 80 | 81 | ``` 82 | 83 | All structures above have optional attributes as below: 84 | 85 | - Add a `data-src` attribute to link big image if you do not want to use a ` ` tag. If you use it in a `` tag, it will override the image link in `href` attribute. 86 | - Add a `data-caption` attribute if you want to show a caption. If you are not using this attribute, it will show the image name in the url when you set the `title` option `true`. 87 | - Add a `data-group` attribute if you want to set the images in groups. 88 | 89 | ### 3.Call plugin 90 | 91 | If you add a `data-magnify` attribute, you can write none of js. 92 | 93 | Of course, you can use selector to call the plugin as following code: 94 | 95 | ```js 96 | $("[data-magnify=gallery]").magnify(); 97 | ``` 98 | 99 | ## Options 100 | 101 | - **draggable** `true` 102 | > If ture, it allow modal dragging. 103 | - **resizable** `true` 104 | > If ture, it allow modal resizing. 105 | - **movable** `true` 106 | > If ture, it allow image moving. 107 | - **keyboard** `true` 108 | 109 | > If ture, it allow keyboard control. It is similar to Windows photo viewer. 110 | 111 | - ← prev image 112 | - → next image 113 | - + zoom in image 114 | - - zoom out image 115 | - Ctrl + Alt + 0 image autual size 116 | - Ctrl + , rotate image left 117 | - Ctrl + . rotate image right 118 | - Q close the Magnify modal 119 | 120 | - **title** `true` 121 | 122 | > If ture, it will show image title on header. 123 | 124 | - **fixedModalSize** `false` 125 | 126 | > If false, the modal init size will fit to image size. 127 | > 128 | > If true, the modal init size will be set with `modalWidth` and `modalHeight`. 129 | 130 | - **modalWidth** `320` 131 | 132 | > The modal min width. 133 | 134 | - **modalHeight** `320` 135 | 136 | > The modal min height. 137 | 138 | - **gapThreshold** `0.02` 139 | 140 | > There will have a gap if modal too big to beyond the browser. 141 | 142 | - **ratioThreshold** `0.01` 143 | 144 | > Image zoom ratio threshold. 145 | 146 | - **minRatio** `0.05` (5%) 147 | 148 | > The min ratio to show image. 149 | 150 | - **maxRatio** `16` (1600%) 151 | 152 | > The max ratio to show image. 153 | 154 | - **icons** 155 | 156 | > You can customize the icons in following key. 157 | 158 | - **minimize** `svg` 159 | 160 | - **maximize** `svg` 161 | 162 | - **close** `svg` 163 | 164 | - **zoomIn** `svg` 165 | 166 | - **zoomOut** `svg` 167 | 168 | - **prev** `svg` 169 | 170 | - **next** `svg` 171 | 172 | - **fullscreen** `svg` 173 | 174 | - **actualSize** `svg` 175 | 176 | - **rotateLeft** `svg` 177 | 178 | - **rotateRight** `svg` 179 | 180 | - **headerToolbar** `['maximize','close']` 181 | 182 | > The buttons display in header toolbar. 183 | 184 | - **footerToolbar** `['zoomIn','zoomOut','prev','fullscreen','next','actualSize','rotateRight']` 185 | 186 | > The buttons display in footer toolbar. 187 | 188 | - **fixedContent** `true` 189 | 190 | > If true, the content will be fixed. 191 | 192 | - **i18n** 193 | 194 | > You can customize the buttons title in following key. 195 | 196 | - **minimize** `minimize` 197 | 198 | - **maximize** `maximize` 199 | 200 | - **close** `close` 201 | 202 | - **zoomIn** `zoom-in` 203 | 204 | - **zoomOut** `zoom-out` 205 | 206 | - **prev** `prev` 207 | 208 | - **next** `next` 209 | 210 | - **fullscreen** `fullscreen` 211 | 212 | - **actualSize** `actual-size` 213 | 214 | - **rotateLeft** `rotate-left` 215 | 216 | - **rotateRight** `rotate-right` 217 | 218 | - **initMaximized** `false` 219 | 220 | > If false, the modal size will be set of image size or what you set. 221 | > 222 | > If true, the modal size will be set maximized when init. 223 | 224 | - **multiInstances** `true` 225 | 226 | > If true, it allow multiple instances. 227 | 228 | - **initEvent** `click` 229 | 230 | > The event to init plugin. Another value is `dblclick`. 231 | 232 | - **initAnimation** `true` 233 | 234 | > If false, it will not have animation at plugin's init. 235 | 236 | - **fixedModalPos** `false` 237 | 238 | > if true, the modal position will be fixed when change images. 239 | 240 | - **zIndex** `1090` 241 | 242 | > The modal style of z-index, it is useful with multiple instances. 243 | 244 | - **dragHandle** ` ` 245 | 246 | > The handle of draggable. 247 | 248 | - **progressiveLoading** `true` 249 | 250 | > If true, the image will be rendered progressively. 251 | 252 | - **customButtons** `{}` 253 | 254 | ```js 255 | $("[data-magnify=gallery]").magnify({ 256 | footerToolbar: [..."myCustomButton"], 257 | customButtons: { 258 | myCustomButton: { 259 | text: "custom!", 260 | title: "custom!", 261 | click: function (context, e) { 262 | alert("clicked the custom button!"); 263 | }, 264 | }, 265 | }, 266 | }); 267 | ``` 268 | 269 | Each `customButton` entry accepts the following properties: 270 | 271 | - `text` - the text to be display on the button itself. 272 | 273 | - `title` - the title to be display when hover the button. 274 | 275 | - `click` - a callback function that is called when the button is clicked. 276 | 277 | ## Events 278 | 279 | You can define callbacks in `callbacks` option. In each callback you can get the `Magnify` instance with `this` or `context`. 280 | 281 | ```js 282 | $("[data-magnify=gallery]").magnify({ 283 | callbacks: { 284 | beforeOpen: function (context) { 285 | // Will fire before modal is opened 286 | }, 287 | opened: function (context) { 288 | // Will fire after modal is opened 289 | }, 290 | beforeClose: function (context) { 291 | // Will fire before modal is closed 292 | }, 293 | closed: function (context) { 294 | // Will fire after modal is closed 295 | }, 296 | beforeChange: function (context, index) { 297 | // Will fire before image is changed 298 | // The argument index is the current image index of image group 299 | }, 300 | changed: function (context, index) { 301 | // Will fire after image is changed 302 | // The argument index is the next image index of image group 303 | }, 304 | }, 305 | }); 306 | ``` 307 | 308 | ## Contributors 309 | 310 | ### Code Contributors 311 | 312 | This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)]. 313 | 314 | 315 | ### Financial Contributors 316 | 317 | Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/magnify/contribute)] 318 | 319 | #### Individuals 320 | 321 | 322 | 323 | #### Organizations 324 | 325 | Support this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/magnify/contribute)] 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | 338 | ## License 339 | 340 | MIT License 341 | 342 | The above copyright notice and this permission notice shall be included in all 343 | copies or substantial portions of the Software. 344 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jquery.magnify", 3 | "description": "A jQuery plugin to view images just like in Windows", 4 | "main": "jquery.magnify.js", 5 | "authors": [ 6 | "nzbin" 7 | ], 8 | "license": "MIT", 9 | "keywords": [ 10 | "magnify", 11 | "lightbox", 12 | "responsive", 13 | "jquery", 14 | "modal", 15 | "draggable", 16 | "resizable", 17 | "zoomable", 18 | "image-gallery", 19 | "photoviewer" 20 | ], 21 | "homepage": "https://github.com/nzbin/magnify#readme", 22 | "ignore": [ 23 | "**/.*", 24 | "node_modules", 25 | "bower_components", 26 | "test", 27 | "tests" 28 | ] 29 | } 30 | -------------------------------------------------------------------------------- /dist/jquery.magnify.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * __ __ _ ____ _ _ ___ _______ __ 3 | * | \/ | / \ / ___| \ | |_ _| ___\ \ / / 4 | * | |\/| | / _ \| | _| \| || || |_ \ V / 5 | * | | | |/ ___ \ |_| | |\ || || _| | | 6 | * |_| |_/_/ \_\____|_| \_|___|_| |_| 7 | * 8 | * jquery.magnify - v1.6.3 9 | * A jQuery plugin to view images just like in windows 10 | * https://github.com/nzbin/magnify#readme 11 | * 12 | * Copyright (c) 2017 nzbin 13 | * Released under the MIT License 14 | */ 15 | .magnify-modal { 16 | position: absolute; 17 | z-index: 1090; 18 | width: 320px; 19 | height: 320px; 20 | background-color: #111; 21 | background-color: rgba(0, 0, 0, 0.84); 22 | box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.32); 23 | cursor: default; 24 | outline: none; 25 | color: #ccc; 26 | } 27 | 28 | .magnify-maximize { 29 | position: fixed; 30 | top: 0; 31 | left: 0; 32 | width: 100%; 33 | height: 100%; 34 | } 35 | 36 | .magnify-toolbar { 37 | font-size: 0; 38 | } 39 | 40 | .magnify-header { 41 | position: relative; 42 | z-index: 2; 43 | height: 40px; 44 | } 45 | 46 | .magnify-header .magnify-toolbar { 47 | float: right; 48 | } 49 | 50 | [dir='rtl'] .magnify-header .magnify-toolbar { 51 | float: left; 52 | } 53 | 54 | .magnify-title { 55 | padding: 13px 10px; 56 | font-size: 14px; 57 | line-height: 1; 58 | white-space: nowrap; 59 | text-overflow: ellipsis; 60 | -webkit-user-select: none; 61 | -moz-user-select: none; 62 | -ms-user-select: none; 63 | user-select: none; 64 | overflow: hidden; 65 | } 66 | 67 | .magnify-stage { 68 | position: absolute; 69 | top: 40px; 70 | right: 10px; 71 | bottom: 40px; 72 | left: 10px; 73 | z-index: 1; 74 | border: 1px solid rgba(255, 255, 255, 0.64); 75 | overflow: hidden; 76 | } 77 | 78 | .magnify-stage.stage-ready { 79 | text-align: center; 80 | font-size: 0; 81 | } 82 | 83 | .magnify-stage.stage-ready::before { 84 | content: ''; 85 | display: inline-block; 86 | height: 100%; 87 | vertical-align: middle; 88 | overflow: hidden; 89 | } 90 | 91 | .magnify-image { 92 | position: absolute; 93 | display: inline-block; 94 | } 95 | 96 | .magnify-image.image-ready { 97 | position: static; 98 | max-width: 100%; 99 | max-height: 100%; 100 | vertical-align: middle; 101 | } 102 | 103 | .magnify-footer { 104 | position: absolute; 105 | bottom: 0; 106 | z-index: 2; 107 | width: 100%; 108 | height: 40px; 109 | text-align: center; 110 | } 111 | 112 | .magnify-footer .magnify-toolbar { 113 | display: inline-block; 114 | } 115 | 116 | .magnify-button { 117 | display: inline-block; 118 | min-width: 40px; 119 | height: 40px; 120 | box-sizing: border-box; 121 | margin: 0; 122 | font-size: 14px; 123 | line-height: 1; 124 | text-align: center; 125 | background: none; 126 | border-width: 0; 127 | border-radius: 0; 128 | color: inherit; 129 | cursor: pointer; 130 | outline: none; 131 | } 132 | 133 | .magnify-button:hover { 134 | color: #fff; 135 | } 136 | 137 | .magnify-button:focus { 138 | background-color: rgba(255, 255, 255, 0.08); 139 | } 140 | 141 | .magnify-button svg { 142 | display: inline-block; 143 | font-size: inherit; 144 | width: 1em; 145 | height: 1em; 146 | overflow: visible; 147 | vertical-align: -.125em; 148 | } 149 | 150 | .magnify-button-close:hover { 151 | background-color: #ff4545; 152 | } 153 | 154 | .magnify-button-maximize:hover { 155 | background-color: #525252; 156 | } 157 | 158 | .magnify-button-minimize:hover { 159 | background-color: #525252; 160 | } 161 | 162 | .magnify-resizable-handle { 163 | position: absolute; 164 | z-index: 10; 165 | } 166 | 167 | .magnify-resizable-handle-e { 168 | top: 0; 169 | right: -5px; 170 | bottom: 0; 171 | left: auto; 172 | width: 10px; 173 | cursor: e-resize; 174 | } 175 | 176 | .magnify-resizable-handle-s { 177 | top: auto; 178 | right: 0; 179 | bottom: -5px; 180 | left: 0; 181 | height: 10px; 182 | cursor: s-resize; 183 | } 184 | 185 | .magnify-resizable-handle-w { 186 | top: 0; 187 | right: auto; 188 | bottom: 0; 189 | left: -5px; 190 | width: 10px; 191 | cursor: w-resize; 192 | } 193 | 194 | .magnify-resizable-handle-n { 195 | top: -5px; 196 | right: 0; 197 | bottom: auto; 198 | left: 0; 199 | height: 10px; 200 | cursor: n-resize; 201 | } 202 | 203 | .magnify-resizable-handle-se { 204 | top: auto; 205 | right: -5px; 206 | bottom: -5px; 207 | left: auto; 208 | width: 10px; 209 | height: 10px; 210 | cursor: se-resize; 211 | } 212 | 213 | .magnify-resizable-handle-sw { 214 | top: auto; 215 | right: auto; 216 | bottom: -5px; 217 | left: -5px; 218 | width: 10px; 219 | height: 10px; 220 | cursor: sw-resize; 221 | } 222 | 223 | .magnify-resizable-handle-nw { 224 | top: -5px; 225 | right: auto; 226 | bottom: auto; 227 | left: -5px; 228 | width: 10px; 229 | height: 10px; 230 | cursor: nw-resize; 231 | } 232 | 233 | .magnify-resizable-handle-ne { 234 | top: -5px; 235 | right: -5px; 236 | bottom: auto; 237 | left: auto; 238 | width: 10px; 239 | height: 10px; 240 | cursor: ne-resize; 241 | } 242 | 243 | :-webkit-full-screen { 244 | top: 0 !important; 245 | left: 0 !important; 246 | width: 100% !important; 247 | height: 100% !important; 248 | } 249 | 250 | :-webkit-full-screen .magnify-header, 251 | :-webkit-full-screen .magnify-footer, 252 | :-webkit-full-screen .magnify-resizable-handle { 253 | display: none; 254 | } 255 | 256 | :-webkit-full-screen .magnify-stage { 257 | top: 0; 258 | right: 0; 259 | bottom: 0; 260 | left: 0; 261 | border-width: 0; 262 | background-color: #000; 263 | } 264 | 265 | :-moz-full-screen { 266 | top: 0 !important; 267 | left: 0 !important; 268 | width: 100% !important; 269 | height: 100% !important; 270 | } 271 | 272 | :-moz-full-screen .magnify-header, 273 | :-moz-full-screen .magnify-footer, 274 | :-moz-full-screen .magnify-resizable-handle { 275 | display: none; 276 | } 277 | 278 | :-moz-full-screen .magnify-stage { 279 | top: 0; 280 | right: 0; 281 | bottom: 0; 282 | left: 0; 283 | border-width: 0; 284 | background-color: #000; 285 | } 286 | 287 | :-ms-fullscreen { 288 | top: 0 !important; 289 | left: 0 !important; 290 | width: 100% !important; 291 | height: 100% !important; 292 | } 293 | 294 | :-ms-fullscreen .magnify-header, 295 | :-ms-fullscreen .magnify-footer, 296 | :-ms-fullscreen .magnify-resizable-handle { 297 | display: none; 298 | } 299 | 300 | :-ms-fullscreen .magnify-stage { 301 | top: 0; 302 | right: 0; 303 | bottom: 0; 304 | left: 0; 305 | border-width: 0; 306 | background-color: #000; 307 | } 308 | 309 | :full-screen { 310 | top: 0 !important; 311 | left: 0 !important; 312 | width: 100% !important; 313 | height: 100% !important; 314 | } 315 | 316 | :full-screen .magnify-header, 317 | :full-screen .magnify-footer, 318 | :full-screen .magnify-resizable-handle { 319 | display: none; 320 | } 321 | 322 | :full-screen .magnify-stage { 323 | top: 0; 324 | right: 0; 325 | bottom: 0; 326 | left: 0; 327 | border-width: 0; 328 | background-color: #000; 329 | } 330 | 331 | :-webkit-full-screen { 332 | top: 0 !important; 333 | left: 0 !important; 334 | width: 100% !important; 335 | height: 100% !important; 336 | } 337 | 338 | :-ms-fullscreen { 339 | top: 0 !important; 340 | left: 0 !important; 341 | width: 100% !important; 342 | height: 100% !important; 343 | } 344 | 345 | :fullscreen { 346 | top: 0 !important; 347 | left: 0 !important; 348 | width: 100% !important; 349 | height: 100% !important; 350 | } 351 | 352 | :-webkit-full-screen .magnify-header, :-webkit-full-screen .magnify-footer, :-webkit-full-screen .magnify-resizable-handle { 353 | display: none; 354 | } 355 | 356 | :-ms-fullscreen .magnify-header, :-ms-fullscreen .magnify-footer, :-ms-fullscreen .magnify-resizable-handle { 357 | display: none; 358 | } 359 | 360 | :fullscreen .magnify-header, 361 | :fullscreen .magnify-footer, 362 | :fullscreen .magnify-resizable-handle { 363 | display: none; 364 | } 365 | 366 | :-webkit-full-screen .magnify-stage { 367 | top: 0; 368 | right: 0; 369 | bottom: 0; 370 | left: 0; 371 | border-width: 0; 372 | background-color: #000; 373 | } 374 | 375 | :-ms-fullscreen .magnify-stage { 376 | top: 0; 377 | right: 0; 378 | bottom: 0; 379 | left: 0; 380 | border-width: 0; 381 | background-color: #000; 382 | } 383 | 384 | :fullscreen .magnify-stage { 385 | top: 0; 386 | right: 0; 387 | bottom: 0; 388 | left: 0; 389 | border-width: 0; 390 | background-color: #000; 391 | } 392 | 393 | ::-webkit-backdrop { 394 | background-color: #000; 395 | } 396 | 397 | ::backdrop { 398 | background-color: #000; 399 | } 400 | 401 | ::-ms-backdrop { 402 | background-color: #000; 403 | } 404 | 405 | .is-grab { 406 | cursor: move; 407 | cursor: -webkit-grab; 408 | cursor: grab; 409 | } 410 | 411 | .is-grabbing { 412 | cursor: move; 413 | cursor: -webkit-grabbing; 414 | cursor: grabbing; 415 | } 416 | 417 | .magnify-loader { 418 | position: absolute; 419 | top: 0; 420 | left: 0; 421 | right: 0; 422 | bottom: 0; 423 | z-index: 2; 424 | text-align: center; 425 | background-color: rgba(0, 0, 0, 0.3); 426 | color: #333; 427 | } 428 | 429 | .magnify-loader::before { 430 | content: ''; 431 | display: inline-block; 432 | position: relative; 433 | width: 36px; 434 | height: 36px; 435 | box-sizing: border-box; 436 | border-width: 5px; 437 | border-style: solid; 438 | border-color: rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.5) rgba(255, 255, 255, 0.5); 439 | border-radius: 100%; 440 | vertical-align: middle; 441 | -webkit-animation: magnifyLoading 1s infinite linear; 442 | animation: magnifyLoading 1s infinite linear; 443 | } 444 | 445 | .magnify-loader::after { 446 | content: ''; 447 | display: inline-block; 448 | width: 0; 449 | height: 100%; 450 | vertical-align: middle; 451 | overflow: hidden; 452 | } 453 | 454 | @-webkit-keyframes magnifyLoading { 455 | 0% { 456 | transform: rotateZ(0deg) translate3d(0, 0, 0); 457 | } 458 | 100% { 459 | transform: rotateZ(360deg) translate3d(0, 0, 0); 460 | } 461 | } 462 | 463 | @keyframes magnifyLoading { 464 | 0% { 465 | transform: rotateZ(0deg) translate3d(0, 0, 0); 466 | } 467 | 100% { 468 | transform: rotateZ(360deg) translate3d(0, 0, 0); 469 | } 470 | } 471 | -------------------------------------------------------------------------------- /dist/jquery.magnify.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * __ __ _ ____ _ _ ___ _______ __ 3 | * | \/ | / \ / ___| \ | |_ _| ___\ \ / / 4 | * | |\/| | / _ \| | _| \| || || |_ \ V / 5 | * | | | |/ ___ \ |_| | |\ || || _| | | 6 | * |_| |_/_/ \_\____|_| \_|___|_| |_| 7 | * 8 | * jquery.magnify - v1.6.3 9 | * A jQuery plugin to view images just like in windows 10 | * https://github.com/nzbin/magnify#readme 11 | * 12 | * Copyright (c) 2017 nzbin 13 | * Released under the MIT License 14 | */.magnify-modal{position:absolute;z-index:1090;width:320px;height:320px;background-color:#111;background-color:rgba(0,0,0,0.84);box-shadow:0 0 4px 1px rgba(0,0,0,0.32);cursor:default;outline:none;color:#ccc}.magnify-maximize{position:fixed;top:0;left:0;width:100%;height:100%}.magnify-toolbar{font-size:0}.magnify-header{position:relative;z-index:2;height:40px}.magnify-header .magnify-toolbar{float:right}[dir='rtl'] .magnify-header .magnify-toolbar{float:left}.magnify-title{padding:13px 10px;font-size:14px;line-height:1;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden}.magnify-stage{position:absolute;top:40px;right:10px;bottom:40px;left:10px;z-index:1;border:1px solid rgba(255,255,255,0.64);overflow:hidden}.magnify-stage.stage-ready{text-align:center;font-size:0}.magnify-stage.stage-ready::before{content:'';display:inline-block;height:100%;vertical-align:middle;overflow:hidden}.magnify-image{position:absolute;display:inline-block}.magnify-image.image-ready{position:static;max-width:100%;max-height:100%;vertical-align:middle}.magnify-footer{position:absolute;bottom:0;z-index:2;width:100%;height:40px;text-align:center}.magnify-footer .magnify-toolbar{display:inline-block}.magnify-button{display:inline-block;min-width:40px;height:40px;box-sizing:border-box;margin:0;font-size:14px;line-height:1;text-align:center;background:none;border-width:0;border-radius:0;color:inherit;cursor:pointer;outline:none}.magnify-button:hover{color:#fff}.magnify-button:focus{background-color:rgba(255,255,255,0.08)}.magnify-button svg{display:inline-block;font-size:inherit;width:1em;height:1em;overflow:visible;vertical-align:-.125em}.magnify-button-close:hover{background-color:#ff4545}.magnify-button-maximize:hover{background-color:#525252}.magnify-button-minimize:hover{background-color:#525252}.magnify-resizable-handle{position:absolute;z-index:10}.magnify-resizable-handle-e{top:0;right:-5px;bottom:0;left:auto;width:10px;cursor:e-resize}.magnify-resizable-handle-s{top:auto;right:0;bottom:-5px;left:0;height:10px;cursor:s-resize}.magnify-resizable-handle-w{top:0;right:auto;bottom:0;left:-5px;width:10px;cursor:w-resize}.magnify-resizable-handle-n{top:-5px;right:0;bottom:auto;left:0;height:10px;cursor:n-resize}.magnify-resizable-handle-se{top:auto;right:-5px;bottom:-5px;left:auto;width:10px;height:10px;cursor:se-resize}.magnify-resizable-handle-sw{top:auto;right:auto;bottom:-5px;left:-5px;width:10px;height:10px;cursor:sw-resize}.magnify-resizable-handle-nw{top:-5px;right:auto;bottom:auto;left:-5px;width:10px;height:10px;cursor:nw-resize}.magnify-resizable-handle-ne{top:-5px;right:-5px;bottom:auto;left:auto;width:10px;height:10px;cursor:ne-resize}:-webkit-full-screen{top:0 !important;left:0 !important;width:100% !important;height:100% !important}:-webkit-full-screen .magnify-header,:-webkit-full-screen .magnify-footer,:-webkit-full-screen .magnify-resizable-handle{display:none}:-webkit-full-screen .magnify-stage{top:0;right:0;bottom:0;left:0;border-width:0;background-color:#000}:-moz-full-screen{top:0 !important;left:0 !important;width:100% !important;height:100% !important}:-moz-full-screen .magnify-header,:-moz-full-screen .magnify-footer,:-moz-full-screen .magnify-resizable-handle{display:none}:-moz-full-screen .magnify-stage{top:0;right:0;bottom:0;left:0;border-width:0;background-color:#000}:-ms-fullscreen{top:0 !important;left:0 !important;width:100% !important;height:100% !important}:-ms-fullscreen .magnify-header,:-ms-fullscreen .magnify-footer,:-ms-fullscreen .magnify-resizable-handle{display:none}:-ms-fullscreen .magnify-stage{top:0;right:0;bottom:0;left:0;border-width:0;background-color:#000}:full-screen{top:0 !important;left:0 !important;width:100% !important;height:100% !important}:full-screen .magnify-header,:full-screen .magnify-footer,:full-screen .magnify-resizable-handle{display:none}:full-screen .magnify-stage{top:0;right:0;bottom:0;left:0;border-width:0;background-color:#000}:-webkit-full-screen{top:0 !important;left:0 !important;width:100% !important;height:100% !important}:-ms-fullscreen{top:0 !important;left:0 !important;width:100% !important;height:100% !important}:fullscreen{top:0 !important;left:0 !important;width:100% !important;height:100% !important}:-webkit-full-screen .magnify-header, :-webkit-full-screen .magnify-footer, :-webkit-full-screen .magnify-resizable-handle{display:none}:-ms-fullscreen .magnify-header, :-ms-fullscreen .magnify-footer, :-ms-fullscreen .magnify-resizable-handle{display:none}:fullscreen .magnify-header,:fullscreen .magnify-footer,:fullscreen .magnify-resizable-handle{display:none}:-webkit-full-screen .magnify-stage{top:0;right:0;bottom:0;left:0;border-width:0;background-color:#000}:-ms-fullscreen .magnify-stage{top:0;right:0;bottom:0;left:0;border-width:0;background-color:#000}:fullscreen .magnify-stage{top:0;right:0;bottom:0;left:0;border-width:0;background-color:#000}::-webkit-backdrop{background-color:#000}::backdrop{background-color:#000}::-ms-backdrop{background-color:#000}.is-grab{cursor:move;cursor:-webkit-grab;cursor:grab}.is-grabbing{cursor:move;cursor:-webkit-grabbing;cursor:grabbing}.magnify-loader{position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;text-align:center;background-color:rgba(0,0,0,0.3);color:#333}.magnify-loader::before{content:'';display:inline-block;position:relative;width:36px;height:36px;box-sizing:border-box;border-width:5px;border-style:solid;border-color:rgba(0,0,0,0.5) rgba(0,0,0,0.5) rgba(0,0,0,0.5) rgba(255,255,255,0.5);border-radius:100%;vertical-align:middle;-webkit-animation:magnifyLoading 1s infinite linear;animation:magnifyLoading 1s infinite linear}.magnify-loader::after{content:'';display:inline-block;width:0;height:100%;vertical-align:middle;overflow:hidden}@-webkit-keyframes magnifyLoading{0%{transform:rotateZ(0deg) translate3d(0, 0, 0)}100%{transform:rotateZ(360deg) translate3d(0, 0, 0)}}@keyframes magnifyLoading{0%{transform:rotateZ(0deg) translate3d(0, 0, 0)}100%{transform:rotateZ(360deg) translate3d(0, 0, 0)}} 15 | -------------------------------------------------------------------------------- /dist/jquery.magnify.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * __ __ _ ____ _ _ ___ _______ __ 3 | * | \/ | / \ / ___| \ | |_ _| ___\ \ / / 4 | * | |\/| | / _ \| | _| \| || || |_ \ V / 5 | * | | | |/ ___ \ |_| | |\ || || _| | | 6 | * |_| |_/_/ \_\____|_| \_|___|_| |_| 7 | * 8 | * jquery.magnify - v1.6.3 9 | * A jQuery plugin to view images just like in windows 10 | * https://github.com/nzbin/magnify#readme 11 | * 12 | * Copyright (c) 2017 nzbin 13 | * Released under the MIT License 14 | */ 15 | !function(t){"function"==typeof define&&define.amd?define(["jquery"],t):"object"==typeof exports?t(require("jquery")):t(jQuery)}(function(C){"use strict";function o(t){return C(t).attr("data-src")?C(t).attr("data-src"):C(t).attr("href")}function S(t,i,e,a){var s=a?t.h:t.w,t=a?t.w:t.h;(t>i.h||s>i.w)&&e.addClass("is-grab"),t<=i.h&&s<=i.w&&e.removeClass("is-grab")}function t(){return"ontouchstart"in window||window.DocumentTouch&&document instanceof window.DocumentTouch}function I(){return"Microsoft Internet Explorer"==navigator.appName&&0 ',maximize:' ',close:' ',zoomIn:' ',zoomOut:' ',prev:' ',next:' ',fullscreen:' ',actualSize:' ',rotateLeft:' ',rotateRight:' '},i18n:{minimize:"minimize",maximize:"maximize",close:"close",zoomIn:"zoom-in(+)",zoomOut:"zoom-out(-)",prev:"prev(←)",next:"next(→)",fullscreen:"fullscreen",actualSize:"actual-size(Ctrl+Alt+0)",rotateLeft:"rotate-left(Ctrl+,)",rotateRight:"rotate-right(Ctrl+.)"},multiInstances:!0,initEvent:"click",initAnimation:!0,fixedModalPos:!1,zIndex:1090,dragHandle:!1,callbacks:{beforeOpen:C.noop,opened:C.noop,beforeClose:C.noop,closed:C.noop,beforeChange:C.noop,changed:C.noop},progressiveLoading:!0,customButtons:{}},R={isMoving:!1,isResizing:!1,zIndex:r.zIndex},g=null;a.prototype={init:function(t,i){var e=o(t);this.groupName=null;var a=C(t).attr("data-group"),t=D.find('[data-group="'+a+'"]');void 0!==a?(this.groupName=a,this.getImageGroup(t,e)):this.getImageGroup(g.not("[data-group]"),e),this.open(),this.loadImage(e),i.draggable&&this.draggable(this.$magnify,this.dragHandle,".magnify-button"),i.movable&&this.movable(this.$stage,I()?".magnify-image":this.$image),i.resizable&&this.resizable(this.$magnify,this.$stage,I()?".magnify-image":this.$image,i.modalWidth,i.modalHeight)},_createBtns:function(t){var e=this,a=["minimize","maximize","close","zoomIn","zoomOut","prev","next","fullscreen","actualSize","rotateLeft","rotateRight"],s="";return C.each(t,function(t,i){0<=C.inArray(i,a)?s+='":e.options.customButtons[i]&&(s+='")}),s},_createTitle:function(){return this.options.title?'
':""},_createTemplate:function(){return'
'+this._createBtns(this.options.headerToolbar)+"
"+this._createTitle()+'
'+this._createBtns(this.options.footerToolbar)+"
"},build:function(){var t=this._createTemplate(),t=C(t);this.$magnify=t,this.$stage=t.find(".magnify-stage"),this.$title=t.find(".magnify-title"),this.$image=t.find(".magnify-image"),this.$close=t.find(".magnify-button-close"),this.$maximize=t.find(".magnify-button-maximize"),this.$minimize=t.find(".magnify-button-minimize"),this.$zoomIn=t.find(".magnify-button-zoomIn"),this.$zoomOut=t.find(".magnify-button-zoomOut"),this.$actualSize=t.find(".magnify-button-actualSize"),this.$fullscreen=t.find(".magnify-button-fullscreen"),this.$rotateLeft=t.find(".magnify-button-rotateLeft"),this.$rotateRight=t.find(".magnify-button-rotateRight"),this.$prev=t.find(".magnify-button-prev"),this.$next=t.find(".magnify-button-next"),this.$stage.addClass("stage-ready"),this.$image.addClass("image-ready"),this.$magnify.css("z-index",R.zIndex),this.options.dragHandle&&".magnify-modal"!==this.options.dragHandle?this.dragHandle=this.$magnify.find(this.options.dragHandle):this.dragHandle=this.$magnify,C("body").append(this.$magnify),this._addEvents(),this._addCustomButtonEvents()},open:function(){var t;this._triggerHook("beforeOpen",this),this.options.multiInstances||C(".magnify-modal").eq(0).remove(),!C(".magnify-modal").length&&this.options.fixedContent&&(C("html").css({overflow:"hidden"}),document.body.scrollHeight>(window.innerHeight||document.documentElement.clientHeight)&&((t=function(){var t=document.createElement("div");t.style.cssText="width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;",document.body.appendChild(t);var i=t.offsetWidth-t.clientWidth;return document.body.removeChild(t),i}())&&C("html").css({"padding-right":t}))),this.build(),this.setModalPos(this.$magnify),this.$magnify.focus(),this._triggerHook("opened",this)},close:function(t){this._triggerHook("beforeClose",this),this.$magnify.remove(),this.isOpened=!1,this.isMaximized=!1,this.isRotated=!1,this.rotateAngle=0,C(".magnify-modal").length||(this.options.fixedContent&&C("html").css({overflow:"","padding-right":""}),this.options.multiInstances&&(R.zIndex=this.options.zIndex),l.off(e+H)),this._triggerHook("closed",this)},setModalPos:function(t){var i=l.width(),e=l.height(),a=D.scrollLeft(),s=D.scrollTop(),o=this.options.modalWidth,n=this.options.modalHeight;this.options.initMaximized?(t.addClass("magnify-maximize"),t.css({width:"100%",height:"100%",left:0,top:0}),this.isOpened=!0,this.isMaximized=!0):t.css({width:o,height:n,left:(i-o)/2+a+"px",top:(e-n)/2+s+"px"})},setModalSize:function(t){var i=this,e=l.width(),a=l.height(),s=D.scrollLeft(),o=D.scrollTop(),n={left:this.$stage.css("left"),right:this.$stage.css("right"),top:this.$stage.css("top"),bottom:this.$stage.css("bottom"),borderLeft:this.$stage.css("border-left-width"),borderRight:this.$stage.css("border-right-width"),borderTop:this.$stage.css("border-top-width"),borderBottom:this.$stage.css("border-bottom-width")},h=t.width+parseFloat(n.left)+parseFloat(n.right)+parseFloat(n.borderLeft)+parseFloat(n.borderRight),r=t.height+parseFloat(n.top)+parseFloat(n.bottom)+parseFloat(n.borderTop)+parseFloat(n.borderBottom),n=(0'),this.$stage.addClass("stage-ready"),this.$image.addClass("image-ready"),this.options.initAnimation&&!this.options.progressiveLoading&&this.$image.hide(),I()?this.$stage.html(''):this.$image.attr("src",t),a=t,s=function(t){h.img=t,h.imageData={originalWidth:t.width,originalHeight:t.height},h.isMaximized||h.isOpened&&h.options.fixedModalPos?h.setImageSize(t):h.setModalSize(t),i&&i.call()},o=function(){h.$magnify.find(".magnify-loader").remove(),e&&e.call()},(n=new Image).onload=function(){s(n)},n.onerror=function(){o(n)},n.src=a,this.options.title&&this.setImageTitle(t)},getImageGroup:function(t,a){var s=this;s.groupData=[],C(t).each(function(t,i){var e=o(this);s.groupData.push({src:e,caption:C(this).attr("data-caption")}),a===e&&(s.groupIndex=t)})},setImageTitle:function(t){t=this.groupData[this.groupIndex].caption||t.replace(/^.*?\/*([^/?]*)\.[a-z]+(\?.+|$)/gi,"$1");this.$title.html(t)},jump:function(t){this._triggerHook("beforeChange",[this,this.groupIndex]),this.groupIndex=this.groupIndex+t,this.jumpTo(this.groupIndex)},jumpTo:function(t){var i=this;0<=(t%=this.groupData.length)?t%=this.groupData.length:t<0&&(t=(this.groupData.length+t)%this.groupData.length),this.groupIndex=t,this.loadImage(this.groupData[t].src,function(){i._triggerHook("changed",[i,t])},function(){i._triggerHook("changed",[i,t])})},wheel:function(t){t.preventDefault();var i=1;t.originalEvent.deltaY?i=0this.options.maxRatio||t'),i=C('
'),e=C('
'),a=C('
'),s=C('
'),o=C('
'),n=C('
'),h=C('
'),r={e:t,w:i,s:e,n:a,se:s,sw:o,ne:n,nw:h};C(g).append(t,i,e,a,s,o,n,h);var l,u=!1,v=0,_=0,y={w:0,h:0,l:0,t:0},x={w:0,h:0,l:0,t:0},w=0,b=0,z=0,$="",M=function(t){(t=t||window.event).preventDefault();var i,e,a,s,o,n,h,r,l=I()?C(c).find(m):C(m);u&&!f.isMaximized&&(i="touchmove"===t.type?t.originalEvent.targetTouches[0].pageX:t.clientX,e="touchmove"===t.type?t.originalEvent.targetTouches[0].pageY:t.clientY,o=$,h=s=e-_,r=-(n=a=i-v)+y.w>d?n+y.l:y.l+y.w-d,t=-h+y.h>p?h+y.t:y.t+y.h-p,e={e:{width:Math.max(n+y.w,d)+"px"},s:{height:Math.max(h+y.h,p)+"px"},se:{width:Math.max(n+y.w,d)+"px",height:Math.max(h+y.h,p)+"px"},w:{width:Math.max(-n+y.w,d)+"px",left:r+"px"},n:{height:Math.max(-h+y.h,p)+"px",top:t+"px"},nw:{width:Math.max(-n+y.w,d)+"px",height:Math.max(-h+y.h,p)+"px",top:t+"px",left:r+"px"},ne:{width:Math.max(n+y.w,d)+"px",height:Math.max(-h+y.h,p)+"px",top:t+"px"},sw:{width:Math.max(-n+y.w,d)+"px",height:Math.max(h+y.h,p)+"px",left:r+"px"}}[o],C(g).css(e),i=$,t=a,n=s,h=I()?C(c).find(m):C(m),r=I()?h.position().left+w:h.position().left,o=I()?h.position().top-w:h.position().top,e=t+y.w>d?x.w-b+t-w:d-(y.w-x.w)-b-w,a=n+y.h>p?x.h-z+n+w:p-(y.h-x.h)-z+w,s=-t+y.w>d?x.w-b-t-w:d-(y.w-x.w)-b-w,h=-n+y.h>p?x.h-z-n+w:p-(y.h-x.h)-z+w,t=(0this._parameters.duration;e&&!this._parameters.animatedGif?clearTimeout(this._timer):((this._canvas||this._vimage||this._img)&&(i=this._parameters.easing(0,i-this._animateStartTime,this._animateStartAngle,this._parameters.animateTo-this._animateStartAngle,this._parameters.duration),this._rotate(~~(10*i)/10)),this._parameters.step&&this._parameters.step(this._angle),(t=this)._timer=setTimeout(function(){t._animate.call(t)},10)),this._parameters.callback&&e&&(this._angle=this._parameters.animateTo,this._rotate(this._angle),this._parameters.callback.call(this._rootObj))},_rotate:(df=Math.PI/180,IE?function(t){this._angle=t,this._container.style.rotation=t%360+"deg",this._vimage.style.top=-(this._rotationCenterY-this._imgHeight/2)+"px",this._vimage.style.left=-(this._rotationCenterX-this._imgWidth/2)+"px",this._container.style.top=this._rotationCenterY-this._imgHeight/2+"px",this._container.style.left=this._rotationCenterX-this._imgWidth/2+"px"}:supportedCSS?function(t){this._angle=t,this._img.style[supportedCSS]="rotate("+t%360+"deg)",this._img.style[supportedCSSOrigin]=this._parameters.center.join(" ")}:function(t){t=(this._angle=t)%360*df,this._canvas.width=this._width,this._canvas.height=this._height,this._cnv.translate(this._imgWidth*this._aspectW,this._imgHeight*this._aspectH),this._cnv.translate(this._rotationCenterX,this._rotationCenterY),this._cnv.rotate(t),this._cnv.translate(-this._rotationCenterX,-this._rotationCenterY),this._cnv.scale(this._aspectW,this._aspectH),this._cnv.drawImage(this._img,0,0)})},IE&&(Wilq32.PhotoEffect.prototype.createVMLNode=function(){document.createStyleSheet().addRule(".rvml","behavior:url(#default#VML)");try{return document.namespaces.rvml||document.namespaces.add("rvml","urn:schemas-microsoft-com:vml"),function(t){return document.createElement("')}}catch(t){return function(t){return document.createElement("<"+t+' xmlns="urn:schemas-microsoft.com:vml" class="rvml">')}}}())}(jQuery); -------------------------------------------------------------------------------- /docs/css/docs.css: -------------------------------------------------------------------------------- 1 | .container { 2 | max-width: 840px; 3 | } 4 | 5 | .header { 6 | background-color: #2b2b2b; 7 | background-image: 8 | -webkit-linear-gradient(bottom left, hsla(0, 0%, 0%, .25) 25%, transparent 25%, transparent 75%, hsla(0, 0%, 0%, .25) 75%, hsla(0, 0%, 0%, .25)), 9 | -webkit-linear-gradient(bottom left, hsla(0, 0%, 0%, .25) 25%, transparent 25%, transparent 75%, hsla(0, 0%, 0%, .25) 75%, hsla(0, 0%, 0%, .25)); 10 | background-image: 11 | -o-linear-gradient(bottom left, hsla(0, 0%, 0%, .25) 25%, transparent 25%, transparent 75%, hsla(0, 0%, 0%, .25) 75%, hsla(0, 0%, 0%, .25)), 12 | -o-linear-gradient(bottom left, hsla(0, 0%, 0%, .25) 25%, transparent 25%, transparent 75%, hsla(0, 0%, 0%, .25) 75%, hsla(0, 0%, 0%, .25)); 13 | background-image: 14 | linear-gradient(to top right, hsla(0, 0%, 0%, .25) 25%, transparent 25%, transparent 75%, hsla(0, 0%, 0%, .25) 75%, hsla(0, 0%, 0%, .25)), 15 | linear-gradient(to top right, hsla(0, 0%, 0%, .25) 25%, transparent 25%, transparent 75%, hsla(0, 0%, 0%, .25) 75%, hsla(0, 0%, 0%, .25)); 16 | background-position: 0 0, 4px 4px; 17 | background-size: 8px 8px; 18 | } 19 | 20 | .footer { 21 | padding: 30px 0; 22 | } 23 | 24 | .image-set { 25 | font-size: 0; 26 | margin-left: -5px; 27 | margin-right: -5px; 28 | } 29 | 30 | .image-set img { 31 | display: block; 32 | } 33 | 34 | .image-set a { 35 | display: inline-block; 36 | margin-left: 5px; 37 | margin-right: 5px; 38 | padding: 2px; 39 | border: 1px solid #ddd; 40 | transition: border-color .3s ease; 41 | cursor: zoom-in; 42 | } 43 | 44 | .image-set a:hover { 45 | border-color: #aaa; 46 | } 47 | 48 | /* prettify style */ 49 | 50 | pre ul, 51 | pre ol { 52 | padding: 0; 53 | } 54 | 55 | .com { 56 | color: #93a1a1; 57 | } 58 | 59 | .lit { 60 | color: #195f91; 61 | } 62 | 63 | .pun, 64 | .opn, 65 | .clo { 66 | color: #93a1a1; 67 | } 68 | 69 | .fun { 70 | color: #dc322f; 71 | } 72 | 73 | .str, 74 | .atv { 75 | color: #d14; 76 | } 77 | 78 | .kwd, 79 | .tag { 80 | color: #1e347b; 81 | } 82 | 83 | .typ, 84 | .atn, 85 | .dec, 86 | .var { 87 | color: teal; 88 | } 89 | 90 | .pln { 91 | color: #48484c; 92 | } 93 | 94 | .prettyprint { 95 | padding: 10px; 96 | background-color: #f7f7f9; 97 | border: 1px solid #e1e1e8; 98 | } 99 | -------------------------------------------------------------------------------- /docs/css/jquery.magnify.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * __ __ _ ____ _ _ ___ _______ __ 3 | * | \/ | / \ / ___| \ | |_ _| ___\ \ / / 4 | * | |\/| | / _ \| | _| \| || || |_ \ V / 5 | * | | | |/ ___ \ |_| | |\ || || _| | | 6 | * |_| |_/_/ \_\____|_| \_|___|_| |_| 7 | * 8 | * jquery.magnify - v1.6.3 9 | * A jQuery plugin to view images just like in windows 10 | * https://github.com/nzbin/magnify#readme 11 | * 12 | * Copyright (c) 2017 nzbin 13 | * Released under the MIT License 14 | */ 15 | .magnify-modal { 16 | position: absolute; 17 | z-index: 1090; 18 | width: 320px; 19 | height: 320px; 20 | background-color: #111; 21 | background-color: rgba(0, 0, 0, 0.84); 22 | box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.32); 23 | cursor: default; 24 | outline: none; 25 | color: #ccc; 26 | } 27 | 28 | .magnify-maximize { 29 | position: fixed; 30 | top: 0; 31 | left: 0; 32 | width: 100%; 33 | height: 100%; 34 | } 35 | 36 | .magnify-toolbar { 37 | font-size: 0; 38 | } 39 | 40 | .magnify-header { 41 | position: relative; 42 | z-index: 2; 43 | height: 40px; 44 | } 45 | 46 | .magnify-header .magnify-toolbar { 47 | float: right; 48 | } 49 | 50 | [dir='rtl'] .magnify-header .magnify-toolbar { 51 | float: left; 52 | } 53 | 54 | .magnify-title { 55 | padding: 13px 10px; 56 | font-size: 14px; 57 | line-height: 1; 58 | white-space: nowrap; 59 | text-overflow: ellipsis; 60 | -webkit-user-select: none; 61 | -moz-user-select: none; 62 | -ms-user-select: none; 63 | user-select: none; 64 | overflow: hidden; 65 | } 66 | 67 | .magnify-stage { 68 | position: absolute; 69 | top: 40px; 70 | right: 10px; 71 | bottom: 40px; 72 | left: 10px; 73 | z-index: 1; 74 | border: 1px solid rgba(255, 255, 255, 0.64); 75 | overflow: hidden; 76 | } 77 | 78 | .magnify-stage.stage-ready { 79 | text-align: center; 80 | font-size: 0; 81 | } 82 | 83 | .magnify-stage.stage-ready::before { 84 | content: ''; 85 | display: inline-block; 86 | height: 100%; 87 | vertical-align: middle; 88 | overflow: hidden; 89 | } 90 | 91 | .magnify-image { 92 | position: absolute; 93 | display: inline-block; 94 | } 95 | 96 | .magnify-image.image-ready { 97 | position: static; 98 | max-width: 100%; 99 | max-height: 100%; 100 | vertical-align: middle; 101 | } 102 | 103 | .magnify-footer { 104 | position: absolute; 105 | bottom: 0; 106 | z-index: 2; 107 | width: 100%; 108 | height: 40px; 109 | text-align: center; 110 | } 111 | 112 | .magnify-footer .magnify-toolbar { 113 | display: inline-block; 114 | } 115 | 116 | .magnify-button { 117 | display: inline-block; 118 | min-width: 40px; 119 | height: 40px; 120 | box-sizing: border-box; 121 | margin: 0; 122 | font-size: 14px; 123 | line-height: 1; 124 | text-align: center; 125 | background: none; 126 | border-width: 0; 127 | border-radius: 0; 128 | color: inherit; 129 | cursor: pointer; 130 | outline: none; 131 | } 132 | 133 | .magnify-button:hover { 134 | color: #fff; 135 | } 136 | 137 | .magnify-button:focus { 138 | background-color: rgba(255, 255, 255, 0.08); 139 | } 140 | 141 | .magnify-button svg { 142 | display: inline-block; 143 | font-size: inherit; 144 | width: 1em; 145 | height: 1em; 146 | overflow: visible; 147 | vertical-align: -.125em; 148 | } 149 | 150 | .magnify-button-close:hover { 151 | background-color: #ff4545; 152 | } 153 | 154 | .magnify-button-maximize:hover { 155 | background-color: #525252; 156 | } 157 | 158 | .magnify-button-minimize:hover { 159 | background-color: #525252; 160 | } 161 | 162 | .magnify-resizable-handle { 163 | position: absolute; 164 | z-index: 10; 165 | } 166 | 167 | .magnify-resizable-handle-e { 168 | top: 0; 169 | right: -5px; 170 | bottom: 0; 171 | left: auto; 172 | width: 10px; 173 | cursor: e-resize; 174 | } 175 | 176 | .magnify-resizable-handle-s { 177 | top: auto; 178 | right: 0; 179 | bottom: -5px; 180 | left: 0; 181 | height: 10px; 182 | cursor: s-resize; 183 | } 184 | 185 | .magnify-resizable-handle-w { 186 | top: 0; 187 | right: auto; 188 | bottom: 0; 189 | left: -5px; 190 | width: 10px; 191 | cursor: w-resize; 192 | } 193 | 194 | .magnify-resizable-handle-n { 195 | top: -5px; 196 | right: 0; 197 | bottom: auto; 198 | left: 0; 199 | height: 10px; 200 | cursor: n-resize; 201 | } 202 | 203 | .magnify-resizable-handle-se { 204 | top: auto; 205 | right: -5px; 206 | bottom: -5px; 207 | left: auto; 208 | width: 10px; 209 | height: 10px; 210 | cursor: se-resize; 211 | } 212 | 213 | .magnify-resizable-handle-sw { 214 | top: auto; 215 | right: auto; 216 | bottom: -5px; 217 | left: -5px; 218 | width: 10px; 219 | height: 10px; 220 | cursor: sw-resize; 221 | } 222 | 223 | .magnify-resizable-handle-nw { 224 | top: -5px; 225 | right: auto; 226 | bottom: auto; 227 | left: -5px; 228 | width: 10px; 229 | height: 10px; 230 | cursor: nw-resize; 231 | } 232 | 233 | .magnify-resizable-handle-ne { 234 | top: -5px; 235 | right: -5px; 236 | bottom: auto; 237 | left: auto; 238 | width: 10px; 239 | height: 10px; 240 | cursor: ne-resize; 241 | } 242 | 243 | :-webkit-full-screen { 244 | top: 0 !important; 245 | left: 0 !important; 246 | width: 100% !important; 247 | height: 100% !important; 248 | } 249 | 250 | :-webkit-full-screen .magnify-header, 251 | :-webkit-full-screen .magnify-footer, 252 | :-webkit-full-screen .magnify-resizable-handle { 253 | display: none; 254 | } 255 | 256 | :-webkit-full-screen .magnify-stage { 257 | top: 0; 258 | right: 0; 259 | bottom: 0; 260 | left: 0; 261 | border-width: 0; 262 | background-color: #000; 263 | } 264 | 265 | :-moz-full-screen { 266 | top: 0 !important; 267 | left: 0 !important; 268 | width: 100% !important; 269 | height: 100% !important; 270 | } 271 | 272 | :-moz-full-screen .magnify-header, 273 | :-moz-full-screen .magnify-footer, 274 | :-moz-full-screen .magnify-resizable-handle { 275 | display: none; 276 | } 277 | 278 | :-moz-full-screen .magnify-stage { 279 | top: 0; 280 | right: 0; 281 | bottom: 0; 282 | left: 0; 283 | border-width: 0; 284 | background-color: #000; 285 | } 286 | 287 | :-ms-fullscreen { 288 | top: 0 !important; 289 | left: 0 !important; 290 | width: 100% !important; 291 | height: 100% !important; 292 | } 293 | 294 | :-ms-fullscreen .magnify-header, 295 | :-ms-fullscreen .magnify-footer, 296 | :-ms-fullscreen .magnify-resizable-handle { 297 | display: none; 298 | } 299 | 300 | :-ms-fullscreen .magnify-stage { 301 | top: 0; 302 | right: 0; 303 | bottom: 0; 304 | left: 0; 305 | border-width: 0; 306 | background-color: #000; 307 | } 308 | 309 | :full-screen { 310 | top: 0 !important; 311 | left: 0 !important; 312 | width: 100% !important; 313 | height: 100% !important; 314 | } 315 | 316 | :full-screen .magnify-header, 317 | :full-screen .magnify-footer, 318 | :full-screen .magnify-resizable-handle { 319 | display: none; 320 | } 321 | 322 | :full-screen .magnify-stage { 323 | top: 0; 324 | right: 0; 325 | bottom: 0; 326 | left: 0; 327 | border-width: 0; 328 | background-color: #000; 329 | } 330 | 331 | :-webkit-full-screen { 332 | top: 0 !important; 333 | left: 0 !important; 334 | width: 100% !important; 335 | height: 100% !important; 336 | } 337 | 338 | :-ms-fullscreen { 339 | top: 0 !important; 340 | left: 0 !important; 341 | width: 100% !important; 342 | height: 100% !important; 343 | } 344 | 345 | :fullscreen { 346 | top: 0 !important; 347 | left: 0 !important; 348 | width: 100% !important; 349 | height: 100% !important; 350 | } 351 | 352 | :-webkit-full-screen .magnify-header, :-webkit-full-screen .magnify-footer, :-webkit-full-screen .magnify-resizable-handle { 353 | display: none; 354 | } 355 | 356 | :-ms-fullscreen .magnify-header, :-ms-fullscreen .magnify-footer, :-ms-fullscreen .magnify-resizable-handle { 357 | display: none; 358 | } 359 | 360 | :fullscreen .magnify-header, 361 | :fullscreen .magnify-footer, 362 | :fullscreen .magnify-resizable-handle { 363 | display: none; 364 | } 365 | 366 | :-webkit-full-screen .magnify-stage { 367 | top: 0; 368 | right: 0; 369 | bottom: 0; 370 | left: 0; 371 | border-width: 0; 372 | background-color: #000; 373 | } 374 | 375 | :-ms-fullscreen .magnify-stage { 376 | top: 0; 377 | right: 0; 378 | bottom: 0; 379 | left: 0; 380 | border-width: 0; 381 | background-color: #000; 382 | } 383 | 384 | :fullscreen .magnify-stage { 385 | top: 0; 386 | right: 0; 387 | bottom: 0; 388 | left: 0; 389 | border-width: 0; 390 | background-color: #000; 391 | } 392 | 393 | ::-webkit-backdrop { 394 | background-color: #000; 395 | } 396 | 397 | ::backdrop { 398 | background-color: #000; 399 | } 400 | 401 | ::-ms-backdrop { 402 | background-color: #000; 403 | } 404 | 405 | .is-grab { 406 | cursor: move; 407 | cursor: -webkit-grab; 408 | cursor: grab; 409 | } 410 | 411 | .is-grabbing { 412 | cursor: move; 413 | cursor: -webkit-grabbing; 414 | cursor: grabbing; 415 | } 416 | 417 | .magnify-loader { 418 | position: absolute; 419 | top: 0; 420 | left: 0; 421 | right: 0; 422 | bottom: 0; 423 | z-index: 2; 424 | text-align: center; 425 | background-color: rgba(0, 0, 0, 0.3); 426 | color: #333; 427 | } 428 | 429 | .magnify-loader::before { 430 | content: ''; 431 | display: inline-block; 432 | position: relative; 433 | width: 36px; 434 | height: 36px; 435 | box-sizing: border-box; 436 | border-width: 5px; 437 | border-style: solid; 438 | border-color: rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.5) rgba(255, 255, 255, 0.5); 439 | border-radius: 100%; 440 | vertical-align: middle; 441 | -webkit-animation: magnifyLoading 1s infinite linear; 442 | animation: magnifyLoading 1s infinite linear; 443 | } 444 | 445 | .magnify-loader::after { 446 | content: ''; 447 | display: inline-block; 448 | width: 0; 449 | height: 100%; 450 | vertical-align: middle; 451 | overflow: hidden; 452 | } 453 | 454 | @-webkit-keyframes magnifyLoading { 455 | 0% { 456 | transform: rotateZ(0deg) translate3d(0, 0, 0); 457 | } 458 | 100% { 459 | transform: rotateZ(360deg) translate3d(0, 0, 0); 460 | } 461 | } 462 | 463 | @keyframes magnifyLoading { 464 | 0% { 465 | transform: rotateZ(0deg) translate3d(0, 0, 0); 466 | } 467 | 100% { 468 | transform: rotateZ(360deg) translate3d(0, 0, 0); 469 | } 470 | } 471 | -------------------------------------------------------------------------------- /docs/css/magnify-bezelless-theme.css: -------------------------------------------------------------------------------- 1 | .magnify-modal { 2 | box-shadow: 0 0 6px 2px rgba(0, 0, 0, .3); 3 | } 4 | 5 | .magnify-header .magnify-toolbar { 6 | background-color: rgba(0, 0, 0, .5); 7 | } 8 | 9 | .magnify-stage { 10 | top: 0; 11 | left: 0; 12 | bottom: 0; 13 | right: 0; 14 | border-width: 0; 15 | } 16 | 17 | .magnify-footer .magnify-toolbar { 18 | background-color: rgba(0, 0, 0, .5); 19 | border-top-left-radius: 5px; 20 | border-top-right-radius: 5px; 21 | } 22 | 23 | .magnify-header, 24 | .magnify-footer { 25 | pointer-events: none; 26 | } 27 | 28 | .magnify-button { 29 | pointer-events: auto; 30 | } 31 | -------------------------------------------------------------------------------- /docs/css/magnify-white-theme.css: -------------------------------------------------------------------------------- 1 | .magnify-modal { 2 | box-sizing: border-box; 3 | background-color: rgba(255, 255, 255, .85); 4 | box-shadow: 0 0 1px 1px #fff, 0 0 0 2px rgba(0, 0, 0, .3), 0 0 10px 2px rgba(0, 0, 0, .2), 0 1px 10px 2px rgba(0, 0, 0, .3); 5 | border-radius: 4px; 6 | } 7 | 8 | .magnify-header { 9 | height: 30px; 10 | } 11 | 12 | .magnify-title { 13 | padding: 8px 10px; 14 | color: #333; 15 | } 16 | 17 | .magnify-stage { 18 | top: 30px; 19 | right: 5px; 20 | left: 5px; 21 | background-color: #fff; 22 | border-color: #666; 23 | } 24 | 25 | .magnify-header .magnify-toolbar { 26 | margin-right: 5px; 27 | } 28 | 29 | .magnify-header .magnify-button { 30 | height: 22px; 31 | padding: 0; 32 | background-color: #eee; 33 | color: #fff; 34 | text-shadow: 0 0 1px #000; 35 | } 36 | 37 | .magnify-header .magnify-button:hover { 38 | background-color: #ccc; 39 | } 40 | 41 | .magnify-header .magnify-button-close { 42 | background-color: #ff6e6e; 43 | } 44 | 45 | .magnify-header .magnify-button-close:hover { 46 | background-color: #ff4545; 47 | } 48 | 49 | .magnify-footer .magnify-button { 50 | color: #666; 51 | } 52 | 53 | .magnify-footer .magnify-button:hover { 54 | color: #333; 55 | } 56 | 57 | .magnify-loader { 58 | background: transparent; 59 | } 60 | -------------------------------------------------------------------------------- /docs/css/snack.css: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * snack.css v1.0.0 4 | * 5 | * https://nzbin.github.io/snack/ 6 | * 7 | * Copyright (c) 2017 nzbin 8 | * 9 | * Released under the MIT license 10 | * 11 | */ 12 | 13 | html { 14 | font-family: sans-serif; 15 | line-height: 1.15; 16 | -ms-text-size-adjust: 100%; 17 | -webkit-text-size-adjust: 100%; 18 | } 19 | 20 | body { 21 | margin: 0; 22 | } 23 | 24 | article, 25 | aside, 26 | footer, 27 | header, 28 | nav, 29 | section { 30 | display: block; 31 | } 32 | 33 | h1 { 34 | font-size: 2em; 35 | margin: .67em 0; 36 | } 37 | 38 | figcaption, 39 | figure, 40 | main { 41 | display: block; 42 | } 43 | 44 | figure { 45 | margin: 1em 40px; 46 | } 47 | 48 | hr { 49 | -webkit-box-sizing: content-box; 50 | box-sizing: content-box; 51 | height: 0; 52 | overflow: visible; 53 | } 54 | 55 | pre { 56 | font-family: monospace; 57 | font-size: 1em; 58 | } 59 | 60 | a { 61 | background-color: transparent; 62 | -webkit-text-decoration-skip: objects; 63 | } 64 | 65 | a:active, 66 | a:hover { 67 | outline-width: 0; 68 | } 69 | 70 | abbr[title] { 71 | border-bottom: none; 72 | text-decoration: underline; 73 | -webkit-text-decoration: underline dotted; 74 | text-decoration: underline dotted; 75 | } 76 | 77 | b, 78 | strong { 79 | font-weight: inherit; 80 | font-weight: bolder; 81 | } 82 | 83 | code, 84 | kbd, 85 | samp { 86 | font-family: monospace; 87 | font-size: 1em; 88 | } 89 | 90 | dfn { 91 | font-style: italic; 92 | } 93 | 94 | mark { 95 | background-color: #ff0; 96 | color: #000; 97 | } 98 | 99 | small { 100 | font-size: 80%; 101 | } 102 | 103 | sub, 104 | sup { 105 | font-size: 75%; 106 | line-height: 0; 107 | position: relative; 108 | vertical-align: baseline; 109 | } 110 | 111 | sub { 112 | bottom: -.25em; 113 | } 114 | 115 | sup { 116 | top: -.5em; 117 | } 118 | 119 | audio, 120 | video { 121 | display: inline-block; 122 | } 123 | 124 | audio:not([controls]) { 125 | display: none; 126 | height: 0; 127 | } 128 | 129 | img { 130 | border-style: none; 131 | } 132 | 133 | svg:not(:root) { 134 | overflow: hidden; 135 | } 136 | 137 | button, 138 | input, 139 | optgroup, 140 | select, 141 | textarea { 142 | font-family: sans-serif; 143 | font-size: 100%; 144 | line-height: 1.15; 145 | margin: 0; 146 | } 147 | 148 | button, 149 | input { 150 | overflow: visible; 151 | } 152 | 153 | button, 154 | select { 155 | text-transform: none; 156 | } 157 | 158 | button, 159 | html [type="button"], 160 | [type="reset"], 161 | [type="submit"] { 162 | -webkit-appearance: button; 163 | } 164 | 165 | button::-moz-focus-inner, 166 | [type="button"]::-moz-focus-inner, 167 | [type="reset"]::-moz-focus-inner, 168 | [type="submit"]::-moz-focus-inner { 169 | border-style: none; 170 | padding: 0; 171 | } 172 | 173 | button:-moz-focusring, 174 | [type="button"]:-moz-focusring, 175 | [type="reset"]:-moz-focusring, 176 | [type="submit"]:-moz-focusring { 177 | outline: 1px dotted ButtonText; 178 | } 179 | 180 | fieldset { 181 | border: 1px solid #c0c0c0; 182 | margin: 0 2px; 183 | padding: .35em .625em .75em; 184 | } 185 | 186 | legend { 187 | -webkit-box-sizing: border-box; 188 | box-sizing: border-box; 189 | color: inherit; 190 | display: table; 191 | max-width: 100%; 192 | padding: 0; 193 | white-space: normal; 194 | } 195 | 196 | progress { 197 | display: inline-block; 198 | vertical-align: baseline; 199 | } 200 | 201 | textarea { 202 | overflow: auto; 203 | } 204 | 205 | [type="checkbox"], 206 | [type="radio"] { 207 | -webkit-box-sizing: border-box; 208 | box-sizing: border-box; 209 | padding: 0; 210 | } 211 | 212 | [type="number"]::-webkit-inner-spin-button, 213 | [type="number"]::-webkit-outer-spin-button { 214 | height: auto; 215 | } 216 | 217 | [type="search"] { 218 | -webkit-appearance: textfield; 219 | outline-offset: -2px; 220 | } 221 | 222 | [type="search"]::-webkit-search-cancel-button, 223 | [type="search"]::-webkit-search-decoration { 224 | -webkit-appearance: none; 225 | } 226 | 227 | ::-webkit-file-upload-button { 228 | -webkit-appearance: button; 229 | font: inherit; 230 | } 231 | 232 | details, 233 | menu { 234 | display: block; 235 | } 236 | 237 | summary { 238 | display: list-item; 239 | } 240 | 241 | canvas { 242 | display: inline-block; 243 | } 244 | 245 | template { 246 | display: none; 247 | } 248 | 249 | [hidden] { 250 | display: none; 251 | } 252 | 253 | *, 254 | *::before, 255 | *::after { 256 | -webkit-box-sizing: inherit; 257 | box-sizing: inherit; 258 | } 259 | 260 | html { 261 | -webkit-box-sizing: border-box; 262 | box-sizing: border-box; 263 | font-size: 12px; 264 | } 265 | 266 | body { 267 | font-family: Helvetica, Arial, sans-serif; 268 | font-size: 14px; 269 | color: #333; 270 | line-height: 1.42858; 271 | } 272 | 273 | a { 274 | text-decoration: none; 275 | color: #348fe2; 276 | } 277 | 278 | code, 279 | kbd, 280 | pre, 281 | samp { 282 | font-family: Menlo, Monaco, Consolas, "Courier New", monospace; 283 | } 284 | 285 | pre { 286 | display: block; 287 | font-size: 13px; 288 | line-height: 1.42858; 289 | color: #333; 290 | word-break: break-all; 291 | word-wrap: break-word; 292 | background-color: #f5f5f5; 293 | border: 1px solid #ccc; 294 | -webkit-border-radius: 4px; 295 | border-radius: 4px; 296 | overflow: auto; 297 | } 298 | 299 | code { 300 | padding: 2px 4px; 301 | font-size: 90%; 302 | color: #c7254e; 303 | background-color: #f9f2f4; 304 | -webkit-border-radius: 3px; 305 | border-radius: 3px; 306 | } 307 | 308 | kbd { 309 | padding: 2px 4px; 310 | font-size: 90%; 311 | color: #fff; 312 | background-color: #333; 313 | -webkit-border-radius: 3px; 314 | border-radius: 3px; 315 | } 316 | 317 | h1, 318 | h2, 319 | h3, 320 | h4, 321 | h5, 322 | h6 { 323 | font-family: inherit; 324 | font-weight: 500; 325 | line-height: 1.1; 326 | } 327 | 328 | small, 329 | .small { 330 | font-weight: 400; 331 | line-height: 1; 332 | color: #777; 333 | font-size: 65%; 334 | } 335 | 336 | h1 { 337 | font-size: 36px; 338 | } 339 | 340 | h2 { 341 | font-size: 30px; 342 | } 343 | 344 | h3 { 345 | font-size: 24px; 346 | } 347 | 348 | h4 { 349 | font-size: 18px; 350 | } 351 | 352 | h5 { 353 | font-size: 14px; 354 | } 355 | 356 | h6 { 357 | font-size: 12px; 358 | } 359 | 360 | hr { 361 | margin-top: 20px; 362 | margin-bottom: 20px; 363 | border: 0; 364 | border-top: 1px solid #eee; 365 | } 366 | 367 | .btn { 368 | display: inline-block; 369 | padding: 4px 12px; 370 | text-align: center; 371 | vertical-align: middle; 372 | line-height: 1.42858; 373 | font-size: 14px; 374 | border: 2px solid transparent; 375 | -webkit-border-radius: 4px; 376 | border-radius: 4px; 377 | cursor: pointer; 378 | outline: none; 379 | } 380 | 381 | .btn.fluid { 382 | display: block; 383 | width: 100%; 384 | } 385 | 386 | .btn.default { 387 | color: #fff; 388 | background-color: #b6c2c9; 389 | } 390 | 391 | .btn.default:hover { 392 | background-color: #a7b6be; 393 | } 394 | 395 | .btn.default:focus { 396 | background-color: #a7b6be; 397 | } 398 | 399 | .btn.default:active { 400 | background-color: #a7b6be; 401 | } 402 | 403 | .btn.primary { 404 | color: #fff; 405 | background-color: #348fe2; 406 | } 407 | 408 | .btn.primary:hover { 409 | background-color: #2083dd; 410 | } 411 | 412 | .btn.primary:focus { 413 | background-color: #2083dd; 414 | } 415 | 416 | .btn.primary:active { 417 | background-color: #2083dd; 418 | } 419 | 420 | .btn.info { 421 | color: #fff; 422 | background-color: #49b6d6; 423 | } 424 | 425 | .btn.info:hover { 426 | background-color: #34aed1; 427 | } 428 | 429 | .btn.info:focus { 430 | background-color: #34aed1; 431 | } 432 | 433 | .btn.info:active { 434 | background-color: #34aed1; 435 | } 436 | 437 | .btn.success { 438 | color: #fff; 439 | background-color: #84b547; 440 | } 441 | 442 | .btn.success:hover { 443 | background-color: #77a340; 444 | } 445 | 446 | .btn.success:focus { 447 | background-color: #77a340; 448 | } 449 | 450 | .btn.success:active { 451 | background-color: #77a340; 452 | } 453 | 454 | .btn.danger { 455 | color: #fff; 456 | background-color: #ff5b57; 457 | } 458 | 459 | .btn.danger:hover { 460 | background-color: #ff423e; 461 | } 462 | 463 | .btn.danger:focus { 464 | background-color: #ff423e; 465 | } 466 | 467 | .btn.danger:active { 468 | background-color: #ff423e; 469 | } 470 | 471 | .btn.warning { 472 | color: #fff; 473 | background-color: #f59c1a; 474 | } 475 | 476 | .btn.warning:hover { 477 | background-color: #eb900a; 478 | } 479 | 480 | .btn.warning:focus { 481 | background-color: #eb900a; 482 | } 483 | 484 | .btn.warning:active { 485 | background-color: #eb900a; 486 | } 487 | 488 | .btn.inverted { 489 | color: #fff; 490 | background-color: #2d353c; 491 | } 492 | 493 | .btn.inverted:hover { 494 | background-color: #434f59; 495 | } 496 | 497 | .btn.inverted:focus { 498 | background-color: #434f59; 499 | } 500 | 501 | .btn.inverted:active { 502 | background-color: #434f59; 503 | } 504 | 505 | .btn.link { 506 | color: #348fe2; 507 | background-color: transparent; 508 | border-color: transparent; 509 | } 510 | 511 | .btn.link:hover { 512 | color: #1c75c7; 513 | text-decoration: underline; 514 | background-color: transparent; 515 | } 516 | 517 | .btn.link:focus { 518 | color: #1c75c7; 519 | text-decoration: underline; 520 | background-color: transparent; 521 | } 522 | 523 | .btn.link:active { 524 | color: #1c75c7; 525 | text-decoration: underline; 526 | background-color: transparent; 527 | } 528 | 529 | .btn.outline { 530 | background-color: transparent; 531 | } 532 | 533 | .btn.outline.default { 534 | color: #b6c2c9; 535 | border-color: #b6c2c9; 536 | } 537 | 538 | .btn.outline.default:hover { 539 | color: #fff; 540 | background-color: #b6c2c9; 541 | } 542 | 543 | .btn.outline.default:focus { 544 | color: #fff; 545 | background-color: #b6c2c9; 546 | } 547 | 548 | .btn.outline.default:active { 549 | color: #fff; 550 | background-color: #b6c2c9; 551 | } 552 | 553 | .btn.outline.primary { 554 | color: #348fe2; 555 | border-color: #348fe2; 556 | } 557 | 558 | .btn.outline.primary:hover { 559 | color: #fff; 560 | background-color: #348fe2; 561 | } 562 | 563 | .btn.outline.primary:focus { 564 | color: #fff; 565 | background-color: #348fe2; 566 | } 567 | 568 | .btn.outline.primary:active { 569 | color: #fff; 570 | background-color: #348fe2; 571 | } 572 | 573 | .btn.outline.info { 574 | color: #49b6d6; 575 | border-color: #49b6d6; 576 | } 577 | 578 | .btn.outline.info:hover { 579 | color: #fff; 580 | background-color: #49b6d6; 581 | } 582 | 583 | .btn.outline.info:focus { 584 | color: #fff; 585 | background-color: #49b6d6; 586 | } 587 | 588 | .btn.outline.info:active { 589 | color: #fff; 590 | background-color: #49b6d6; 591 | } 592 | 593 | .btn.outline.success { 594 | color: #84b547; 595 | border-color: #84b547; 596 | } 597 | 598 | .btn.outline.success:hover { 599 | color: #fff; 600 | background-color: #84b547; 601 | } 602 | 603 | .btn.outline.success:focus { 604 | color: #fff; 605 | background-color: #84b547; 606 | } 607 | 608 | .btn.outline.success:active { 609 | color: #fff; 610 | background-color: #84b547; 611 | } 612 | 613 | .btn.outline.danger { 614 | color: #ff5b57; 615 | border-color: #ff5b57; 616 | } 617 | 618 | .btn.outline.danger:hover { 619 | color: #fff; 620 | background-color: #ff5b57; 621 | } 622 | 623 | .btn.outline.danger:focus { 624 | color: #fff; 625 | background-color: #ff5b57; 626 | } 627 | 628 | .btn.outline.danger:active { 629 | color: #fff; 630 | background-color: #ff5b57; 631 | } 632 | 633 | .btn.outline.warning { 634 | color: #f59c1a; 635 | border-color: #f59c1a; 636 | } 637 | 638 | .btn.outline.warning:hover { 639 | color: #fff; 640 | background-color: #f59c1a; 641 | } 642 | 643 | .btn.outline.warning:focus { 644 | color: #fff; 645 | background-color: #f59c1a; 646 | } 647 | 648 | .btn.outline.warning:active { 649 | color: #fff; 650 | background-color: #f59c1a; 651 | } 652 | 653 | .btn.outline.inverted { 654 | color: #2d353c; 655 | border-color: #2d353c; 656 | } 657 | 658 | .btn.outline.inverted:hover { 659 | color: #fff; 660 | background-color: #2d353c; 661 | } 662 | 663 | .btn.outline.inverted:focus { 664 | color: #fff; 665 | background-color: #2d353c; 666 | } 667 | 668 | .btn.outline.inverted:active { 669 | color: #fff; 670 | background-color: #2d353c; 671 | } 672 | 673 | .btns { 674 | position: relative; 675 | display: inline-block; 676 | vertical-align: middle; 677 | } 678 | 679 | .btns > .btn { 680 | position: relative; 681 | float: left; 682 | -webkit-border-radius: 0; 683 | border-radius: 0; 684 | margin-left: -2px; 685 | } 686 | 687 | .btns > .btn:first-child { 688 | margin-left: 0; 689 | -webkit-border-top-left-radius: 4px; 690 | border-top-left-radius: 4px; 691 | -webkit-border-bottom-left-radius: 4px; 692 | border-bottom-left-radius: 4px; 693 | } 694 | 695 | .btns > .btn:last-child { 696 | -webkit-border-top-right-radius: 4px; 697 | border-top-right-radius: 4px; 698 | -webkit-border-bottom-right-radius: 4px; 699 | border-bottom-right-radius: 4px; 700 | } 701 | 702 | .btns.vertical > .btn { 703 | position: relative; 704 | display: block; 705 | float: none; 706 | -webkit-border-radius: 0; 707 | border-radius: 0; 708 | width: 100%; 709 | max-width: 100%; 710 | margin-left: 0; 711 | margin-top: -2px; 712 | } 713 | 714 | .btns.vertical > .btn:first-child { 715 | margin-top: 0; 716 | -webkit-border-top-left-radius: 4px; 717 | border-top-left-radius: 4px; 718 | -webkit-border-top-right-radius: 4px; 719 | border-top-right-radius: 4px; 720 | } 721 | 722 | .btns.vertical > .btn:last-child { 723 | -webkit-border-bottom-left-radius: 4px; 724 | border-bottom-left-radius: 4px; 725 | -webkit-border-bottom-right-radius: 4px; 726 | border-bottom-right-radius: 4px; 727 | } 728 | 729 | .container { 730 | max-width: 1170px; 731 | margin: 0 auto; 732 | padding-left: 15px; 733 | padding-right: 15px; 734 | } 735 | 736 | .container::before, .container::after { 737 | content: " "; 738 | display: table; 739 | } 740 | 741 | .container::after { 742 | clear: both; 743 | } 744 | 745 | .row { 746 | margin-left: -15px; 747 | margin-right: -15px; 748 | } 749 | 750 | .row::before, .row::after { 751 | content: " "; 752 | display: table; 753 | } 754 | 755 | .row::after { 756 | clear: both; 757 | } 758 | 759 | .no-gutters { 760 | margin-right: 0; 761 | margin-left: 0; 762 | } 763 | 764 | .no-gutters > .col, 765 | .no-gutters > [class*="col-"] { 766 | padding-right: 0; 767 | padding-left: 0; 768 | } 769 | 770 | .col, 771 | .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { 772 | position: relative; 773 | min-height: 1px; 774 | padding-left: 15px; 775 | padding-right: 15px; 776 | } 777 | 778 | @media (min-width: 576px) { 779 | .col-1 { 780 | width: 8.33333%; 781 | } 782 | .col-offset-1 { 783 | margin-left: 8.33333%; 784 | } 785 | .col-2 { 786 | width: 16.66667%; 787 | } 788 | .col-offset-2 { 789 | margin-left: 16.66667%; 790 | } 791 | .col-3 { 792 | width: 25%; 793 | } 794 | .col-offset-3 { 795 | margin-left: 25%; 796 | } 797 | .col-4 { 798 | width: 33.33333%; 799 | } 800 | .col-offset-4 { 801 | margin-left: 33.33333%; 802 | } 803 | .col-5 { 804 | width: 41.66667%; 805 | } 806 | .col-offset-5 { 807 | margin-left: 41.66667%; 808 | } 809 | .col-6 { 810 | width: 50%; 811 | } 812 | .col-offset-6 { 813 | margin-left: 50%; 814 | } 815 | .col-7 { 816 | width: 58.33333%; 817 | } 818 | .col-offset-7 { 819 | margin-left: 58.33333%; 820 | } 821 | .col-8 { 822 | width: 66.66667%; 823 | } 824 | .col-offset-8 { 825 | margin-left: 66.66667%; 826 | } 827 | .col-9 { 828 | width: 75%; 829 | } 830 | .col-offset-9 { 831 | margin-left: 75%; 832 | } 833 | .col-10 { 834 | width: 83.33333%; 835 | } 836 | .col-offset-10 { 837 | margin-left: 83.33333%; 838 | } 839 | .col-11 { 840 | width: 91.66667%; 841 | } 842 | .col-offset-11 { 843 | margin-left: 91.66667%; 844 | } 845 | .col-12 { 846 | width: 100%; 847 | } 848 | .col-offset-12 { 849 | margin-left: 100%; 850 | } 851 | .cols-10 > .col-1 { 852 | width: 10%; 853 | } 854 | .cols-10 > .col-offset-1 { 855 | margin-left: 10%; 856 | } 857 | .cols-10 > .col-2 { 858 | width: 20%; 859 | } 860 | .cols-10 > .col-offset-2 { 861 | margin-left: 20%; 862 | } 863 | .cols-10 > .col-3 { 864 | width: 30%; 865 | } 866 | .cols-10 > .col-offset-3 { 867 | margin-left: 30%; 868 | } 869 | .cols-10 > .col-4 { 870 | width: 40%; 871 | } 872 | .cols-10 > .col-offset-4 { 873 | margin-left: 40%; 874 | } 875 | .cols-10 > .col-5 { 876 | width: 50%; 877 | } 878 | .cols-10 > .col-offset-5 { 879 | margin-left: 50%; 880 | } 881 | .cols-10 > .col-6 { 882 | width: 60%; 883 | } 884 | .cols-10 > .col-offset-6 { 885 | margin-left: 60%; 886 | } 887 | .cols-10 > .col-7 { 888 | width: 70%; 889 | } 890 | .cols-10 > .col-offset-7 { 891 | margin-left: 70%; 892 | } 893 | .cols-10 > .col-8 { 894 | width: 80%; 895 | } 896 | .cols-10 > .col-offset-8 { 897 | margin-left: 80%; 898 | } 899 | .cols-10 > .col-9 { 900 | width: 90%; 901 | } 902 | .cols-10 > .col-offset-9 { 903 | margin-left: 90%; 904 | } 905 | .cols-10 > .col-10 { 906 | width: 100%; 907 | } 908 | .cols-10 > .col-offset-10 { 909 | margin-left: 100%; 910 | } 911 | .cols-2 > .col { 912 | width: 50%; 913 | } 914 | .cols-3 > .col { 915 | width: 33.33333%; 916 | } 917 | .cols-4 > .col { 918 | width: 25%; 919 | } 920 | .cols-5 > .col { 921 | width: 20%; 922 | } 923 | .cols-6 > .col { 924 | width: 16.66667%; 925 | } 926 | .cols-7 > .col { 927 | width: 14.28571%; 928 | } 929 | .cols-8 > .col { 930 | width: 12.5%; 931 | } 932 | .cols-9 > .col { 933 | width: 11.11111%; 934 | } 935 | .cols-10 > .col { 936 | width: 10%; 937 | } 938 | .cols-11 > .col { 939 | width: 9.09091%; 940 | } 941 | .cols-12 > .col { 942 | width: 8.33333%; 943 | } 944 | .col, 945 | .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { 946 | float: left; 947 | } 948 | } 949 | 950 | .media { 951 | display: table; 952 | margin-top: 15px; 953 | } 954 | 955 | .media:first-child { 956 | margin-top: 0; 957 | } 958 | 959 | .media-body, 960 | .media-left, 961 | .media-right { 962 | display: table-cell; 963 | vertical-align: top; 964 | } 965 | 966 | .media-left { 967 | padding-right: 10px; 968 | } 969 | 970 | .media-right { 971 | padding-left: 10px; 972 | } 973 | 974 | .media-body { 975 | width: 10000px; 976 | text-align: left; 977 | } 978 | 979 | .media-heading { 980 | margin-top: 0; 981 | margin-bottom: 5px; 982 | } 983 | 984 | .media-content { 985 | font-size: 13px; 986 | } 987 | 988 | .media-body p { 989 | margin: 0; 990 | margin-bottom: 5px; 991 | } 992 | 993 | .avatar { 994 | display: inline-block; 995 | -webkit-border-radius: 100%; 996 | border-radius: 100%; 997 | overflow: hidden; 998 | } 999 | 1000 | .avatar img { 1001 | display: block; 1002 | } 1003 | 1004 | input[type="file"] { 1005 | display: block; 1006 | } 1007 | 1008 | textarea { 1009 | resize: vertical; 1010 | } 1011 | 1012 | label { 1013 | display: inline-block; 1014 | font-weight: bold; 1015 | margin-bottom: 5px; 1016 | } 1017 | 1018 | .form-field { 1019 | display: block; 1020 | width: 100%; 1021 | padding: 4px 8px; 1022 | border: 2px solid #ddd; 1023 | -webkit-border-radius: 4px; 1024 | border-radius: 4px; 1025 | background-color: #fff; 1026 | font-size: 14px; 1027 | line-height: 1.42858; 1028 | color: #333; 1029 | } 1030 | 1031 | .form-field:focus { 1032 | border-color: #348fe2; 1033 | outline: 0; 1034 | } 1035 | 1036 | .form-field[disabled] { 1037 | cursor: not-allowed; 1038 | } 1039 | 1040 | .form-label { 1041 | margin-bottom: 0; 1042 | padding-top: 3px; 1043 | text-align: right; 1044 | } 1045 | 1046 | .form-item { 1047 | margin-bottom: 15px; 1048 | } 1049 | 1050 | .form-inline input[type="file"], 1051 | .form-inline .form-item { 1052 | display: inline-block; 1053 | } 1054 | 1055 | .form-inline .form-field { 1056 | display: inline-block; 1057 | width: auto; 1058 | vertical-align: middle; 1059 | } 1060 | 1061 | .form-horizontal .form-item { 1062 | margin-right: -15px; 1063 | margin-left: -15px; 1064 | } 1065 | 1066 | .form-horizontal .form-item::before, .form-horizontal .form-item::after { 1067 | content: " "; 1068 | display: table; 1069 | } 1070 | 1071 | .form-horizontal .form-item::after { 1072 | clear: both; 1073 | } 1074 | 1075 | .checkbox, 1076 | .radio { 1077 | position: relative; 1078 | display: block; 1079 | margin-top: 10px; 1080 | margin-bottom: 10px; 1081 | padding-left: 20px; 1082 | } 1083 | 1084 | .checkbox label, 1085 | .radio label { 1086 | position: relative; 1087 | display: inline-block; 1088 | min-height: 20px; 1089 | margin-bottom: 0; 1090 | font-weight: 400; 1091 | cursor: pointer; 1092 | } 1093 | 1094 | .checkbox.disabled label, 1095 | .radio.disabled label { 1096 | cursor: not-allowed; 1097 | } 1098 | 1099 | .checkbox.inline, 1100 | .radio.inline { 1101 | display: inline-block; 1102 | margin-top: 0; 1103 | margin-bottom: 0; 1104 | vertical-align: middle; 1105 | font-weight: 400; 1106 | } 1107 | 1108 | .checkbox + .checkbox, 1109 | .radio + .radio { 1110 | margin-top: -5px; 1111 | } 1112 | 1113 | .checkbox.inline + .checkbox.inline, 1114 | .radio.inline + .radio.inline { 1115 | margin-top: 0; 1116 | margin-left: 10px; 1117 | } 1118 | 1119 | .checkbox input[type="checkbox"], 1120 | .radio input[type="radio"] { 1121 | position: absolute; 1122 | margin-top: 4px; 1123 | margin-left: -20px; 1124 | } 1125 | 1126 | fieldset[disabled] .form-control, 1127 | fieldset[disabled] .checkbox label, 1128 | fieldset[disabled] .radio label { 1129 | cursor: not-allowed; 1130 | } 1131 | 1132 | .help-block { 1133 | display: block; 1134 | margin-top: 5px; 1135 | margin-bottom: 10px; 1136 | color: #737373; 1137 | } 1138 | 1139 | table { 1140 | background: transparent; 1141 | border-spacing: 0; 1142 | border-collapse: collapse; 1143 | } 1144 | 1145 | .table { 1146 | width: 100%; 1147 | max-width: 100%; 1148 | margin-bottom: 15px; 1149 | } 1150 | 1151 | .table > thead > tr, 1152 | .table > tbody > tr, 1153 | .table > tfoot > tr { 1154 | border-bottom: 1px solid #ddd; 1155 | } 1156 | 1157 | .table > thead > tr > th, 1158 | .table > thead > tr > td, 1159 | .table > tbody > tr > th, 1160 | .table > tbody > tr > td, 1161 | .table > tfoot > tr > th, 1162 | .table > tfoot > tr > td { 1163 | padding: 8px; 1164 | line-height: 1.428; 1165 | vertical-align: middle; 1166 | text-align: left; 1167 | } 1168 | 1169 | .table > thead > tr:last-child, 1170 | .table > tbody > tr:last-child, 1171 | .table > tfoot > tr:last-child { 1172 | border: none; 1173 | } 1174 | 1175 | .table > thead { 1176 | background-color: #f5f5f5; 1177 | border-bottom: 1px solid #ddd; 1178 | } 1179 | 1180 | .table.bordered { 1181 | border: 1px solid #ddd; 1182 | } 1183 | 1184 | .table.bordered > thead > tr > th, 1185 | .table.bordered > thead > tr > td, 1186 | .table.bordered > tbody > tr > th, 1187 | .table.bordered > tbody > tr > td, 1188 | .table.bordered > tfoot > tr > th, 1189 | .table.bordered > tfoot > tr > td { 1190 | border: 1px solid #ddd; 1191 | } 1192 | 1193 | .table.striped > tbody > tr:nth-of-type(2n+2) { 1194 | background-color: #f5f5f5; 1195 | } 1196 | 1197 | .table.hover > tbody > tr:hover { 1198 | background-color: #f5f5f5; 1199 | } 1200 | 1201 | .table-overflow { 1202 | min-height: .01%; 1203 | overflow-x: auto; 1204 | -webkit-overflow-scrolling: touch; 1205 | } 1206 | 1207 | .box { 1208 | padding: 10px 15px; 1209 | margin-bottom: 15px; 1210 | border: 1px solid #ddd; 1211 | -webkit-border-radius: 4px; 1212 | border-radius: 4px; 1213 | background-color: #fff; 1214 | } 1215 | 1216 | .boxes { 1217 | border: 2px solid transparent; 1218 | -webkit-border-radius: 5px; 1219 | border-radius: 5px; 1220 | margin-bottom: 15px; 1221 | } 1222 | 1223 | .boxes > .box { 1224 | border-width: 0; 1225 | -webkit-border-radius: 0; 1226 | border-radius: 0; 1227 | margin-bottom: 0; 1228 | } 1229 | 1230 | .boxes > .box:first-child { 1231 | -webkit-border-top-left-radius: 3px !important; 1232 | border-top-left-radius: 3px !important; 1233 | -webkit-border-top-right-radius: 3px !important; 1234 | border-top-right-radius: 3px !important; 1235 | } 1236 | 1237 | .boxes > .box:last-child { 1238 | -webkit-border-bottom-left-radius: 3px !important; 1239 | border-bottom-left-radius: 3px !important; 1240 | -webkit-border-bottom-right-radius: 3px !important; 1241 | border-bottom-right-radius: 3px !important; 1242 | } 1243 | 1244 | .boxes > .box.headed { 1245 | background-color: #f5f5f5; 1246 | } 1247 | 1248 | .boxes > .box.bodied { 1249 | padding-top: 15px; 1250 | padding-bottom: 15px; 1251 | } 1252 | 1253 | .boxes > .box.footed { 1254 | background-color: #f5f5f5; 1255 | } 1256 | 1257 | .boxes .box + .box { 1258 | border-top-width: 1px; 1259 | } 1260 | 1261 | .boxes .boxes { 1262 | margin-bottom: 0; 1263 | } 1264 | 1265 | .boxes.raised { 1266 | border-color: #ddd; 1267 | -webkit-box-shadow: 0 2px 10px 3px rgba(34, 36, 38, 0.12); 1268 | box-shadow: 0 2px 10px 3px rgba(34, 36, 38, 0.12); 1269 | } 1270 | 1271 | .boxes.default { 1272 | border-color: #ddd; 1273 | } 1274 | 1275 | .boxes.primary { 1276 | border-color: #348fe2; 1277 | } 1278 | 1279 | .boxes.info { 1280 | border-color: #49b6d6; 1281 | } 1282 | 1283 | .boxes.success { 1284 | border-color: #84b547; 1285 | } 1286 | 1287 | .boxes.danger { 1288 | border-color: #ff5b57; 1289 | } 1290 | 1291 | .boxes.warning { 1292 | border-color: #f59c1a; 1293 | } 1294 | 1295 | .boxes.inverted { 1296 | border-color: #2d353c; 1297 | } 1298 | 1299 | .boxes.transparent { 1300 | background-color: transparent; 1301 | } 1302 | 1303 | .boxes.transparent .box { 1304 | background-color: transparent; 1305 | } 1306 | 1307 | .boxes.secondary { 1308 | border-width: 0; 1309 | } 1310 | 1311 | .boxes.secondary > .box { 1312 | border-width: 1px; 1313 | -webkit-border-radius: 4px; 1314 | border-radius: 4px; 1315 | } 1316 | 1317 | .boxes.secondary > .box.headed { 1318 | background-color: transparent; 1319 | margin-bottom: 0; 1320 | border-width: 0; 1321 | -webkit-border-radius: 0 !important; 1322 | border-radius: 0 !important; 1323 | } 1324 | 1325 | .boxes.secondary > .box.bodied { 1326 | padding-top: 15px; 1327 | padding-bottom: 15px; 1328 | margin-bottom: 0; 1329 | } 1330 | 1331 | .boxes.secondary > .box.footed { 1332 | background-color: transparent; 1333 | border-width: 0; 1334 | -webkit-border-radius: 0 !important; 1335 | border-radius: 0 !important; 1336 | } 1337 | 1338 | .bg-primary { 1339 | background-color: #348fe2; 1340 | } 1341 | 1342 | .bg-info { 1343 | background-color: #49b6d6; 1344 | } 1345 | 1346 | .bg-success { 1347 | background-color: #84b547; 1348 | } 1349 | 1350 | .bg-danger { 1351 | background-color: #ff5b57; 1352 | } 1353 | 1354 | .bg-warning { 1355 | background-color: #f59c1a; 1356 | } 1357 | 1358 | .bg-inverted { 1359 | background-color: #2d353c; 1360 | } 1361 | 1362 | .text-muted { 1363 | color: #555; 1364 | } 1365 | 1366 | .text-white { 1367 | color: #fff; 1368 | } 1369 | 1370 | .text-primary { 1371 | color: #348fe2; 1372 | } 1373 | 1374 | .text-info { 1375 | color: #49b6d6; 1376 | } 1377 | 1378 | .text-success { 1379 | color: #84b547; 1380 | } 1381 | 1382 | .text-danger { 1383 | color: #ff5b57; 1384 | } 1385 | 1386 | .text-warning { 1387 | color: #f59c1a; 1388 | } 1389 | 1390 | .text-inverted { 1391 | color: #2d353c; 1392 | } 1393 | 1394 | .pull-right { 1395 | float: right; 1396 | } 1397 | 1398 | .pull-left { 1399 | float: left; 1400 | } 1401 | 1402 | .clearfix::before, .clearfix::after { 1403 | content: " "; 1404 | display: table; 1405 | } 1406 | 1407 | .clearfix::after { 1408 | clear: both; 1409 | } 1410 | 1411 | .center-block { 1412 | display: block; 1413 | margin-left: auto; 1414 | margin-right: auto; 1415 | } 1416 | 1417 | .text-left { 1418 | text-align: left; 1419 | } 1420 | 1421 | .text-center { 1422 | text-align: center; 1423 | } 1424 | 1425 | .text-right { 1426 | text-align: right; 1427 | } 1428 | 1429 | .align-top { 1430 | vertical-align: top; 1431 | } 1432 | 1433 | .align-middle { 1434 | vertical-align: middle; 1435 | } 1436 | 1437 | .align-bottom { 1438 | vertical-align: bottom; 1439 | } 1440 | 1441 | .text-ellipsis { 1442 | overflow: hidden; 1443 | white-space: nowrap; 1444 | -o-text-overflow: ellipsis; 1445 | text-overflow: ellipsis; 1446 | } 1447 | 1448 | .text-uppercase { 1449 | text-transform: uppercase; 1450 | } 1451 | -------------------------------------------------------------------------------- /docs/js/vendor/modernizr-2.8.3.min.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.8.3 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-fontface-backgroundsize-borderimage-borderradius-boxshadow-flexbox-hsla-multiplebgs-opacity-rgba-textshadow-cssanimations-csscolumns-generatedcontent-cssgradients-cssreflections-csstransforms-csstransforms3d-csstransitions-applicationcache-canvas-canvastext-draganddrop-hashchange-history-audio-video-indexeddb-input-inputtypes-localstorage-postmessage-sessionstorage-websockets-websqldatabase-webworkers-geolocation-inlinesvg-smil-svg-svgclippaths-touch-webgl-shiv-mq-cssclasses-addtest-prefixed-teststyles-testprop-testallprops-hasevent-prefixes-domprefixes-load 3 | */ 4 | ;window.Modernizr=function(a,b,c){function D(a){j.cssText=a}function E(a,b){return D(n.join(a+";")+(b||""))}function F(a,b){return typeof a===b}function G(a,b){return!!~(""+a).indexOf(b)}function H(a,b){for(var d in a){var e=a[d];if(!G(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function I(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:F(f,"function")?f.bind(d||b):f}return!1}function J(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+p.join(d+" ")+d).split(" ");return F(b,"string")||F(b,"undefined")?H(e,b):(e=(a+" "+q.join(d+" ")+d).split(" "),I(e,b,c))}function K(){e.input=function(c){for(var d=0,e=c.length;d',a,""].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},z=function(b){var c=a.matchMedia||a.msMatchMedia;if(c)return c(b)&&c(b).matches||!1;var d;return y("@media "+b+" { #"+h+" { position: absolute; } }",function(b){d=(a.getComputedStyle?getComputedStyle(b,null):b.currentStyle)["position"]=="absolute"}),d},A=function(){function d(d,e){e=e||b.createElement(a[d]||"div"),d="on"+d;var f=d in e;return f||(e.setAttribute||(e=b.createElement("div")),e.setAttribute&&e.removeAttribute&&(e.setAttribute(d,""),f=F(e[d],"function"),F(e[d],"undefined")||(e[d]=c),e.removeAttribute(d))),e=null,f}var a={select:"input",change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img"};return d}(),B={}.hasOwnProperty,C;!F(B,"undefined")&&!F(B.call,"undefined")?C=function(a,b){return B.call(a,b)}:C=function(a,b){return b in a&&F(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=w.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(w.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(w.call(arguments)))};return e}),s.flexbox=function(){return J("flexWrap")},s.canvas=function(){var a=b.createElement("canvas");return!!a.getContext&&!!a.getContext("2d")},s.canvastext=function(){return!!e.canvas&&!!F(b.createElement("canvas").getContext("2d").fillText,"function")},s.webgl=function(){return!!a.WebGLRenderingContext},s.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:y(["@media (",n.join("touch-enabled),("),h,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c},s.geolocation=function(){return"geolocation"in navigator},s.postmessage=function(){return!!a.postMessage},s.websqldatabase=function(){return!!a.openDatabase},s.indexedDB=function(){return!!J("indexedDB",a)},s.hashchange=function(){return A("hashchange",a)&&(b.documentMode===c||b.documentMode>7)},s.history=function(){return!!a.history&&!!history.pushState},s.draganddrop=function(){var a=b.createElement("div");return"draggable"in a||"ondragstart"in a&&"ondrop"in a},s.websockets=function(){return"WebSocket"in a||"MozWebSocket"in a},s.rgba=function(){return D("background-color:rgba(150,255,150,.5)"),G(j.backgroundColor,"rgba")},s.hsla=function(){return D("background-color:hsla(120,40%,100%,.5)"),G(j.backgroundColor,"rgba")||G(j.backgroundColor,"hsla")},s.multiplebgs=function(){return D("background:url(https://),url(https://),red url(https://)"),/(url\s*\(.*?){3}/.test(j.background)},s.backgroundsize=function(){return J("backgroundSize")},s.borderimage=function(){return J("borderImage")},s.borderradius=function(){return J("borderRadius")},s.boxshadow=function(){return J("boxShadow")},s.textshadow=function(){return b.createElement("div").style.textShadow===""},s.opacity=function(){return E("opacity:.55"),/^0.55$/.test(j.opacity)},s.cssanimations=function(){return J("animationName")},s.csscolumns=function(){return J("columnCount")},s.cssgradients=function(){var a="background-image:",b="gradient(linear,left top,right bottom,from(#9f9),to(white));",c="linear-gradient(left top,#9f9, white);";return D((a+"-webkit- ".split(" ").join(b+a)+n.join(c+a)).slice(0,-a.length)),G(j.backgroundImage,"gradient")},s.cssreflections=function(){return J("boxReflect")},s.csstransforms=function(){return!!J("transform")},s.csstransforms3d=function(){var a=!!J("perspective");return a&&"webkitPerspective"in g.style&&y("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}",function(b,c){a=b.offsetLeft===9&&b.offsetHeight===3}),a},s.csstransitions=function(){return J("transition")},s.fontface=function(){var a;return y('@font-face {font-family:"font";src:url("https://")}',function(c,d){var e=b.getElementById("smodernizr"),f=e.sheet||e.styleSheet,g=f?f.cssRules&&f.cssRules[0]?f.cssRules[0].cssText:f.cssText||"":"";a=/src/i.test(g)&&g.indexOf(d.split(" ")[0])===0}),a},s.generatedcontent=function(){var a;return y(["#",h,"{font:0/0 a}#",h,':after{content:"',l,'";visibility:hidden;font:3px/1 a}'].join(""),function(b){a=b.offsetHeight>=3}),a},s.video=function(){var a=b.createElement("video"),c=!1;try{if(c=!!a.canPlayType)c=new Boolean(c),c.ogg=a.canPlayType('video/ogg; codecs="theora"').replace(/^no$/,""),c.h264=a.canPlayType('video/mp4; codecs="avc1.42E01E"').replace(/^no$/,""),c.webm=a.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/^no$/,"")}catch(d){}return c},s.audio=function(){var a=b.createElement("audio"),c=!1;try{if(c=!!a.canPlayType)c=new Boolean(c),c.ogg=a.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/,""),c.mp3=a.canPlayType("audio/mpeg;").replace(/^no$/,""),c.wav=a.canPlayType('audio/wav; codecs="1"').replace(/^no$/,""),c.m4a=(a.canPlayType("audio/x-m4a;")||a.canPlayType("audio/aac;")).replace(/^no$/,"")}catch(d){}return c},s.localstorage=function(){try{return localStorage.setItem(h,h),localStorage.removeItem(h),!0}catch(a){return!1}},s.sessionstorage=function(){try{return sessionStorage.setItem(h,h),sessionStorage.removeItem(h),!0}catch(a){return!1}},s.webworkers=function(){return!!a.Worker},s.applicationcache=function(){return!!a.applicationCache},s.svg=function(){return!!b.createElementNS&&!!b.createElementNS(r.svg,"svg").createSVGRect},s.inlinesvg=function(){var a=b.createElement("div");return a.innerHTML="",(a.firstChild&&a.firstChild.namespaceURI)==r.svg},s.smil=function(){return!!b.createElementNS&&/SVGAnimate/.test(m.call(b.createElementNS(r.svg,"animate")))},s.svgclippaths=function(){return!!b.createElementNS&&/SVGClipPath/.test(m.call(b.createElementNS(r.svg,"clipPath")))};for(var L in s)C(s,L)&&(x=L.toLowerCase(),e[x]=s[L](),v.push((e[x]?"":"no-")+x));return e.input||K(),e.addTest=function(a,b){if(typeof a=="object")for(var d in a)C(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},D(""),i=k=null,function(a,b){function l(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function m(){var a=s.elements;return typeof a=="string"?a.split(" "):a}function n(a){var b=j[a[h]];return b||(b={},i++,a[h]=i,j[i]=b),b}function o(a,c,d){c||(c=b);if(k)return c.createElement(a);d||(d=n(c));var g;return d.cache[a]?g=d.cache[a].cloneNode():f.test(a)?g=(d.cache[a]=d.createElem(a)).cloneNode():g=d.createElem(a),g.canHaveChildren&&!e.test(a)&&!g.tagUrn?d.frag.appendChild(g):g}function p(a,c){a||(a=b);if(k)return a.createDocumentFragment();c=c||n(a);var d=c.frag.cloneNode(),e=0,f=m(),g=f.length;for(;e",g="hidden"in a,k=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){g=!0,k=!0}})();var s={elements:d.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:c,shivCSS:d.shivCSS!==!1,supportsUnknownElements:k,shivMethods:d.shivMethods!==!1,type:"default",shivDocument:r,createElement:o,createDocumentFragment:p};a.html5=s,r(b)}(this,b),e._version=d,e._prefixes=n,e._domPrefixes=q,e._cssomPrefixes=p,e.mq=z,e.hasEvent=A,e.testProp=function(a){return H([a])},e.testAllProps=J,e.testStyles=y,e.prefixed=function(a,b,c){return b?J(a,b,c):J(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+v.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f 2 | 3 | 4 | 5 | 6 | 7 | 8 | Magnify Examples 9 | 10 | 11 | 12 | 13 | 14 | 15 | 19 | 51 | 52 | 53 | 54 |
55 |
56 | 58 | 59 | 60 | 62 | 63 | 64 | 67 | 68 | 69 |
70 |
71 | 72 | 73 | 74 | 75 | 76 | 94 | 95 | 96 | 97 | -------------------------------------------------------------------------------- /examples/custom-toolbar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Magnify Examples 9 | 10 | 11 | 12 | 13 | 14 | 15 | 19 | 20 | 21 | 22 |
23 |
24 | 26 | 27 | 28 | 30 | 31 | 32 | 35 | 36 | 37 |
38 |
39 | 40 | 41 | 42 | 43 | 44 | 84 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /examples/display-in-modal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Magnify Examples 9 | 10 | 11 | 12 | 13 | 14 | 15 | 19 | 20 | 21 | 22 |
23 |

24 | 25 | 27 | 28 | 86 |
87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | -------------------------------------------------------------------------------- /examples/modal-init-maximized.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Magnify Examples 9 | 10 | 11 | 12 | 13 | 14 | 15 | 19 | 58 | 59 | 60 | 61 |
62 |
63 | 65 | 66 | 67 | 69 | 70 | 71 | 74 | 75 | 76 |
77 |
78 | 79 | 80 | 81 | 82 | 83 | 93 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /examples/standard-with-scroll.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Magnify Examples 9 | 10 | 11 | 12 | 13 | 14 | 15 | 19 | 20 | 21 | 22 |
23 |

Overflowing text to show scroll behavior

24 |

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, 25 | egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

26 |

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus 27 | vel augue laoreet rutrum faucibus dolor auctor.

28 |

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque 29 | nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. 30 |

31 |

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, 32 | egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

33 |
34 |
35 | 37 | 38 | 39 | 41 | 42 | 43 | 46 | 47 | 48 |
49 |
50 |

Overflowing text to show scroll behavior

51 |

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, 52 | egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

53 |

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus 54 | vel augue laoreet rutrum faucibus dolor auctor.

55 |

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque 56 | nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. 57 |

58 |

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, 59 | egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

60 |

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus 61 | vel augue laoreet rutrum faucibus dolor auctor.

62 |

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque 63 | nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. 64 |

65 |

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, 66 | egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

67 |

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus 68 | vel augue laoreet rutrum faucibus dolor auctor.

69 |

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque 70 | nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. 71 |

72 |

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, 73 | egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

74 |

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus 75 | vel augue laoreet rutrum faucibus dolor auctor.

76 |

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque 77 | nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. 78 |

79 |

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, 80 | egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

81 |

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus 82 | vel augue laoreet rutrum faucibus dolor auctor.

83 |

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque 84 | nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. 85 |

86 |

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, 87 | egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

88 |

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus 89 | vel augue laoreet rutrum faucibus dolor auctor.

90 |

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque 91 | nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. 92 |

93 |

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, 94 | egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

95 |

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus 96 | vel augue laoreet rutrum faucibus dolor auctor.

97 |

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque 98 | nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. 99 |

100 |

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, 101 | egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

102 |

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus 103 | vel augue laoreet rutrum faucibus dolor auctor.

104 |

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque 105 | nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. 106 |

107 |

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, 108 | egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

109 |

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus 110 | vel augue laoreet rutrum faucibus dolor auctor.

111 |

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque 112 | nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. 113 |

114 |
115 | 116 | 117 | 118 | 119 | 120 | 126 | 127 | 128 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jquery.magnify", 3 | "version": "1.6.3", 4 | "description": "A jQuery plugin to view images just like in Windows", 5 | "main": "dist/jquery.magnify.js", 6 | "files": [ 7 | "dist", 8 | "src" 9 | ], 10 | "homepage": "https://github.com/nzbin/magnify#readme", 11 | "author": "nzbin", 12 | "license": "MIT", 13 | "directories": { 14 | "doc": "docs", 15 | "example": "examples" 16 | }, 17 | "repository": { 18 | "type": "git", 19 | "url": "git+https://github.com/nzbin/magnify.git" 20 | }, 21 | "keywords": [ 22 | "magnify", 23 | "lightbox", 24 | "responsive", 25 | "jquery", 26 | "modal", 27 | "draggable", 28 | "resizable", 29 | "zoomable", 30 | "image-gallery", 31 | "photoviewer" 32 | ], 33 | "bugs": { 34 | "url": "https://github.com/nzbin/magnify/issues" 35 | }, 36 | "scripts": { 37 | "sass": "node-sass --output-style expanded src/sass/magnify.scss dist/jquery.magnify.css", 38 | "sassmin": "node-sass --output-style compressed src/sass/magnify.scss dist/jquery.magnify.min.css", 39 | "autoprefixer": "postcss -u autoprefixer --no-map --autoprefixer.browsers \"last 1 versions\" -r dist/*.css", 40 | "build": "run-s build:css build:js", 41 | "build:css": "run-s sass", 42 | "build:js": "concat -o dist/jquery.magnify.js src/js/intro.js src/js/utilities.js src/js/core.js src/js/draggable.js src/js/movable.js src/js/resizable.js src/js/outro.js src/js/rotate.js", 43 | "compress": "run-s compress:css compress:js", 44 | "compress:css": "run-s sassmin", 45 | "compress:js": "uglifyjs dist/jquery.magnify.js -o dist/jquery.magnify.min.js -c -m --comments /^!/", 46 | "copy": "run-s copy:css copy:js", 47 | "copy:css": "cp dist/jquery.magnify.css docs/css", 48 | "copy:js": "cp dist/jquery.magnify.js docs/js", 49 | "release": "run-s clean build compress autoprefixer copy", 50 | "release:css": "run-s build:css compress:css", 51 | "release:js": "run-s build:js compress:js", 52 | "lint": "run-s lint:css lint:js", 53 | "lint:css": "stylelint --syntax scss \"src/**/*.scss\" --fix", 54 | "lint:js": "eslint src/js --fix", 55 | "clean": "rimraf dist", 56 | "watch": "onchange src -- run-p build:js build:css" 57 | }, 58 | "devDependencies": { 59 | "autoprefixer": "^10.4.2", 60 | "concat": "^1.0.3", 61 | "eslint": "^8.6.0", 62 | "node-sass": "^7.0.1", 63 | "npm-run-all": "^4.1.5", 64 | "onchange": "^7.1.0", 65 | "postcss": "^8.4.5", 66 | "postcss-cli": "^9.1.0", 67 | "rimraf": "^3.0.2", 68 | "stylelint": "^13.13.1", 69 | "stylelint-config-recommended-scss": "^4.3.0", 70 | "stylelint-config-standard": "^21.0.0", 71 | "stylelint-scss": "^3.21.0", 72 | "uglify-js": "^3.14.5" 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /src/js/draggable.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Draggable 3 | * @param {Object} modal - The modal element 4 | * @param {Object} dragHandle - The handle element when dragging 5 | * @param {Object} dragCancel - The cancel element when dragging 6 | */ 7 | 8 | var draggable = function (modal, dragHandle, dragCancel) { 9 | var self = this; 10 | 11 | var isDragging = false; 12 | 13 | var startX = 0, startY = 0, left = 0, top = 0; 14 | 15 | var dragStart = function (e) { 16 | e = e || window.event; 17 | 18 | // Must be removed 19 | // e.preventDefault(); 20 | 21 | modal.focus(); 22 | 23 | // Get clicked button 24 | var elemCancel = $(e.target).closest(dragCancel); 25 | // Stop modal moving when click buttons 26 | if (elemCancel.length) { 27 | return true; 28 | } 29 | 30 | if (self.options.multiInstances) { 31 | modal.css('z-index', ++PUBLIC_VARS['zIndex']); 32 | } 33 | 34 | isDragging = true; 35 | 36 | startX = e.type === 'touchstart' ? e.originalEvent.targetTouches[0].pageX : e.clientX; 37 | startY = e.type === 'touchstart' ? e.originalEvent.targetTouches[0].pageY : e.clientY; 38 | 39 | left = $(modal).offset().left; 40 | top = $(modal).offset().top; 41 | 42 | $D.on(TOUCH_MOVE_EVENT + EVENT_NS, dragMove).on( 43 | TOUCH_END_EVENT + EVENT_NS, 44 | dragEnd 45 | ); 46 | }; 47 | 48 | var dragMove = function (e) { 49 | e = e || window.event; 50 | 51 | e.preventDefault(); 52 | 53 | if (isDragging && !PUBLIC_VARS['isMoving'] && !PUBLIC_VARS['isResizing'] && !self.isMaximized) { 54 | var endX = e.type === 'touchmove' ? e.originalEvent.targetTouches[0].pageX : e.clientX; 55 | var endY = e.type === 'touchmove' ? e.originalEvent.targetTouches[0].pageY : e.clientY; 56 | var relativeX = endX - startX; 57 | var relativeY = endY - startY; 58 | 59 | $(modal).css({ 60 | left: relativeX + left + 'px', 61 | top: relativeY + top + 'px' 62 | }); 63 | } 64 | }; 65 | 66 | var dragEnd = function (e) { 67 | $D.off(TOUCH_MOVE_EVENT + EVENT_NS, dragMove).off( 68 | TOUCH_END_EVENT + EVENT_NS, 69 | dragEnd 70 | ); 71 | 72 | isDragging = false; 73 | }; 74 | 75 | $(dragHandle).on(TOUCH_START_EVENT + EVENT_NS, dragStart); 76 | }; 77 | 78 | // Add to Magnify Prototype 79 | $.extend(Magnify.prototype, { 80 | draggable: draggable 81 | }); 82 | -------------------------------------------------------------------------------- /src/js/intro.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * __ __ _ ____ _ _ ___ _______ __ 3 | * | \/ | / \ / ___| \ | |_ _| ___\ \ / / 4 | * | |\/| | / _ \| | _| \| || || |_ \ V / 5 | * | | | |/ ___ \ |_| | |\ || || _| | | 6 | * |_| |_/_/ \_\____|_| \_|___|_| |_| 7 | * 8 | * jquery.magnify - v1.6.3 9 | * A jQuery plugin to view images just like in windows 10 | * https://github.com/nzbin/magnify#readme 11 | * 12 | * Copyright (c) 2017 nzbin 13 | * Released under the MIT License 14 | */ 15 | ; 16 | (function(factory) { 17 | if (typeof define === 'function' && define.amd) { 18 | // AMD. Register as anonymous module. 19 | define(['jquery'], factory); 20 | } else if (typeof exports === 'object') { 21 | // Node / CommonJS 22 | factory(require('jquery')); 23 | } else { 24 | // Browser globals. 25 | factory(jQuery); 26 | } 27 | })(function($) { 28 | 29 | 'use strict'; 30 | -------------------------------------------------------------------------------- /src/js/movable.js: -------------------------------------------------------------------------------- 1 | /** 2 | * -------------------------------------------------------------------------- 3 | * 1. No movable 4 | * 2. Vertical movable 5 | * 3. Horizontal movable 6 | * 4. Vertical & Horizontal movable 7 | * -------------------------------------------------------------------------- 8 | * 9 | * Image movable 10 | * @param {Object} stage - The stage element 11 | * @param {Object} image - The image element 12 | */ 13 | 14 | var movable = function (stage, image) { 15 | var self = this; 16 | 17 | var isDragging = false; 18 | 19 | var startX = 0, 20 | startY = 0, 21 | left = 0, 22 | top = 0, 23 | widthDiff = 0, 24 | heightDiff = 0, 25 | δ = 0; 26 | 27 | var dragStart = function (e) { 28 | e = e || window.event; 29 | 30 | e.preventDefault(); 31 | 32 | var $image = isIE8() ? $(stage).find(image) : $(image); 33 | 34 | var imageWidth = $image.width(), 35 | imageHeight = $image.height(), 36 | stageWidth = $(stage).width(), 37 | stageHeight = $(stage).height(); 38 | 39 | startX = e.type === 'touchstart' ? e.originalEvent.targetTouches[0].pageX : e.clientX; 40 | startY = e.type === 'touchstart' ? e.originalEvent.targetTouches[0].pageY : e.clientY; 41 | 42 | // δ is the difference between image width and height 43 | δ = !self.isRotated ? 0 : (imageWidth - imageHeight) / 2; 44 | 45 | // Width or height difference can be use to limit image right or top position 46 | widthDiff = !self.isRotated ? imageWidth - stageWidth : imageHeight - stageWidth; 47 | heightDiff = !self.isRotated ? imageHeight - stageHeight : imageWidth - stageHeight; 48 | 49 | // Modal can be dragging if image is smaller to stage 50 | isDragging = widthDiff > 0 || heightDiff > 0 ? true : false; 51 | PUBLIC_VARS['isMoving'] = widthDiff > 0 || heightDiff > 0 ? true : false; 52 | 53 | // Reclac the element position when mousedown 54 | // Fixed the issue of stage with a border 55 | left = $image.position().left - (isIE8() ? 0 : δ); 56 | top = $image.position().top + (isIE8() ? 0 : δ); 57 | 58 | // Add grabbing cursor 59 | if (stage.hasClass('is-grab')) { 60 | $('html, body, .magnify-modal, .magnify-stage, .magnify-button, .magnify-resizable-handle') 61 | .addClass('is-grabbing'); 62 | } 63 | 64 | $D.on(TOUCH_MOVE_EVENT + EVENT_NS, dragMove).on( 65 | TOUCH_END_EVENT + EVENT_NS, 66 | dragEnd 67 | ); 68 | }; 69 | 70 | var dragMove = function (e) { 71 | e = e || window.event; 72 | 73 | e.preventDefault(); 74 | 75 | var $image = isIE8() ? $(stage).find(image) : $(image); 76 | 77 | if (isDragging) { 78 | var endX = e.type === 'touchmove' ? e.originalEvent.targetTouches[0].pageX : e.clientX; 79 | var endY = e.type === 'touchmove' ? e.originalEvent.targetTouches[0].pageY : e.clientY; 80 | var relativeX = endX - startX; 81 | var relativeY = endY - startY; 82 | var newLeft = relativeX + left; 83 | var newTop = relativeY + top; 84 | 85 | // Vertical limit 86 | if (heightDiff > 0) { 87 | if (relativeY + top > δ) { 88 | newTop = δ; 89 | } else if (relativeY + top < -heightDiff + δ) { 90 | newTop = -heightDiff + δ; 91 | } 92 | } else { 93 | newTop = top; 94 | } 95 | // Horizontal limit 96 | if (widthDiff > 0) { 97 | if (relativeX + left > -δ) { 98 | newLeft = -δ; 99 | } else if (relativeX + left < -widthDiff - δ) { 100 | newLeft = -widthDiff - δ; 101 | } 102 | } else { 103 | newLeft = left; 104 | } 105 | 106 | $image.css({ 107 | left: newLeft + 'px', 108 | top: newTop + 'px' 109 | }); 110 | 111 | // Update image initial data 112 | $.extend(self.imageData, { 113 | left: newLeft, 114 | top: newTop 115 | }); 116 | } 117 | }; 118 | 119 | var dragEnd = function (e) { 120 | $D.off(TOUCH_MOVE_EVENT + EVENT_NS, dragMove).off( 121 | TOUCH_END_EVENT + EVENT_NS, 122 | dragEnd 123 | ); 124 | 125 | isDragging = false; 126 | PUBLIC_VARS['isMoving'] = false; 127 | 128 | // Remove grabbing cursor 129 | $('html, body, .magnify-modal, .magnify-stage, .magnify-button, .magnify-resizable-handle') 130 | .removeClass('is-grabbing'); 131 | }; 132 | 133 | $(stage).on(TOUCH_START_EVENT + EVENT_NS, dragStart); 134 | }; 135 | 136 | // Add to Magnify Prototype 137 | $.extend(Magnify.prototype, { 138 | movable: movable 139 | }); 140 | -------------------------------------------------------------------------------- /src/js/outro.js: -------------------------------------------------------------------------------- 1 | }); 2 | -------------------------------------------------------------------------------- /src/js/resizable.js: -------------------------------------------------------------------------------- 1 | /** 2 | * -------------------------------------------------------------------------- 3 | * 1. Modal resizable 4 | * 2. Keep image in stage center 5 | * 3. Other image limitations 6 | * -------------------------------------------------------------------------- 7 | * 8 | * Resizable 9 | * @param {Object} modal - The modal element 10 | * @param {Object} stage - The stage element 11 | * @param {Object} image - The image element 12 | * @param {Number} minWidth - The option of modalWidth 13 | * @param {Number} minHeight - The option of modalHeight 14 | */ 15 | 16 | var resizable = function (modal, stage, image, minWidth, minHeight) { 17 | var self = this; 18 | 19 | var resizableHandleE = $('
'), 20 | resizableHandleW = $('
'), 21 | resizableHandleS = $('
'), 22 | resizableHandleN = $('
'), 23 | resizableHandleSE = $('
'), 24 | resizableHandleSW = $('
'), 25 | resizableHandleNE = $('
'), 26 | resizableHandleNW = $('
'); 27 | 28 | var resizableHandles = { 29 | e: resizableHandleE, 30 | w: resizableHandleW, 31 | s: resizableHandleS, 32 | n: resizableHandleN, 33 | se: resizableHandleSE, 34 | sw: resizableHandleSW, 35 | ne: resizableHandleNE, 36 | nw: resizableHandleNW 37 | }; 38 | 39 | $(modal).append( 40 | resizableHandleE, 41 | resizableHandleW, 42 | resizableHandleS, 43 | resizableHandleN, 44 | resizableHandleSE, 45 | resizableHandleSW, 46 | resizableHandleNE, 47 | resizableHandleNW 48 | ); 49 | 50 | var isDragging = false; 51 | 52 | var startX = 0, 53 | startY = 0, 54 | modalData = { 55 | w: 0, 56 | h: 0, 57 | l: 0, 58 | t: 0 59 | }, 60 | stageData = { 61 | w: 0, 62 | h: 0, 63 | l: 0, 64 | t: 0 65 | }, 66 | imageData = { 67 | w: 0, 68 | h: 0, 69 | l: 0, 70 | t: 0 71 | }; 72 | // δ is the difference between image width and height 73 | var δ = 0, imgWidth = 0, imgHeight = 0, direction = ''; 74 | 75 | // Modal CSS options 76 | var getModalOpts = function (dir, offsetX, offsetY) { 77 | // Modal should not move when its width to the minwidth 78 | var modalLeft = -offsetX + modalData.w > minWidth 79 | ? offsetX + modalData.l 80 | : modalData.l + modalData.w - minWidth; 81 | var modalTop = -offsetY + modalData.h > minHeight 82 | ? offsetY + modalData.t 83 | : modalData.t + modalData.h - minHeight; 84 | 85 | var opts = { 86 | e: { 87 | width: Math.max(offsetX + modalData.w, minWidth) + 'px' 88 | }, 89 | s: { 90 | height: Math.max(offsetY + modalData.h, minHeight) + 'px' 91 | }, 92 | se: { 93 | width: Math.max(offsetX + modalData.w, minWidth) + 'px', 94 | height: Math.max(offsetY + modalData.h, minHeight) + 'px' 95 | }, 96 | w: { 97 | width: Math.max(-offsetX + modalData.w, minWidth) + 'px', 98 | left: modalLeft + 'px' 99 | }, 100 | n: { 101 | height: Math.max(-offsetY + modalData.h, minHeight) + 'px', 102 | top: modalTop + 'px' 103 | }, 104 | nw: { 105 | width: Math.max(-offsetX + modalData.w, minWidth) + 'px', 106 | height: Math.max(-offsetY + modalData.h, minHeight) + 'px', 107 | top: modalTop + 'px', 108 | left: modalLeft + 'px' 109 | }, 110 | ne: { 111 | width: Math.max(offsetX + modalData.w, minWidth) + 'px', 112 | height: Math.max(-offsetY + modalData.h, minHeight) + 'px', 113 | top: modalTop + 'px' 114 | }, 115 | sw: { 116 | width: Math.max(-offsetX + modalData.w, minWidth) + 'px', 117 | height: Math.max(offsetY + modalData.h, minHeight) + 'px', 118 | left: modalLeft + 'px' 119 | } 120 | }; 121 | 122 | return opts[dir]; 123 | }; 124 | 125 | // Image CSS options 126 | var getImageOpts = function (dir, offsetX, offsetY) { 127 | var $image = isIE8() ? $(stage).find(image) : $(image); 128 | 129 | // In modern browser, the width and height of image won't change after rotated. 130 | // But its position top and left will get values from the image rotated. 131 | // In IE8 browser, due to the type of rotating, all the value will be the same. 132 | var imgPosLeft = isIE8() ? $image.position().left + δ : $image.position().left; 133 | var imgPosTop = isIE8() ? $image.position().top - δ : $image.position().top; 134 | 135 | // Image should not move when modal width to the min width 136 | // The minwidth is modal width, so we should clac the stage minwidth 137 | var widthDiff = offsetX + modalData.w > minWidth 138 | ? stageData.w - imgWidth + offsetX - δ 139 | : minWidth - (modalData.w - stageData.w) - imgWidth - δ; 140 | var heightDiff = offsetY + modalData.h > minHeight 141 | ? stageData.h - imgHeight + offsetY + δ 142 | : minHeight - (modalData.h - stageData.h) - imgHeight + δ; 143 | var widthDiff2 = -offsetX + modalData.w > minWidth 144 | ? stageData.w - imgWidth - offsetX - δ 145 | : minWidth - (modalData.w - stageData.w) - imgWidth - δ; 146 | var heightDiff2 = -offsetY + modalData.h > minHeight 147 | ? stageData.h - imgHeight - offsetY + δ 148 | : minHeight - (modalData.h - stageData.h) - imgHeight + δ; 149 | 150 | // Get image position in dragging 151 | var imgLeft = (widthDiff > 0 ? imgPosLeft : imgPosLeft < 0 ? imgPosLeft : 0) - δ; 152 | var imgTop = (heightDiff > 0 ? imgPosTop : imgPosTop < 0 ? imgPosTop : 0) + δ; 153 | var imgLeft2 = (widthDiff2 > 0 ? imgPosLeft : imgPosLeft < 0 ? imgPosLeft : 0) - δ; 154 | var imgTop2 = (heightDiff2 > 0 ? imgPosTop : imgPosTop < 0 ? imgPosTop : 0) + δ; 155 | 156 | var opts = { 157 | e: { 158 | left: widthDiff >= -δ 159 | ? (widthDiff - δ) / 2 + 'px' 160 | : imgLeft > widthDiff 161 | ? imgLeft + 'px' 162 | : widthDiff + 'px' 163 | }, 164 | s: { 165 | top: heightDiff >= δ 166 | ? (heightDiff + δ) / 2 + 'px' 167 | : imgTop > heightDiff 168 | ? imgTop + 'px' 169 | : heightDiff + 'px' 170 | }, 171 | se: { 172 | top: heightDiff >= δ 173 | ? (heightDiff + δ) / 2 + 'px' 174 | : imgTop > heightDiff 175 | ? imgTop + 'px' 176 | : heightDiff + 'px', 177 | left: widthDiff >= -δ 178 | ? (widthDiff - δ) / 2 + 'px' 179 | : imgLeft > widthDiff 180 | ? imgLeft + 'px' 181 | : widthDiff + 'px' 182 | }, 183 | w: { 184 | left: widthDiff2 >= -δ 185 | ? (widthDiff2 - δ) / 2 + 'px' 186 | : imgLeft2 > widthDiff2 187 | ? imgLeft2 + 'px' 188 | : widthDiff2 + 'px' 189 | }, 190 | n: { 191 | top: heightDiff2 >= δ 192 | ? (heightDiff2 + δ) / 2 + 'px' 193 | : imgTop2 > heightDiff2 194 | ? imgTop2 + 'px' 195 | : heightDiff2 + 'px' 196 | }, 197 | nw: { 198 | top: heightDiff2 >= δ 199 | ? (heightDiff2 + δ) / 2 + 'px' 200 | : imgTop2 > heightDiff2 201 | ? imgTop2 + 'px' 202 | : heightDiff2 + 'px', 203 | left: widthDiff2 >= -δ 204 | ? (widthDiff2 - δ) / 2 + 'px' 205 | : imgLeft2 > widthDiff2 206 | ? imgLeft2 + 'px' 207 | : widthDiff2 + 'px' 208 | }, 209 | ne: { 210 | top: heightDiff2 >= δ 211 | ? (heightDiff2 + δ) / 2 + 'px' 212 | : imgTop2 > heightDiff2 213 | ? imgTop2 + 'px' 214 | : heightDiff2 + 'px', 215 | left: widthDiff >= -δ 216 | ? (widthDiff - δ) / 2 + 'px' 217 | : imgLeft > widthDiff 218 | ? imgLeft + 'px' 219 | : widthDiff + 'px' 220 | }, 221 | sw: { 222 | top: heightDiff >= δ 223 | ? (heightDiff + δ) / 2 + 'px' 224 | : imgTop > heightDiff 225 | ? imgTop + 'px' 226 | : heightDiff + 'px', 227 | left: widthDiff2 >= -δ 228 | ? (widthDiff2 - δ) / 2 + 'px' 229 | : imgLeft2 > widthDiff2 230 | ? imgLeft2 + 'px' 231 | : widthDiff2 + 'px' 232 | } 233 | }; 234 | 235 | return opts[dir]; 236 | }; 237 | 238 | var dragStart = function (dir, e) { 239 | e = e || window.event; 240 | 241 | e.preventDefault(); 242 | 243 | var $image = isIE8() ? $(stage).find(image) : $(image); 244 | 245 | isDragging = true; 246 | PUBLIC_VARS['isResizing'] = true; 247 | 248 | startX = e.type === 'touchstart' ? e.originalEvent.targetTouches[0].pageX : e.clientX; 249 | startY = e.type === 'touchstart' ? e.originalEvent.targetTouches[0].pageY : e.clientY; 250 | 251 | // Reclac the modal data when mousedown 252 | modalData = { 253 | w: $(modal).width(), 254 | h: $(modal).height(), 255 | l: $(modal).offset().left, 256 | t: $(modal).offset().top 257 | }; 258 | 259 | stageData = { 260 | w: $(stage).width(), 261 | h: $(stage).height(), 262 | l: $(stage).offset().left, 263 | t: $(stage).offset().top 264 | }; 265 | 266 | imageData = { 267 | w: $image.width(), 268 | h: $image.height(), 269 | l: $image.position().left, 270 | t: $image.position().top 271 | }; 272 | 273 | // δ is the difference between image width and height 274 | δ = !self.isRotated ? 0 : (imageData.w - imageData.h) / 2; 275 | imgWidth = !self.isRotated ? imageData.w : imageData.h; 276 | imgHeight = !self.isRotated ? imageData.h : imageData.w; 277 | 278 | direction = dir; 279 | 280 | // Add resizable cursor 281 | $('html,body,.magnify-modal,.magnify-stage,.magnify-button').css( 282 | 'cursor', 283 | dir + '-resize' 284 | ); 285 | 286 | $D.on(TOUCH_MOVE_EVENT + EVENT_NS, dragMove).on( 287 | TOUCH_END_EVENT + EVENT_NS, 288 | dragEnd 289 | ); 290 | }; 291 | 292 | var dragMove = function (e) { 293 | e = e || window.event; 294 | 295 | e.preventDefault(); 296 | 297 | var $image = isIE8() ? $(stage).find(image) : $(image); 298 | 299 | if (isDragging && !self.isMaximized) { 300 | var endX = e.type === 'touchmove' ? e.originalEvent.targetTouches[0].pageX : e.clientX; 301 | var endY = e.type === 'touchmove' ? e.originalEvent.targetTouches[0].pageY : e.clientY; 302 | var relativeX = endX - startX; 303 | var relativeY = endY - startY; 304 | 305 | var modalOpts = getModalOpts(direction, relativeX, relativeY); 306 | 307 | $(modal).css(modalOpts); 308 | 309 | var imageOpts = getImageOpts(direction, relativeX, relativeY); 310 | 311 | $image.css(imageOpts); 312 | 313 | self.isDoResize = true; 314 | } 315 | }; 316 | 317 | var dragEnd = function (e) { 318 | $D.off(TOUCH_MOVE_EVENT + EVENT_NS, dragMove).off( 319 | TOUCH_END_EVENT + EVENT_NS, 320 | dragEnd 321 | ); 322 | 323 | // Set grab cursor 324 | if (PUBLIC_VARS['isResizing']) { 325 | setGrabCursor( 326 | { w: imgWidth, h: imgHeight }, 327 | { w: $(stage).width(), h: $(stage).height() }, 328 | stage 329 | ); 330 | } 331 | 332 | isDragging = false; 333 | PUBLIC_VARS['isResizing'] = false; 334 | 335 | // Remove resizable cursor 336 | $('html, body, .magnify-modal, .magnify-stage, .magnify-button').css('cursor', ''); 337 | 338 | // Update image initial data 339 | var scale = self.getImageScaleToStage($(stage).width(), $(stage).height()); 340 | 341 | $.extend(self.imageData, { 342 | initWidth: self.img.width * scale, 343 | initHeight: self.img.height * scale, 344 | initLeft: ($(stage).width() - self.img.width * scale) / 2, 345 | initTop: ($(stage).height() - self.img.height * scale) / 2 346 | }); 347 | }; 348 | 349 | $.each(resizableHandles, function (dir, handle) { 350 | handle.on(TOUCH_START_EVENT + EVENT_NS, function (e) { 351 | dragStart(dir, e); 352 | }); 353 | }); 354 | }; 355 | 356 | // Add to Magnify Prototype 357 | $.extend(Magnify.prototype, { 358 | resizable: resizable 359 | }); 360 | -------------------------------------------------------------------------------- /src/js/rotate.js: -------------------------------------------------------------------------------- 1 | // VERSION: 2.3 LAST UPDATE: 11.07.2013 2 | /* 3 | * Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php 4 | * 5 | * Made by Wilq32, wilq32@gmail.com, Wroclaw, Poland, 01.2009 6 | * Website: http://jqueryrotate.com 7 | */ 8 | 9 | (function($) { 10 | var supportedCSS, supportedCSSOrigin, styles = document.getElementsByTagName('head')[0].style, 11 | toCheck = 'transformProperty WebkitTransform OTransform msTransform MozTransform'.split(' '); 12 | for (var a = 0; a < toCheck.length; a++) 13 | if (styles[toCheck[a]] !== undefined) { supportedCSS = toCheck[a]; } 14 | if (supportedCSS) { 15 | supportedCSSOrigin = supportedCSS.replace(/[tT]ransform/, 'TransformOrigin'); 16 | if (supportedCSSOrigin[0] == 'T') supportedCSSOrigin[0] = 't'; 17 | } 18 | 19 | // Bad eval to preven google closure to remove it from code o_O 20 | eval('IE = "v"=="\v"'); 21 | 22 | jQuery.fn.extend({ 23 | rotate: function(parameters) { 24 | if (this.length === 0 || typeof parameters == 'undefined') return; 25 | if (typeof parameters == 'number') parameters = { angle: parameters }; 26 | var returned = []; 27 | for (var i = 0, i0 = this.length; i < i0; i++) { 28 | var element = this.get(i); 29 | if (!element.Wilq32 || !element.Wilq32.PhotoEffect) { 30 | 31 | var paramClone = $.extend(true, {}, parameters); 32 | var newRotObject = new Wilq32.PhotoEffect(element, paramClone)._rootObj; 33 | 34 | returned.push($(newRotObject)); 35 | } else { 36 | element.Wilq32.PhotoEffect._handleRotation(parameters); 37 | } 38 | } 39 | return returned; 40 | }, 41 | getRotateAngle: function() { 42 | var ret = [0]; 43 | for (var i = 0, i0 = this.length; i < i0; i++) { 44 | var element = this.get(i); 45 | if (element.Wilq32 && element.Wilq32.PhotoEffect) { 46 | ret[i] = element.Wilq32.PhotoEffect._angle; 47 | } 48 | } 49 | return ret; 50 | }, 51 | stopRotate: function() { 52 | for (var i = 0, i0 = this.length; i < i0; i++) { 53 | var element = this.get(i); 54 | if (element.Wilq32 && element.Wilq32.PhotoEffect) { 55 | clearTimeout(element.Wilq32.PhotoEffect._timer); 56 | } 57 | } 58 | } 59 | }); 60 | 61 | // Library agnostic interface 62 | 63 | Wilq32 = window.Wilq32 || {}; 64 | Wilq32.PhotoEffect = (function() { 65 | 66 | if (supportedCSS) { 67 | return function(img, parameters) { 68 | img.Wilq32 = { 69 | PhotoEffect: this 70 | }; 71 | 72 | this._img = this._rootObj = this._eventObj = img; 73 | this._handleRotation(parameters); 74 | }; 75 | } else { 76 | return function(img, parameters) { 77 | this._img = img; 78 | this._onLoadDelegate = [parameters]; 79 | 80 | this._rootObj = document.createElement('span'); 81 | this._rootObj.style.display = 'inline-block'; 82 | this._rootObj.Wilq32 = { 83 | PhotoEffect: this 84 | }; 85 | img.parentNode.insertBefore(this._rootObj, img); 86 | 87 | if (img.complete) { 88 | this._Loader(); 89 | } else { 90 | var self = this; 91 | // TODO: Remove jQuery dependency 92 | jQuery(this._img).bind('load', function() { self._Loader(); }); 93 | } 94 | }; 95 | } 96 | })(); 97 | 98 | Wilq32.PhotoEffect.prototype = { 99 | _setupParameters: function(parameters) { 100 | this._parameters = this._parameters || {}; 101 | if (typeof this._angle !== 'number') { this._angle = 0; } 102 | if (typeof parameters.angle === 'number') { this._angle = parameters.angle; } 103 | this._parameters.animateTo = (typeof parameters.animateTo === 'number') ? (parameters.animateTo) : (this._angle); 104 | 105 | this._parameters.step = parameters.step || this._parameters.step || null; 106 | this._parameters.easing = parameters.easing || this._parameters.easing || this._defaultEasing; 107 | this._parameters.duration = 'duration' in parameters ? parameters.duration : parameters.duration || this._parameters.duration || 1000; 108 | this._parameters.callback = parameters.callback || this._parameters.callback || this._emptyFunction; 109 | this._parameters.center = parameters.center || this._parameters.center || ['50%', '50%']; 110 | if (typeof this._parameters.center[0] == 'string') { 111 | this._rotationCenterX = (parseInt(this._parameters.center[0], 10) / 100) * this._imgWidth * this._aspectW; 112 | } else { 113 | this._rotationCenterX = this._parameters.center[0]; 114 | } 115 | if (typeof this._parameters.center[1] == 'string') { 116 | this._rotationCenterY = (parseInt(this._parameters.center[1], 10) / 100) * this._imgHeight * this._aspectH; 117 | } else { 118 | this._rotationCenterY = this._parameters.center[1]; 119 | } 120 | 121 | if (parameters.bind && parameters.bind != this._parameters.bind) { this._BindEvents(parameters.bind); } 122 | }, 123 | _emptyFunction: function() {}, 124 | _defaultEasing: function(x, t, b, c, d) { return -c * ((t = t / d - 1) * t * t * t - 1) + b; }, 125 | _handleRotation: function(parameters, dontcheck) { 126 | if (!supportedCSS && !this._img.complete && !dontcheck) { 127 | this._onLoadDelegate.push(parameters); 128 | return; 129 | } 130 | this._setupParameters(parameters); 131 | if (this._angle == this._parameters.animateTo) { 132 | this._rotate(this._angle); 133 | } else { 134 | this._animateStart(); 135 | } 136 | }, 137 | 138 | _BindEvents: function(events) { 139 | if (events && this._eventObj) { 140 | // Unbinding previous Events 141 | if (this._parameters.bind) { 142 | var oldEvents = this._parameters.bind; 143 | for (var a in oldEvents) 144 | if (oldEvents.hasOwnProperty(a)) 145 | // TODO: Remove jQuery dependency 146 | jQuery(this._eventObj).unbind(a, oldEvents[a]); 147 | } 148 | 149 | this._parameters.bind = events; 150 | for (var a in events) 151 | if (events.hasOwnProperty(a)) 152 | // TODO: Remove jQuery dependency 153 | jQuery(this._eventObj).bind(a, events[a]); 154 | } 155 | }, 156 | 157 | _Loader: (function() { 158 | if (IE) 159 | return function() { 160 | var width = this._img.width; 161 | var height = this._img.height; 162 | this._imgWidth = width; 163 | this._imgHeight = height; 164 | this._img.parentNode.removeChild(this._img); 165 | 166 | this._vimage = this.createVMLNode('image'); 167 | this._vimage.src = this._img.src; 168 | this._vimage.style.height = height + 'px'; 169 | this._vimage.style.width = width + 'px'; 170 | this._vimage.style.position = 'absolute'; // FIXES IE PROBLEM - its only rendered if its on absolute position! 171 | this._vimage.style.top = '0px'; 172 | this._vimage.style.left = '0px'; 173 | this._aspectW = this._aspectH = 1; 174 | 175 | /* Group minifying a small 1px precision problem when rotating object */ 176 | this._container = this.createVMLNode('group'); 177 | this._container.style.width = width; 178 | this._container.style.height = height; 179 | this._container.style.position = 'absolute'; 180 | this._container.style.top = '0px'; 181 | this._container.style.left = '0px'; 182 | this._container.setAttribute('coordsize', width - 1 + ',' + (height - 1)); // This -1, -1 trying to fix ugly problem with small displacement on IE 183 | this._container.appendChild(this._vimage); 184 | 185 | this._rootObj.appendChild(this._container); 186 | this._rootObj.style.position = 'relative'; // FIXES IE PROBLEM 187 | this._rootObj.style.width = width + 'px'; 188 | this._rootObj.style.height = height + 'px'; 189 | this._rootObj.setAttribute('id', this._img.getAttribute('id')); 190 | this._rootObj.className = this._img.className; 191 | this._eventObj = this._rootObj; 192 | var parameters; 193 | while (parameters = this._onLoadDelegate.shift()) { 194 | this._handleRotation(parameters, true); 195 | } 196 | }; 197 | else return function() { 198 | this._rootObj.setAttribute('id', this._img.getAttribute('id')); 199 | this._rootObj.className = this._img.className; 200 | 201 | this._imgWidth = this._img.naturalWidth; 202 | this._imgHeight = this._img.naturalHeight; 203 | var _widthMax = Math.sqrt((this._imgHeight) * (this._imgHeight) + (this._imgWidth) * (this._imgWidth)); 204 | this._width = _widthMax * 3; 205 | this._height = _widthMax * 3; 206 | 207 | this._aspectW = this._img.offsetWidth / this._img.naturalWidth; 208 | this._aspectH = this._img.offsetHeight / this._img.naturalHeight; 209 | 210 | this._img.parentNode.removeChild(this._img); 211 | 212 | 213 | this._canvas = document.createElement('canvas'); 214 | this._canvas.setAttribute('width', this._width); 215 | this._canvas.style.position = 'relative'; 216 | this._canvas.style.left = -this._img.height * this._aspectW + 'px'; 217 | this._canvas.style.top = -this._img.width * this._aspectH + 'px'; 218 | this._canvas.Wilq32 = this._rootObj.Wilq32; 219 | 220 | this._rootObj.appendChild(this._canvas); 221 | this._rootObj.style.width = this._img.width * this._aspectW + 'px'; 222 | this._rootObj.style.height = this._img.height * this._aspectH + 'px'; 223 | this._eventObj = this._canvas; 224 | 225 | this._cnv = this._canvas.getContext('2d'); 226 | var parameters; 227 | while (parameters = this._onLoadDelegate.shift()) { 228 | this._handleRotation(parameters, true); 229 | } 230 | }; 231 | })(), 232 | 233 | _animateStart: function() { 234 | if (this._timer) { 235 | clearTimeout(this._timer); 236 | } 237 | this._animateStartTime = +new Date; 238 | this._animateStartAngle = this._angle; 239 | this._animate(); 240 | }, 241 | _animate: function() { 242 | var actualTime = +new Date; 243 | var checkEnd = actualTime - this._animateStartTime > this._parameters.duration; 244 | 245 | // TODO: Bug for animatedGif for static rotation ? (to test) 246 | if (checkEnd && !this._parameters.animatedGif) { 247 | clearTimeout(this._timer); 248 | } else { 249 | if (this._canvas || this._vimage || this._img) { 250 | var angle = this._parameters.easing(0, actualTime - this._animateStartTime, this._animateStartAngle, this._parameters.animateTo - this._animateStartAngle, this._parameters.duration); 251 | this._rotate((~~(angle * 10)) / 10); 252 | } 253 | if (this._parameters.step) { 254 | this._parameters.step(this._angle); 255 | } 256 | var self = this; 257 | this._timer = setTimeout(function() { 258 | self._animate.call(self); 259 | }, 10); 260 | } 261 | 262 | // To fix Bug that prevents using recursive function in callback I moved this function to back 263 | if (this._parameters.callback && checkEnd) { 264 | this._angle = this._parameters.animateTo; 265 | this._rotate(this._angle); 266 | this._parameters.callback.call(this._rootObj); 267 | } 268 | }, 269 | 270 | _rotate: (function() { 271 | var rad = Math.PI / 180; 272 | if (IE) 273 | return function(angle) { 274 | this._angle = angle; 275 | this._container.style.rotation = (angle % 360) + 'deg'; 276 | this._vimage.style.top = -(this._rotationCenterY - this._imgHeight / 2) + 'px'; 277 | this._vimage.style.left = -(this._rotationCenterX - this._imgWidth / 2) + 'px'; 278 | this._container.style.top = this._rotationCenterY - this._imgHeight / 2 + 'px'; 279 | this._container.style.left = this._rotationCenterX - this._imgWidth / 2 + 'px'; 280 | 281 | }; 282 | else if (supportedCSS) 283 | return function(angle) { 284 | this._angle = angle; 285 | this._img.style[supportedCSS] = 'rotate(' + (angle % 360) + 'deg)'; 286 | this._img.style[supportedCSSOrigin] = this._parameters.center.join(' '); 287 | }; 288 | else 289 | return function(angle) { 290 | this._angle = angle; 291 | angle = (angle % 360) * rad; 292 | // clear canvas 293 | this._canvas.width = this._width; //+this._widthAdd; 294 | this._canvas.height = this._height; //+this._heightAdd; 295 | 296 | // REMEMBER: all drawings are read from backwards.. so first function is translate, then rotate, then translate, translate.. 297 | this._cnv.translate(this._imgWidth * this._aspectW, this._imgHeight * this._aspectH); // at least center image on screen 298 | this._cnv.translate(this._rotationCenterX, this._rotationCenterY); // we move image back to its orginal 299 | this._cnv.rotate(angle); // rotate image 300 | this._cnv.translate(-this._rotationCenterX, -this._rotationCenterY); // move image to its center, so we can rotate around its center 301 | this._cnv.scale(this._aspectW, this._aspectH); // SCALE - if needed ;) 302 | this._cnv.drawImage(this._img, 0, 0); // First - we draw image 303 | }; 304 | 305 | })() 306 | }; 307 | 308 | if (IE) { 309 | Wilq32.PhotoEffect.prototype.createVMLNode = (function() { 310 | document.createStyleSheet().addRule('.rvml', 'behavior:url(#default#VML)'); 311 | try { 312 | !document.namespaces.rvml && document.namespaces.add('rvml', 'urn:schemas-microsoft-com:vml'); 313 | return function(tagName) { 314 | return document.createElement(''); 315 | }; 316 | } catch (e) { 317 | return function(tagName) { 318 | return document.createElement('<' + tagName + ' xmlns="urn:schemas-microsoft.com:vml" class="rvml">'); 319 | }; 320 | } 321 | })(); 322 | } 323 | 324 | })(jQuery); 325 | -------------------------------------------------------------------------------- /src/js/utilities.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Private Functions 3 | */ 4 | 5 | /** 6 | * Get image src from `data-src` 7 | * @param {Object} el - image 8 | */ 9 | function getImageSrc(el) { 10 | // Get data-src as image src at first 11 | var src = $(el).attr('data-src') ? $(el).attr('data-src') : $(el).attr('href'); 12 | return src; 13 | } 14 | 15 | /** 16 | * Throttle function 17 | * @param {Function} fn - The function will be triggered 18 | * @param {Number} delay - The throttle delay time 19 | * @return {Function} 20 | */ 21 | function throttle(fn, delay) { 22 | var timer = null; 23 | 24 | return function () { 25 | var context = this, args = arguments; 26 | 27 | clearTimeout(timer); 28 | 29 | timer = setTimeout(function () { 30 | fn.apply(context, args); 31 | }, delay); 32 | }; 33 | } 34 | 35 | /** 36 | * Preload a image 37 | * @param {String} src - The image src 38 | * @param {Function} success - The callback of success 39 | * @param {Function} error - The callback of error 40 | */ 41 | function preloadImage(src, success, error) { 42 | var img = new Image(); 43 | 44 | img.onload = function () { 45 | success(img); 46 | }; 47 | 48 | img.onerror = function () { 49 | error(img); 50 | }; 51 | 52 | img.src = src; 53 | } 54 | 55 | /** 56 | * Request fullscreen 57 | * @param {type} element 58 | */ 59 | function requestFullscreen(element) { 60 | if (element.requestFullscreen) { 61 | element.requestFullscreen(); 62 | } else if (element.mozRequestFullScreen) { 63 | element.mozRequestFullScreen(); 64 | } else if (element.webkitRequestFullscreen) { 65 | element.webkitRequestFullscreen(); 66 | } else if (element.msRequestFullscreen) { 67 | element.msRequestFullscreen(); 68 | } 69 | } 70 | 71 | /** 72 | * Exit fullscreen 73 | */ 74 | function exitFullscreen() { 75 | if (document.exitFullscreen) { 76 | document.exitFullscreen(); 77 | } else if (document.mozCancelFullScreen) { 78 | document.mozCancelFullScreen(); 79 | } else if (document.webkitExitFullscreen) { 80 | document.webkitExitFullscreen(); 81 | } 82 | } 83 | 84 | /** 85 | * Get the image name from its url 86 | * @param {String} url - The image src 87 | * @return {String} 88 | */ 89 | function getImageNameFromUrl(url) { 90 | var reg = /^.*?\/*([^/?]*)\.[a-z]+(\?.+|$)/gi, txt = url.replace(reg, '$1'); 91 | return txt; 92 | } 93 | 94 | /** 95 | * Check if the document has a scrollbar 96 | * @return {Boolean} 97 | */ 98 | function hasScrollbar() { 99 | return ( 100 | document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight) 101 | ); 102 | } 103 | 104 | /** 105 | * Get the scrollbar width 106 | * @return {Number} 107 | */ 108 | function getScrollbarWidth() { 109 | var scrollDiv = document.createElement('div'); 110 | scrollDiv.style.cssText = 'width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;'; 111 | document.body.appendChild(scrollDiv); 112 | var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth; 113 | document.body.removeChild(scrollDiv); 114 | 115 | return scrollbarWidth; 116 | } 117 | 118 | /** 119 | * Set grab cursor when move image 120 | * @param {Object} imageData - The image data 121 | * @param {Object} stageData - The stage data 122 | * @param {Object} stage - The stage element 123 | * @param {Boolean} isRotate - The image rotated flag 124 | */ 125 | function setGrabCursor(imageData, stageData, stage, isRotated) { 126 | var imageWidth = !isRotated ? imageData.w : imageData.h; 127 | var imageHeight = !isRotated ? imageData.h : imageData.w; 128 | 129 | if (imageHeight > stageData.h || imageWidth > stageData.w) { 130 | stage.addClass('is-grab'); 131 | } 132 | if (imageHeight <= stageData.h && imageWidth <= stageData.w) { 133 | stage.removeClass('is-grab'); 134 | } 135 | } 136 | 137 | /** 138 | * Check if browser support touch event 139 | * @return {Boolean} 140 | */ 141 | function supportTouch() { 142 | return !!( 143 | 'ontouchstart' in window || (window.DocumentTouch && document instanceof window.DocumentTouch) 144 | ); 145 | } 146 | 147 | /** 148 | * Check if the browser is IE8 149 | * @return {Boolean} 150 | */ 151 | function isIE8() { 152 | return ( 153 | (navigator.appName == 'Microsoft Internet Explorer' && navigator.appVersion.indexOf('MSIE 8.0') > 0) || 154 | (navigator.appName == 'Microsoft Internet Explorer' && navigator.appVersion.indexOf('MSIE 7.0') > 0) 155 | ); 156 | } 157 | -------------------------------------------------------------------------------- /src/sass/_fullscreen.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Fullscreen 3 | // 4 | 5 | $fullscreen-list: -webkit-full-screen, -moz-full-screen, -ms-fullscreen, full-screen, fullscreen; 6 | $backdrop-list: backdrop, -ms-backdrop; 7 | 8 | @each $fullscreen in $fullscreen-list { 9 | :#{$fullscreen} { 10 | top: 0 !important; 11 | left: 0 !important; 12 | width: 100% !important; 13 | height: 100% !important; 14 | 15 | .magnify-header, 16 | .magnify-footer, 17 | .magnify-resizable-handle { 18 | display: none; 19 | } 20 | 21 | .magnify-stage { 22 | top: 0; 23 | right: 0; 24 | bottom: 0; 25 | left: 0; 26 | border-width: 0; 27 | background-color: #000; 28 | } 29 | } 30 | } 31 | 32 | @each $backdrop in $backdrop-list { 33 | ::#{$backdrop} { 34 | background-color: #000; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/sass/_general.scss: -------------------------------------------------------------------------------- 1 | // 2 | // General 3 | // 4 | 5 | .magnify-modal { 6 | position: absolute; 7 | z-index: 1090; 8 | width: 320px; 9 | height: 320px; 10 | background-color: #111; 11 | background-color: rgba(0, 0, 0, .84); 12 | box-shadow: 0 0 4px 1px rgba(0, 0, 0, .32); 13 | cursor: default; 14 | outline: none; 15 | color: #ccc; 16 | } 17 | 18 | .magnify-maximize { 19 | position: fixed; 20 | top: 0; 21 | left: 0; 22 | width: 100%; 23 | height: 100%; 24 | } 25 | 26 | .magnify-toolbar { 27 | font-size: 0; 28 | } 29 | 30 | .magnify-header { 31 | position: relative; 32 | z-index: 2; 33 | height: 40px; 34 | 35 | .magnify-toolbar { 36 | float: right; 37 | 38 | [dir='rtl'] & { 39 | float: left; 40 | } 41 | } 42 | } 43 | 44 | .magnify-title { 45 | padding: 13px 10px; 46 | font-size: 14px; 47 | line-height: 1; 48 | white-space: nowrap; 49 | text-overflow: ellipsis; 50 | user-select: none; 51 | overflow: hidden; 52 | } 53 | 54 | .magnify-stage { 55 | position: absolute; 56 | top: 40px; 57 | right: 10px; 58 | bottom: 40px; 59 | left: 10px; 60 | z-index: 1; 61 | border: 1px solid rgba(255, 255, 255, .64); 62 | overflow: hidden; 63 | 64 | &.stage-ready { 65 | text-align: center; 66 | font-size: 0; 67 | 68 | &::before { 69 | content: ''; 70 | display: inline-block; 71 | height: 100%; 72 | vertical-align: middle; 73 | overflow: hidden; 74 | } 75 | } 76 | } 77 | 78 | .magnify-image { 79 | position: absolute; 80 | display: inline-block; 81 | 82 | &.image-ready { 83 | position: static; 84 | max-width: 100%; 85 | max-height: 100%; 86 | vertical-align: middle; 87 | } 88 | } 89 | 90 | .magnify-footer { 91 | position: absolute; 92 | bottom: 0; 93 | z-index: 2; 94 | width: 100%; 95 | height: 40px; 96 | text-align: center; 97 | 98 | .magnify-toolbar { 99 | display: inline-block; 100 | } 101 | } 102 | 103 | .magnify-button { 104 | display: inline-block; 105 | min-width: 40px; 106 | height: 40px; 107 | box-sizing: border-box; 108 | margin: 0; 109 | font-size: 14px; 110 | line-height: 1; 111 | text-align: center; 112 | background: none; 113 | border-width: 0; 114 | border-radius: 0; 115 | color: inherit; 116 | cursor: pointer; 117 | outline: none; 118 | 119 | &:hover { 120 | color: #fff; 121 | } 122 | 123 | &:focus { 124 | background-color: rgba(255, 255, 255, .08); 125 | } 126 | 127 | svg { 128 | display: inline-block; 129 | font-size: inherit; 130 | width: 1em; 131 | height: 1em; 132 | overflow: visible; 133 | vertical-align: -.125em; 134 | } 135 | } 136 | 137 | .magnify-button-close:hover { 138 | background-color: #ff4545; 139 | } 140 | 141 | .magnify-button-maximize:hover { 142 | background-color: #525252; 143 | } 144 | 145 | .magnify-button-minimize:hover { 146 | background-color: #525252; 147 | } 148 | -------------------------------------------------------------------------------- /src/sass/_helpers.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Helpers 3 | // 4 | 5 | .is-grab { 6 | cursor: move; 7 | cursor: -webkit-grab; 8 | cursor: grab; 9 | } 10 | 11 | .is-grabbing { 12 | cursor: move; 13 | cursor: -webkit-grabbing; 14 | cursor: grabbing; 15 | } 16 | -------------------------------------------------------------------------------- /src/sass/_loader.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Loader 3 | // 4 | 5 | .magnify-loader { 6 | position: absolute; 7 | top: 0; 8 | left: 0; 9 | right: 0; 10 | bottom: 0; 11 | z-index: 2; 12 | text-align: center; 13 | background-color: rgba(0, 0, 0, .3); 14 | color: #333; 15 | 16 | &::before { 17 | content: ''; 18 | display: inline-block; 19 | position: relative; 20 | width: 36px; 21 | height: 36px; 22 | box-sizing: border-box; 23 | border-width: 5px; 24 | border-style: solid; 25 | border-color: rgba(0, 0, 0, .5) rgba(0, 0, 0, .5) rgba(0, 0, 0, .5) rgba(255, 255, 255, .5); 26 | border-radius: 100%; 27 | vertical-align: middle; 28 | animation: magnifyLoading 1s infinite linear; 29 | } 30 | 31 | &::after { 32 | content: ''; 33 | display: inline-block; 34 | width: 0; 35 | height: 100%; 36 | vertical-align: middle; 37 | overflow: hidden; 38 | } 39 | } 40 | 41 | @keyframes magnifyLoading { 42 | 0% { 43 | transform: rotateZ(0deg) translate3d(0, 0, 0); 44 | } 45 | 46 | 100% { 47 | transform: rotateZ(360deg) translate3d(0, 0, 0); 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/sass/_resizable.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Resizable 3 | // 4 | 5 | .magnify-resizable-handle { 6 | position: absolute; 7 | z-index: 10; 8 | } 9 | 10 | .magnify-resizable-handle-e { 11 | top: 0; 12 | right: -5px; 13 | bottom: 0; 14 | left: auto; 15 | width: 10px; 16 | cursor: e-resize; 17 | } 18 | 19 | .magnify-resizable-handle-s { 20 | top: auto; 21 | right: 0; 22 | bottom: -5px; 23 | left: 0; 24 | height: 10px; 25 | cursor: s-resize; 26 | } 27 | 28 | .magnify-resizable-handle-w { 29 | top: 0; 30 | right: auto; 31 | bottom: 0; 32 | left: -5px; 33 | width: 10px; 34 | cursor: w-resize; 35 | } 36 | 37 | .magnify-resizable-handle-n { 38 | top: -5px; 39 | right: 0; 40 | bottom: auto; 41 | left: 0; 42 | height: 10px; 43 | cursor: n-resize; 44 | } 45 | 46 | .magnify-resizable-handle-se { 47 | top: auto; 48 | right: -5px; 49 | bottom: -5px; 50 | left: auto; 51 | width: 10px; 52 | height: 10px; 53 | cursor: se-resize; 54 | } 55 | 56 | .magnify-resizable-handle-sw { 57 | top: auto; 58 | right: auto; 59 | bottom: -5px; 60 | left: -5px; 61 | width: 10px; 62 | height: 10px; 63 | cursor: sw-resize; 64 | } 65 | 66 | .magnify-resizable-handle-nw { 67 | top: -5px; 68 | right: auto; 69 | bottom: auto; 70 | left: -5px; 71 | width: 10px; 72 | height: 10px; 73 | cursor: nw-resize; 74 | } 75 | 76 | .magnify-resizable-handle-ne { 77 | top: -5px; 78 | right: -5px; 79 | bottom: auto; 80 | left: auto; 81 | width: 10px; 82 | height: 10px; 83 | cursor: ne-resize; 84 | } 85 | -------------------------------------------------------------------------------- /src/sass/magnify.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * __ __ _ ____ _ _ ___ _______ __ 3 | * | \/ | / \ / ___| \ | |_ _| ___\ \ / / 4 | * | |\/| | / _ \| | _| \| || || |_ \ V / 5 | * | | | |/ ___ \ |_| | |\ || || _| | | 6 | * |_| |_/_/ \_\____|_| \_|___|_| |_| 7 | * 8 | * jquery.magnify - v1.6.3 9 | * A jQuery plugin to view images just like in windows 10 | * https://github.com/nzbin/magnify#readme 11 | * 12 | * Copyright (c) 2017 nzbin 13 | * Released under the MIT License 14 | */ 15 | 16 | @import "general"; 17 | @import "resizable"; 18 | @import "fullscreen"; 19 | @import "helpers"; 20 | @import "loader"; 21 | --------------------------------------------------------------------------------