├── .editorconfig ├── .eslintrc ├── .gitattributes ├── .gitignore ├── .travis.yml ├── CHANGELOG.md ├── LICENSE ├── README.md ├── babel.config.js ├── dist ├── jquery-viewer.common.js ├── jquery-viewer.esm.js ├── jquery-viewer.js └── jquery-viewer.min.js ├── docs ├── css │ └── main.css ├── images │ ├── thumbnails │ │ ├── tibet-1.jpg │ │ ├── tibet-2.jpg │ │ ├── tibet-3.jpg │ │ ├── tibet-4.jpg │ │ ├── tibet-5.jpg │ │ ├── tibet-6.jpg │ │ ├── tibet-7.jpg │ │ ├── tibet-8.jpg │ │ └── tibet-9.jpg │ ├── tibet-1.jpg │ ├── tibet-2.jpg │ ├── tibet-3.jpg │ ├── tibet-4.jpg │ ├── tibet-5.jpg │ ├── tibet-6.jpg │ ├── tibet-7.jpg │ ├── tibet-8.jpg │ └── tibet-9.jpg ├── index.html └── js │ ├── jquery-viewer.js │ └── main.js ├── karma.conf.js ├── package-lock.json ├── package.json ├── rollup.config.js ├── src └── index.js └── test └── index.js /.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 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "airbnb-base", 3 | "env": { 4 | "browser": true 5 | }, 6 | "root": true, 7 | "rules": { 8 | "import/no-extraneous-dependencies": "off" 9 | }, 10 | "overrides": [ 11 | { 12 | "files": "test/**/*.js", 13 | "env": { 14 | "jquery": true, 15 | "mocha": true 16 | }, 17 | "globals": { 18 | "$": true, 19 | "expect": true 20 | }, 21 | "rules": { 22 | "no-unused-expressions": "off" 23 | } 24 | } 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.local 2 | *.map 3 | coverage 4 | node_modules 5 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: node 3 | cache: npm 4 | script: 5 | - npm run lint 6 | - npm run build 7 | - npm test 8 | after_success: 9 | - npm run codecov 10 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## 1.0.1 (Dec 14, 2019) 4 | 5 | - Register as a plugin only when both the jQuery and Cropper.js are existing. 6 | 7 | ## 1.0.0 (Apr 1, 2018) 8 | 9 | - Just released as a stable version. 10 | 11 | ## 1.0.0-beta (Mar 15, 2018) 12 | 13 | - Simplify `undefined` checking. 14 | 15 | ## 1.0.0-alpha (Mar 10, 2018) 16 | 17 | - Init. 18 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright 2018-present Chen Fengyuan 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 13 | all 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 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # jquery-viewer 2 | 3 | [![Build Status](https://img.shields.io/travis/fengyuanchen/jquery-viewer.svg)](https://travis-ci.org/fengyuanchen/jquery-viewer) [![Coverage Status](https://img.shields.io/codecov/c/github/fengyuanchen/jquery-viewer.svg)](https://codecov.io/gh/fengyuanchen/jquery-viewer) [![Downloads](https://img.shields.io/npm/dm/jquery-viewer.svg)](https://www.npmjs.com/package/jquery-viewer) [![Version](https://img.shields.io/npm/v/jquery-viewer.svg)](https://www.npmjs.com/package/jquery-viewer) 4 | 5 | > A jQuery plugin wrapper for [Viewer.js](https://github.com/fengyuanchen/viewerjs). 6 | 7 | - [Demo](https://fengyuanchen.github.io/jquery-viewer) 8 | 9 | ## Main 10 | 11 | ```text 12 | dist/ 13 | ├── jquery-viewer.js (UMD) 14 | ├── jquery-viewer.min.js (UMD, compressed) 15 | ├── jquery-viewer.common.js (CommonJS, default) 16 | └── jquery-viewer.esm.js (ES Module) 17 | ``` 18 | 19 | ## Getting started 20 | 21 | ### Installation 22 | 23 | ```shell 24 | npm install jquery-viewer jquery viewerjs 25 | ``` 26 | 27 | Include files: 28 | 29 | ```html 30 | 31 | 32 | 33 | 34 | ``` 35 | 36 | ### Usage 37 | 38 | Initialize with `$.fn.viewer` method. 39 | 40 | ```html 41 | 42 |
43 | Picture 44 |
45 | 46 |
47 | 52 |
53 | ``` 54 | 55 | ```js 56 | var $image = $('#image'); 57 | 58 | $image.viewer({ 59 | inline: true, 60 | viewed: function() { 61 | $image.viewer('zoomTo', 1); 62 | } 63 | }); 64 | 65 | // Get the Viewer.js instance after initialized 66 | var viewer = $image.data('viewer'); 67 | 68 | // View a list of images 69 | $('#images').viewer(); 70 | ``` 71 | 72 | ## Options 73 | 74 | See the available [options](https://github.com/fengyuanchen/viewerjs#options) of Viewer.js. 75 | 76 | ```js 77 | $().viewer(options); 78 | ``` 79 | 80 | ## Methods 81 | 82 | See the available [methods](https://github.com/fengyuanchen/viewerjs#methods) of Viewer.js. 83 | 84 | ```js 85 | $().viewer('method', argument1, , argument2, ..., argumentN); 86 | ``` 87 | 88 | ## Events 89 | 90 | See the available [events](https://github.com/fengyuanchen/viewerjs#events) of Viewer.js. 91 | 92 | ```js 93 | $().on('event', handler); 94 | ``` 95 | 96 | ## No conflict 97 | 98 | If you have to use other plugin with the same namespace, just call the `$.fn.viewer.noConflict` method to revert to it. 99 | 100 | ```html 101 | 102 | 103 | 107 | ``` 108 | 109 | ## Browser support 110 | 111 | It is the same as the [browser support of Viewer.js](https://github.com/fengyuanchen/viewerjs#browser-support). As a jQuery plugin, you also need to see the [jQuery Browser Support](https://jquery.com/browser-support/). 112 | 113 | ## Versioning 114 | 115 | Maintained under the [Semantic Versioning guidelines](https://semver.org/). 116 | 117 | ## License 118 | 119 | [MIT](https://opensource.org/licenses/MIT) © [Chen Fengyuan](https://chenfengyuan.com/) 120 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | [ 4 | '@babel/preset-env', 5 | { 6 | modules: false, 7 | }, 8 | ], 9 | ], 10 | env: { 11 | test: { 12 | plugins: [ 13 | 'istanbul', 14 | ], 15 | }, 16 | }, 17 | }; 18 | -------------------------------------------------------------------------------- /dist/jquery-viewer.common.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * jQuery Viewer v1.0.1 3 | * https://fengyuanchen.github.io/jquery-viewer 4 | * 5 | * Copyright 2018-present Chen Fengyuan 6 | * Released under the MIT license 7 | * 8 | * Date: 2019-12-14T09:00:02.315Z 9 | */ 10 | 11 | 'use strict'; 12 | 13 | function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; } 14 | 15 | var $ = _interopDefault(require('jquery')); 16 | var Viewer = _interopDefault(require('viewerjs')); 17 | 18 | if ($ && $.fn && Viewer) { 19 | var AnotherViewer = $.fn.viewer; 20 | var NAMESPACE = 'viewer'; 21 | 22 | $.fn.viewer = function jQueryViewer(option) { 23 | for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { 24 | args[_key - 1] = arguments[_key]; 25 | } 26 | 27 | var result; 28 | this.each(function (i, element) { 29 | var $element = $(element); 30 | var isDestroy = option === 'destroy'; 31 | var viewer = $element.data(NAMESPACE); 32 | 33 | if (!viewer) { 34 | if (isDestroy) { 35 | return; 36 | } 37 | 38 | var options = $.extend({}, $element.data(), $.isPlainObject(option) && option); 39 | viewer = new Viewer(element, options); 40 | $element.data(NAMESPACE, viewer); 41 | } 42 | 43 | if (typeof option === 'string') { 44 | var fn = viewer[option]; 45 | 46 | if ($.isFunction(fn)) { 47 | result = fn.apply(viewer, args); 48 | 49 | if (result === viewer) { 50 | result = undefined; 51 | } 52 | 53 | if (isDestroy) { 54 | $element.removeData(NAMESPACE); 55 | } 56 | } 57 | } 58 | }); 59 | return result !== undefined ? result : this; 60 | }; 61 | 62 | $.fn.viewer.Constructor = Viewer; 63 | $.fn.viewer.setDefaults = Viewer.setDefaults; 64 | 65 | $.fn.viewer.noConflict = function noConflict() { 66 | $.fn.viewer = AnotherViewer; 67 | return this; 68 | }; 69 | } 70 | -------------------------------------------------------------------------------- /dist/jquery-viewer.esm.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * jQuery Viewer v1.0.1 3 | * https://fengyuanchen.github.io/jquery-viewer 4 | * 5 | * Copyright 2018-present Chen Fengyuan 6 | * Released under the MIT license 7 | * 8 | * Date: 2019-12-14T09:00:02.315Z 9 | */ 10 | 11 | import $ from 'jquery'; 12 | import Viewer from 'viewerjs'; 13 | 14 | if ($ && $.fn && Viewer) { 15 | var AnotherViewer = $.fn.viewer; 16 | var NAMESPACE = 'viewer'; 17 | 18 | $.fn.viewer = function jQueryViewer(option) { 19 | for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { 20 | args[_key - 1] = arguments[_key]; 21 | } 22 | 23 | var result; 24 | this.each(function (i, element) { 25 | var $element = $(element); 26 | var isDestroy = option === 'destroy'; 27 | var viewer = $element.data(NAMESPACE); 28 | 29 | if (!viewer) { 30 | if (isDestroy) { 31 | return; 32 | } 33 | 34 | var options = $.extend({}, $element.data(), $.isPlainObject(option) && option); 35 | viewer = new Viewer(element, options); 36 | $element.data(NAMESPACE, viewer); 37 | } 38 | 39 | if (typeof option === 'string') { 40 | var fn = viewer[option]; 41 | 42 | if ($.isFunction(fn)) { 43 | result = fn.apply(viewer, args); 44 | 45 | if (result === viewer) { 46 | result = undefined; 47 | } 48 | 49 | if (isDestroy) { 50 | $element.removeData(NAMESPACE); 51 | } 52 | } 53 | } 54 | }); 55 | return result !== undefined ? result : this; 56 | }; 57 | 58 | $.fn.viewer.Constructor = Viewer; 59 | $.fn.viewer.setDefaults = Viewer.setDefaults; 60 | 61 | $.fn.viewer.noConflict = function noConflict() { 62 | $.fn.viewer = AnotherViewer; 63 | return this; 64 | }; 65 | } 66 | -------------------------------------------------------------------------------- /dist/jquery-viewer.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * jQuery Viewer v1.0.1 3 | * https://fengyuanchen.github.io/jquery-viewer 4 | * 5 | * Copyright 2018-present Chen Fengyuan 6 | * Released under the MIT license 7 | * 8 | * Date: 2019-12-14T09:00:02.315Z 9 | */ 10 | 11 | (function (global, factory) { 12 | typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('jquery'), require('viewerjs')) : 13 | typeof define === 'function' && define.amd ? define(['jquery', 'viewerjs'], factory) : 14 | (global = global || self, factory(global.jQuery, global.Viewer)); 15 | }(this, (function ($, Viewer) { 'use strict'; 16 | 17 | $ = $ && $.hasOwnProperty('default') ? $['default'] : $; 18 | Viewer = Viewer && Viewer.hasOwnProperty('default') ? Viewer['default'] : Viewer; 19 | 20 | if ($ && $.fn && Viewer) { 21 | var AnotherViewer = $.fn.viewer; 22 | var NAMESPACE = 'viewer'; 23 | 24 | $.fn.viewer = function jQueryViewer(option) { 25 | for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { 26 | args[_key - 1] = arguments[_key]; 27 | } 28 | 29 | var result; 30 | this.each(function (i, element) { 31 | var $element = $(element); 32 | var isDestroy = option === 'destroy'; 33 | var viewer = $element.data(NAMESPACE); 34 | 35 | if (!viewer) { 36 | if (isDestroy) { 37 | return; 38 | } 39 | 40 | var options = $.extend({}, $element.data(), $.isPlainObject(option) && option); 41 | viewer = new Viewer(element, options); 42 | $element.data(NAMESPACE, viewer); 43 | } 44 | 45 | if (typeof option === 'string') { 46 | var fn = viewer[option]; 47 | 48 | if ($.isFunction(fn)) { 49 | result = fn.apply(viewer, args); 50 | 51 | if (result === viewer) { 52 | result = undefined; 53 | } 54 | 55 | if (isDestroy) { 56 | $element.removeData(NAMESPACE); 57 | } 58 | } 59 | } 60 | }); 61 | return result !== undefined ? result : this; 62 | }; 63 | 64 | $.fn.viewer.Constructor = Viewer; 65 | $.fn.viewer.setDefaults = Viewer.setDefaults; 66 | 67 | $.fn.viewer.noConflict = function noConflict() { 68 | $.fn.viewer = AnotherViewer; 69 | return this; 70 | }; 71 | } 72 | 73 | }))); 74 | -------------------------------------------------------------------------------- /dist/jquery-viewer.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * jQuery Viewer v1.0.1 3 | * https://fengyuanchen.github.io/jquery-viewer 4 | * 5 | * Copyright 2018-present Chen Fengyuan 6 | * Released under the MIT license 7 | * 8 | * Date: 2019-12-14T09:00:02.315Z 9 | */ 10 | !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(require("jquery"),require("viewerjs")):"function"==typeof define&&define.amd?define(["jquery","viewerjs"],t):t((e=e||self).jQuery,e.Viewer)}(this,function(d,v){"use strict";if(d=d&&d.hasOwnProperty("default")?d.default:d,v=v&&v.hasOwnProperty("default")?v.default:v,d&&d.fn&&v){var e=d.fn.viewer,w="viewer";d.fn.viewer=function(o){for(var e=arguments.length,u=new Array(1 .btn { 11 | flex: 1; 12 | } 13 | 14 | .carbonads { 15 | border: 1px solid #ccc; 16 | border-radius: 0.25rem; 17 | font-size: 0.875rem; 18 | overflow: hidden; 19 | padding: 1rem; 20 | } 21 | 22 | .carbon-wrap { 23 | overflow: hidden; 24 | } 25 | 26 | .carbon-img { 27 | clear: left; 28 | display: block; 29 | float: left; 30 | } 31 | 32 | .carbon-text, 33 | .carbon-poweredby { 34 | display: block; 35 | margin-left: 140px; 36 | } 37 | 38 | .carbon-text, 39 | .carbon-text:hover, 40 | .carbon-text:focus { 41 | color: #fff; 42 | text-decoration: none; 43 | } 44 | 45 | .carbon-poweredby, 46 | .carbon-poweredby:hover, 47 | .carbon-poweredby:focus { 48 | color: #ddd; 49 | text-decoration: none; 50 | } 51 | 52 | @media (min-width: 768px) { 53 | .carbonads { 54 | float: right; 55 | margin-bottom: -1rem; 56 | margin-top: -1rem; 57 | max-width: 360px; 58 | } 59 | } 60 | 61 | .footer { 62 | font-size: 0.875rem; 63 | } 64 | 65 | .heart { 66 | color: #ddd; 67 | display: block; 68 | height: 2rem; 69 | line-height: 2rem; 70 | margin-bottom: 0; 71 | margin-top: 1rem; 72 | position: relative; 73 | text-align: center; 74 | width: 100%; 75 | } 76 | 77 | .heart:hover { 78 | color: #ff4136; 79 | } 80 | 81 | .heart::before { 82 | border-top: 1px solid #eee; 83 | content: " "; 84 | display: block; 85 | height: 0; 86 | left: 0; 87 | position: absolute; 88 | right: 0; 89 | top: 50%; 90 | } 91 | 92 | .heart::after { 93 | background-color: #fff; 94 | content: "♥"; 95 | padding-left: 0.5rem; 96 | padding-right: 0.5rem; 97 | position: relative; 98 | z-index: 1; 99 | } 100 | 101 | .docs-pictures { 102 | list-style: none; 103 | margin: 0; 104 | padding: 0; 105 | } 106 | 107 | .docs-pictures > li { 108 | border: 1px solid transparent; 109 | float: left; 110 | height: calc(100% / 3); 111 | margin: 0 -1px -1px 0; 112 | overflow: hidden; 113 | width: calc(100% / 3); 114 | } 115 | 116 | .docs-pictures > li > img { 117 | cursor: -webkit-zoom-in; 118 | cursor: zoom-in; 119 | width: 100%; 120 | } 121 | 122 | .docs-buttons > .btn-group, 123 | .docs-buttons > .input-group { 124 | margin-bottom: 5px; 125 | width: 100%; 126 | } 127 | 128 | .docs-buttons .input-group-prepend { 129 | width: 50%; 130 | } 131 | 132 | .docs-buttons .input-group-prepend .btn { 133 | width: 100%; 134 | } 135 | -------------------------------------------------------------------------------- /docs/images/thumbnails/tibet-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fengyuanchen/jquery-viewer/2f936de8fac1852234d783bc34fbd504f6cae9bd/docs/images/thumbnails/tibet-1.jpg -------------------------------------------------------------------------------- /docs/images/thumbnails/tibet-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fengyuanchen/jquery-viewer/2f936de8fac1852234d783bc34fbd504f6cae9bd/docs/images/thumbnails/tibet-2.jpg -------------------------------------------------------------------------------- /docs/images/thumbnails/tibet-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fengyuanchen/jquery-viewer/2f936de8fac1852234d783bc34fbd504f6cae9bd/docs/images/thumbnails/tibet-3.jpg -------------------------------------------------------------------------------- /docs/images/thumbnails/tibet-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fengyuanchen/jquery-viewer/2f936de8fac1852234d783bc34fbd504f6cae9bd/docs/images/thumbnails/tibet-4.jpg -------------------------------------------------------------------------------- /docs/images/thumbnails/tibet-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fengyuanchen/jquery-viewer/2f936de8fac1852234d783bc34fbd504f6cae9bd/docs/images/thumbnails/tibet-5.jpg -------------------------------------------------------------------------------- /docs/images/thumbnails/tibet-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fengyuanchen/jquery-viewer/2f936de8fac1852234d783bc34fbd504f6cae9bd/docs/images/thumbnails/tibet-6.jpg -------------------------------------------------------------------------------- /docs/images/thumbnails/tibet-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fengyuanchen/jquery-viewer/2f936de8fac1852234d783bc34fbd504f6cae9bd/docs/images/thumbnails/tibet-7.jpg -------------------------------------------------------------------------------- /docs/images/thumbnails/tibet-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fengyuanchen/jquery-viewer/2f936de8fac1852234d783bc34fbd504f6cae9bd/docs/images/thumbnails/tibet-8.jpg -------------------------------------------------------------------------------- /docs/images/thumbnails/tibet-9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fengyuanchen/jquery-viewer/2f936de8fac1852234d783bc34fbd504f6cae9bd/docs/images/thumbnails/tibet-9.jpg -------------------------------------------------------------------------------- /docs/images/tibet-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fengyuanchen/jquery-viewer/2f936de8fac1852234d783bc34fbd504f6cae9bd/docs/images/tibet-1.jpg -------------------------------------------------------------------------------- /docs/images/tibet-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fengyuanchen/jquery-viewer/2f936de8fac1852234d783bc34fbd504f6cae9bd/docs/images/tibet-2.jpg -------------------------------------------------------------------------------- /docs/images/tibet-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fengyuanchen/jquery-viewer/2f936de8fac1852234d783bc34fbd504f6cae9bd/docs/images/tibet-3.jpg -------------------------------------------------------------------------------- /docs/images/tibet-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fengyuanchen/jquery-viewer/2f936de8fac1852234d783bc34fbd504f6cae9bd/docs/images/tibet-4.jpg -------------------------------------------------------------------------------- /docs/images/tibet-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fengyuanchen/jquery-viewer/2f936de8fac1852234d783bc34fbd504f6cae9bd/docs/images/tibet-5.jpg -------------------------------------------------------------------------------- /docs/images/tibet-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fengyuanchen/jquery-viewer/2f936de8fac1852234d783bc34fbd504f6cae9bd/docs/images/tibet-6.jpg -------------------------------------------------------------------------------- /docs/images/tibet-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fengyuanchen/jquery-viewer/2f936de8fac1852234d783bc34fbd504f6cae9bd/docs/images/tibet-7.jpg -------------------------------------------------------------------------------- /docs/images/tibet-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fengyuanchen/jquery-viewer/2f936de8fac1852234d783bc34fbd504f6cae9bd/docs/images/tibet-8.jpg -------------------------------------------------------------------------------- /docs/images/tibet-9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fengyuanchen/jquery-viewer/2f936de8fac1852234d783bc34fbd504f6cae9bd/docs/images/tibet-9.jpg -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | jquery-viewer 10 | 11 | 12 | 13 | 14 | 15 | 16 | 24 | 25 | 26 |
27 |
28 | jquery-viewer 29 | 32 | 41 |
42 |
43 | 44 | 45 |
46 |
47 |
48 |
49 |

jquery-viewer v1.0.1

50 |

A jQuery plugin wrapper for Viewer.js.

51 |
52 |
53 |
54 | 55 |
56 |
57 |
58 |
59 |
60 | 61 | 62 |
63 |

Overview

64 |
65 |
66 |
67 |

Options

68 |
69 |
70 |
71 | 74 | 77 |
78 | 79 |
80 |
    81 |
  • 82 |
    83 | 84 | 85 |
    86 |
    • 87 |
  • 88 |
    89 | 90 | 91 |
    92 |
    • 93 |
  • 94 |
    95 | 96 | 97 |
    98 |
    • 99 |
  • 100 |
    101 | 102 | 103 |
    104 |
    • 105 |
  • 106 |
    107 | 108 | 109 |
    110 |
    • 111 |
  • 112 |
    113 | 114 | 115 |
    116 |
    • 117 |
  • 118 |
    119 | 120 | 121 |
    122 |
    • 123 |
  • 124 |
    125 | 126 | 127 |
    128 |
    • 129 |
  • 130 |
    131 | 132 | 133 |
    134 |
    • 135 |
  • 136 |
    137 | 138 | 139 |
    140 |
    • 141 |
  • 142 |
    143 | 144 | 145 |
    146 |
    • 147 |
  • 148 |
    149 | 150 | 151 |
    152 |
    • 153 |
  • 154 |
    155 | 156 | 157 |
    158 |
    • 159 |
  • 160 |
    161 | 162 | 163 |
    164 |
    • 165 |
  • 166 |
    167 | 168 | 169 |
    170 |
    • 171 |
  • 172 |
    173 | 174 | 175 |
    176 |
    • 177 |
  • 178 |
    179 | 180 | 181 |
    182 |
    • 183 |
  • 184 |
    185 | 186 | 187 |
    188 |
    • 189 |
  • 190 |
    191 | 192 | 193 |
    194 |
    • 195 |
196 |
197 |
198 |
199 |
200 |

Demo

201 |
202 |
203 |
    204 |
  • Cuo Na Lake
    • 205 |
  • Tibetan Plateau
    • 206 |
  • Jokhang Temple
    • 207 |
  • Potala Palace 1
    • 208 |
  • Potala Palace 2
    • 209 |
  • Potala Palace 3
    • 210 |
  • Lhasa River
    • 211 |
  • Namtso 1
    • 212 |
  • Namtso 2
    • 213 |
214 |
215 |
216 |
217 |

Methods

218 |
219 |
220 |
221 | 222 | 223 | 224 | 225 |
226 |
227 | 228 | 229 | 230 | 231 |
232 |
233 | 234 | 235 | 236 | 237 |
238 |
239 | 240 | 241 | 242 | 243 |
244 |
245 | 246 | 247 | 248 | 249 |
250 |
251 | 252 | 253 |
254 |
255 | 256 | 257 |
258 |
259 | 260 | 261 |
262 |
263 | 264 | 265 | 266 | 267 |
268 |
269 | 270 | 271 | 272 | 273 |
274 |
275 | 276 | 277 | 278 | 279 |
280 |
281 | 282 | 283 |
284 | 285 |
286 |
287 |
288 |
289 | 290 | 291 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | -------------------------------------------------------------------------------- /docs/js/jquery-viewer.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * jQuery Viewer v1.0.1 3 | * https://fengyuanchen.github.io/jquery-viewer 4 | * 5 | * Copyright 2018-present Chen Fengyuan 6 | * Released under the MIT license 7 | * 8 | * Date: 2019-12-14T09:00:02.315Z 9 | */ 10 | 11 | (function (global, factory) { 12 | typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('jquery'), require('viewerjs')) : 13 | typeof define === 'function' && define.amd ? define(['jquery', 'viewerjs'], factory) : 14 | (global = global || self, factory(global.jQuery, global.Viewer)); 15 | }(this, (function ($, Viewer) { 'use strict'; 16 | 17 | $ = $ && $.hasOwnProperty('default') ? $['default'] : $; 18 | Viewer = Viewer && Viewer.hasOwnProperty('default') ? Viewer['default'] : Viewer; 19 | 20 | if ($ && $.fn && Viewer) { 21 | var AnotherViewer = $.fn.viewer; 22 | var NAMESPACE = 'viewer'; 23 | 24 | $.fn.viewer = function jQueryViewer(option) { 25 | for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { 26 | args[_key - 1] = arguments[_key]; 27 | } 28 | 29 | var result; 30 | this.each(function (i, element) { 31 | var $element = $(element); 32 | var isDestroy = option === 'destroy'; 33 | var viewer = $element.data(NAMESPACE); 34 | 35 | if (!viewer) { 36 | if (isDestroy) { 37 | return; 38 | } 39 | 40 | var options = $.extend({}, $element.data(), $.isPlainObject(option) && option); 41 | viewer = new Viewer(element, options); 42 | $element.data(NAMESPACE, viewer); 43 | } 44 | 45 | if (typeof option === 'string') { 46 | var fn = viewer[option]; 47 | 48 | if ($.isFunction(fn)) { 49 | result = fn.apply(viewer, args); 50 | 51 | if (result === viewer) { 52 | result = undefined; 53 | } 54 | 55 | if (isDestroy) { 56 | $element.removeData(NAMESPACE); 57 | } 58 | } 59 | } 60 | }); 61 | return result !== undefined ? result : this; 62 | }; 63 | 64 | $.fn.viewer.Constructor = Viewer; 65 | $.fn.viewer.setDefaults = Viewer.setDefaults; 66 | 67 | $.fn.viewer.noConflict = function noConflict() { 68 | $.fn.viewer = AnotherViewer; 69 | return this; 70 | }; 71 | } 72 | 73 | }))); 74 | -------------------------------------------------------------------------------- /docs/js/main.js: -------------------------------------------------------------------------------- 1 | $(function () { 2 | 'use strict'; 3 | 4 | var console = window.console || { log: function () {} }; 5 | var $images = $('.docs-pictures'); 6 | var $toggles = $('.docs-toggles'); 7 | var $buttons = $('.docs-buttons'); 8 | var options = { 9 | // inline: true, 10 | url: 'data-original', 11 | ready: function (e) { 12 | console.log(e.type); 13 | }, 14 | show: function (e) { 15 | console.log(e.type); 16 | }, 17 | shown: function (e) { 18 | console.log(e.type); 19 | }, 20 | hide: function (e) { 21 | console.log(e.type); 22 | }, 23 | hidden: function (e) { 24 | console.log(e.type); 25 | }, 26 | view: function (e) { 27 | console.log(e.type); 28 | }, 29 | viewed: function (e) { 30 | console.log(e.type); 31 | } 32 | }; 33 | 34 | function toggleButtons(mode) { 35 | if (/modal|inline|none/.test(mode)) { 36 | $buttons 37 | .find('button[data-enable]') 38 | .prop('disabled', true) 39 | .filter('[data-enable*="' + mode + '"]') 40 | .prop('disabled', false); 41 | } 42 | } 43 | 44 | $images.on({ 45 | ready: function (e) { 46 | console.log(e.type); 47 | }, 48 | show: function (e) { 49 | console.log(e.type); 50 | }, 51 | shown: function (e) { 52 | console.log(e.type); 53 | }, 54 | hide: function (e) { 55 | console.log(e.type); 56 | }, 57 | hidden: function (e) { 58 | console.log(e.type); 59 | }, 60 | view: function (e) { 61 | console.log(e.type); 62 | }, 63 | viewed: function (e) { 64 | console.log(e.type); 65 | } 66 | }).viewer(options); 67 | 68 | toggleButtons(options.inline ? 'inline' : 'modal'); 69 | 70 | $toggles.on('change', 'input', function () { 71 | var $input = $(this); 72 | var name = $input.attr('name'); 73 | 74 | options[name] = name === 'inline' ? $input.data('value') : $input.prop('checked'); 75 | $images.viewer('destroy').viewer(options); 76 | toggleButtons(options.inline ? 'inline' : 'modal'); 77 | }); 78 | 79 | $buttons.on('click', 'button', function () { 80 | var data = $(this).data(); 81 | var args = data.arguments || []; 82 | 83 | if (data.method) { 84 | if (data.target) { 85 | $images.viewer(data.method, $(data.target).val()); 86 | } else { 87 | $images.viewer(data.method, args[0], args[1]); 88 | } 89 | 90 | switch (data.method) { 91 | case 'scaleX': 92 | case 'scaleY': 93 | args[0] = -args[0]; 94 | break; 95 | 96 | case 'destroy': 97 | toggleButtons('none'); 98 | break; 99 | } 100 | } 101 | }); 102 | 103 | $('[data-toggle="tooltip"]').tooltip(); 104 | }); 105 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | const puppeteer = require('puppeteer'); 2 | const rollupConfig = require('./rollup.config'); 3 | 4 | process.env.CHROME_BIN = puppeteer.executablePath(); 5 | process.env.NODE_ENV = 'test'; 6 | 7 | module.exports = (config) => { 8 | config.set({ 9 | autoWatch: false, 10 | browsers: ['ChromeHeadless'], 11 | coverageIstanbulReporter: { 12 | reports: ['html', 'lcovonly', 'text-summary'], 13 | }, 14 | files: [ 15 | 'node_modules/viewerjs/dist/viewer.css', 16 | 'test/index.js', 17 | { 18 | pattern: 'docs/images/*', 19 | included: false, 20 | }, 21 | ], 22 | frameworks: ['mocha', 'chai'], 23 | preprocessors: { 24 | 'test/index.js': ['rollup'], 25 | }, 26 | reporters: ['mocha', 'coverage-istanbul'], 27 | rollupPreprocessor: { 28 | plugins: rollupConfig.plugins, 29 | output: { 30 | format: 'iife', 31 | name: 'Anonymous', 32 | sourcemap: 'inline', 33 | }, 34 | }, 35 | singleRun: true, 36 | }); 37 | }; 38 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jquery-viewer", 3 | "description": "A jQuery plugin wrapper for Viewer.js.", 4 | "version": "1.0.1", 5 | "main": "dist/jquery-viewer.common.js", 6 | "module": "dist/jquery-viewer.esm.js", 7 | "browser": "dist/jquery-viewer.js", 8 | "files": [ 9 | "src", 10 | "dist" 11 | ], 12 | "scripts": { 13 | "build": "rollup -c", 14 | "clear": "del-cli dist", 15 | "codecov": "cat coverage/lcov.info | codecov", 16 | "compress": "uglifyjs dist/jquery-viewer.js -o dist/jquery-viewer.min.js -c -m --comments /^!/", 17 | "lint": "eslint src test *.js --fix", 18 | "release": "npm run clear && npm run lint && npm run build && npm run compress && npm test", 19 | "start": "rollup -c -m -w", 20 | "test": "karma start" 21 | }, 22 | "repository": { 23 | "type": "git", 24 | "url": "git+https://github.com/fengyuanchen/jquery-viewer.git" 25 | }, 26 | "keywords": [ 27 | "image", 28 | "viewer", 29 | "jquery", 30 | "jquery-plugin" 31 | ], 32 | "author": { 33 | "name": "Chen Fengyuan", 34 | "url": "https://chenfengyuan.com/" 35 | }, 36 | "license": "MIT", 37 | "bugs": { 38 | "url": "https://github.com/fengyuanchen/jquery-viewer/issues" 39 | }, 40 | "homepage": "https://fengyuanchen.github.io/jquery-viewer", 41 | "devDependencies": { 42 | "@babel/core": "^7.7.5", 43 | "@babel/preset-env": "^7.7.6", 44 | "@commitlint/cli": "^8.2.0", 45 | "@commitlint/config-conventional": "^8.2.0", 46 | "babel-plugin-istanbul": "^5.2.0", 47 | "chai": "^4.2.0", 48 | "codecov": "^3.6.1", 49 | "create-banner": "^1.0.0", 50 | "viewerjs": "^1.4.0", 51 | "del-cli": "^3.0.0", 52 | "eslint": "^6.7.2", 53 | "eslint-config-airbnb-base": "^14.0.0", 54 | "eslint-plugin-import": "^2.19.1", 55 | "husky": "^3.1.0", 56 | "jquery": "^3.4.1", 57 | "lint-staged": "^9.5.0", 58 | "karma": "^4.4.1", 59 | "karma-chai": "^0.1.0", 60 | "karma-chrome-launcher": "^3.1.0", 61 | "karma-coverage-istanbul-reporter": "^2.1.1", 62 | "karma-mocha": "^1.3.0", 63 | "karma-mocha-reporter": "^2.2.5", 64 | "karma-rollup-preprocessor": "^7.0.2", 65 | "mocha": "^6.2.2", 66 | "puppeteer": "^2.0.0", 67 | "rollup": "^1.27.12", 68 | "rollup-plugin-alias": "^2.2.0", 69 | "rollup-plugin-babel": "^4.3.3", 70 | "rollup-plugin-commonjs": "^10.1.0", 71 | "rollup-plugin-node-resolve": "^5.2.0", 72 | "uglify-js": "^3.7.2" 73 | }, 74 | "peerDependencies": { 75 | "viewerjs": ">=1.5.0", 76 | "jquery": ">=1.9.1" 77 | }, 78 | "browserslist": [ 79 | "last 2 versions", 80 | "> 1%", 81 | "not ie <= 8" 82 | ], 83 | "commitlint": { 84 | "extends": [ 85 | "@commitlint/config-conventional" 86 | ] 87 | }, 88 | "husky": { 89 | "hooks": { 90 | "pre-commit": "lint-staged", 91 | "commit-msg": "commitlint -E HUSKY_GIT_PARAMS" 92 | } 93 | }, 94 | "lint-staged": { 95 | "{src,test}/**/*.js|*.conf*.js": [ 96 | "eslint --fix", 97 | "git add" 98 | ] 99 | } 100 | } 101 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | const alias = require('rollup-plugin-alias'); 2 | const babel = require('rollup-plugin-babel'); 3 | const commonjs = require('rollup-plugin-commonjs'); 4 | const nodeResolve = require('rollup-plugin-node-resolve'); 5 | const createBanner = require('create-banner'); 6 | const pkg = require('./package'); 7 | 8 | const banner = createBanner({ 9 | data: { 10 | name: 'jQuery Viewer', 11 | year: '2018-present', 12 | }, 13 | }); 14 | 15 | module.exports = { 16 | input: 'src/index.js', 17 | output: [ 18 | { 19 | banner, 20 | file: `dist/${pkg.name}.js`, 21 | format: 'umd', 22 | globals: { 23 | jquery: 'jQuery', 24 | viewerjs: 'Viewer', 25 | }, 26 | }, 27 | { 28 | banner, 29 | file: `dist/${pkg.name}.common.js`, 30 | format: 'cjs', 31 | }, 32 | { 33 | banner, 34 | file: `dist/${pkg.name}.esm.js`, 35 | format: 'esm', 36 | }, 37 | { 38 | banner, 39 | file: `docs/js/${pkg.name}.js`, 40 | format: 'umd', 41 | globals: { 42 | jquery: 'jQuery', 43 | viewerjs: 'Viewer', 44 | }, 45 | }, 46 | ], 47 | external: ['jquery', 'viewerjs'], 48 | plugins: [ 49 | alias({ 50 | viewerjs: 'node_modules/viewerjs/src/index.js', 51 | }), 52 | nodeResolve(), 53 | commonjs(), 54 | babel(), 55 | ], 56 | }; 57 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import $ from 'jquery'; 2 | import Viewer from 'viewerjs'; 3 | 4 | if ($ && $.fn && Viewer) { 5 | const AnotherViewer = $.fn.viewer; 6 | const NAMESPACE = 'viewer'; 7 | 8 | $.fn.viewer = function jQueryViewer(option, ...args) { 9 | let result; 10 | 11 | this.each((i, element) => { 12 | const $element = $(element); 13 | const isDestroy = option === 'destroy'; 14 | let viewer = $element.data(NAMESPACE); 15 | 16 | if (!viewer) { 17 | if (isDestroy) { 18 | return; 19 | } 20 | 21 | const options = $.extend({}, $element.data(), $.isPlainObject(option) && option); 22 | 23 | viewer = new Viewer(element, options); 24 | $element.data(NAMESPACE, viewer); 25 | } 26 | 27 | if (typeof option === 'string') { 28 | const fn = viewer[option]; 29 | 30 | if ($.isFunction(fn)) { 31 | result = fn.apply(viewer, args); 32 | 33 | if (result === viewer) { 34 | result = undefined; 35 | } 36 | 37 | if (isDestroy) { 38 | $element.removeData(NAMESPACE); 39 | } 40 | } 41 | } 42 | }); 43 | 44 | return result !== undefined ? result : this; 45 | }; 46 | 47 | $.fn.viewer.Constructor = Viewer; 48 | $.fn.viewer.setDefaults = Viewer.setDefaults; 49 | $.fn.viewer.noConflict = function noConflict() { 50 | $.fn.viewer = AnotherViewer; 51 | return this; 52 | }; 53 | } 54 | -------------------------------------------------------------------------------- /test/index.js: -------------------------------------------------------------------------------- 1 | import $ from 'jquery'; 2 | import '../src'; 3 | 4 | describe('viewer', () => { 5 | const createImage = () => { 6 | const container = document.createElement('div'); 7 | const image = document.createElement('img'); 8 | 9 | image.src = '/base/docs/images/tibet-1.jpg'; 10 | container.appendChild(image); 11 | document.body.appendChild(container); 12 | 13 | return image; 14 | }; 15 | 16 | it('should register as a plugin correctly', () => { 17 | expect($.fn.viewer).to.be.a('function'); 18 | expect($.fn.viewer.Constructor).to.be.a('function'); 19 | expect($.fn.viewer.noConflict).to.be.a('function'); 20 | expect($.fn.viewer.setDefaults).to.be.a('function'); 21 | }); 22 | 23 | it('should remove data after destroyed', () => { 24 | const $image = $(createImage()); 25 | 26 | $image.viewer(); 27 | expect($image.data('viewer')).to.be.an.instanceof($.fn.viewer.Constructor); 28 | $image.viewer('destroy'); 29 | expect($image.data('viewer')).to.be.undefined; 30 | }); 31 | 32 | it('should apply the given option', (done) => { 33 | $(createImage()).viewer({ 34 | inline: true, 35 | 36 | ready() { 37 | done(); 38 | }, 39 | }); 40 | }); 41 | 42 | it('should execute the given method', (done) => { 43 | $(createImage()).viewer({ 44 | shown() { 45 | done(); 46 | }, 47 | }).viewer('show'); 48 | }); 49 | 50 | it('should trigger the binding event', (done) => { 51 | $(createImage()).one('ready', (event) => { 52 | expect(event.type).to.equal('ready'); 53 | done(); 54 | }).viewer('show'); 55 | }); 56 | 57 | it('should rollback when call the $.fn.viewer.conflict', () => { 58 | const { viewer } = $.fn; 59 | const noConflictViewer = $.fn.viewer.noConflict(); 60 | 61 | expect(noConflictViewer).to.equal(viewer); 62 | expect($.fn.viewer).to.be.undefined; 63 | 64 | // Reverts it for the rest test suites 65 | $.fn.viewer = noConflictViewer; 66 | }); 67 | }); 68 | --------------------------------------------------------------------------------