js图片插件viewer

# Viewer.js [](https://travis-ci.org/fengyuanchen/viewerjs) [](https://www.npmjs.com/package/viewerjs) [](https://www.npmjs.com/package/viewerjs) > JavaScript image viewer. - [Website](https://fengyuanchen.github.io/viewerjs) - [jquery-viewer](https://github.com/fengyuanchen/jquery-viewer) - A jQuery plugin wrapper for Viewer.js. ## Table of contents - [Features](#features) - [Main](#main) - [Getting started](#getting-started) - [Keyboard support](#keyboard-support) - [Options](#options) - [Methods](#methods) - [Events](#events) - [No conflict](#no-conflict) - [Browser support](#browser-support) - [Contributing](#contributing) - [Versioning](#versioning) - [License](#license) ## Features - Supports 36 [options](#options) - Supports 23 [methods](#methods) - Supports 9 [events](#events) - Supports modal and inline modes - Supports touch - Supports move - Supports zoom - Supports rotation - Supports scale (flip) - Supports keyboard - Cross-browser support ## Main ```text dist/ ├── viewer.css ├── viewer.min.css (compressed) ├── viewer.js (UMD) ├── viewer.min.js (UMD, compressed) ├── viewer.common.js (CommonJS, default) └── viewer.esm.js (ES Module) ``` ## Getting started ### Installation ```shell npm install viewerjs ``` Include files: ```html <link href="/path/to/viewer.css" rel="stylesheet"> <script src="/path/to/viewer.js"></script> ``` ### Usage #### Syntax ```js new Viewer(element[, options]) ``` - **element** - Type: `HTMLElement` - The target image or container of images for viewing. - **options** (optional) - Type: `Object` - The options for viewing. Check out the available [options](#options). #### Example ```html <!-- a block container is required --> <div> <img id="image" src="picture.jpg" alt="Picture"> </div> <div> <ul id="images"> <li><img src="picture-1.jpg" alt="Picture 1"></li> <li><img src="picture-2.jpg" alt="Picture 2"></li> <li><img src="picture-3.jpg" alt="Picture 3"></li> </ul> </div> ``` ```js var viewer = new Viewer(document.getElementById('image'), { inline: true, viewed: function() { viewer.zoomTo(1); } }); // View a list of images var viewer = new Viewer(document.getElementById('images')); ``` ## Keyboard support > Only available in modal mode. - `Esc`: Exit full screen or close the viewer or exit modal mode or stop play. - `Space`: Stop play. - `←`: View the previous image. - `→`: View the next image. - `↑`: Zoom in the image. - `↓`: Zoom out the image. - `Ctrl + 0`: Zoom out to initial size. - `Ctrl + 1`: Zoom in to natural size. [⬆ back to top](#table-of-contents) ## Options You may set viewer options with `new Viewer(image, options)`. If you want to change the global default options, You may use `Viewer.setDefaults(options)`. ### inline - Type: `Boolean` - Default: `false` Enable inline mode. ### button - Type: `Boolean` - Default: `true` Show the button on the top-right of the viewer. ### navbar - Type: `Boolean` or `Number` - Default: `true` - Options: - `0` or `false`: hide the navbar - `1` or `true`: show the navbar - `2`: show the navbar only when the screen width is greater than 768 pixels - `3`: show the navbar only when the screen width is greater than 992 pixels - `4`: show the navbar only when the screen width is greater than 1200 pixels Specify the visibility of the navbar. ### title - Type: `Boolean` or `Number` - Default: `true` - Options: - `0` or `false`: hide the title - `1` or `true`: show the title - `2`: show the title only when the screen width is greater than 768 pixels - `3`: show the title only when the screen width is greater than 992 pixels - `4`: show the title only when the screen width is greater than 1200 pixels Specify the visibility of the title (the current image's name and dimensions). > The name comes from the `alt` attribute of an image element or the image name parsed from URL. ### toolbar - Type: `Boolean` or `Number` or `Object` - Default: `true` - Options: - `0` or `false`: hide the toolbar. - `1` or `true`: show the toolbar. - `2`: show the toolbar only when the screen width is greater than 768 pixels. - `3`: show the toolbar only when the screen width is greater than 992 pixels. - `4`: show the toolbar only when the screen width is greater than 1200 pixels. - `{ key: Boolean | Number }`: show or hide the toolbar. - `{ key: String }`: customize the size of the button. - `{ key: Function }`: customize the click handler of the button. - `{ key: { show: Boolean | Number, size: String, click: Function }`: customize each property of the button. - Available keys: "zoomIn", "zoomOut", "oneToOne", "reset", "prev", "play", "next", "rotateLeft", "rotateRight", "flipHorizontal" and "flipVertical". - Available sizes: "small", "medium" (default) and "large". Specify the visibility and layout of the toolbar its buttons. For example, `toolbar: 4` equals to: ```js toolbar: { zoomIn: 4, zoomOut: 4, oneToOne: 4, reset: 4, prev: 4, play: { show: 4, size: 'large', }, next: 4, rotateLeft: 4, rotateRight: 4, flipHorizontal: 4, flipVertical: 4, } ``` ### tooltip - Type: `Boolean` - Default: `true` Show the tooltip with image ratio (percentage) when zoom in or zoom out. ### movable - Type: `Boolean` - Default: `true` Enable to move the image. ### zoomable - Type: `Boolean` - Default: `true` Enable to zoom the image. ### rotatable - Type: `Boolean` - Default: `true` Enable to rotate the image. ### scalable - Type: `Boolean` - Default: `true` Enable to scale the image. ### transition - Type: `Boolean` - Default: `true` Enable CSS3 Transition for some special elements. ### fullscreen - Type: `Boolean` - Default: `true` Enable to request full screen when play. > Requires the browser supports [Full Screen API](http://caniuse.com/fullscreen). ### keyboard - Type: `Boolean` - Default: `true` Enable keyboard support. ### backdrop - Type: `Boolean` or `String` - Default: `true` Enable a modal backdrop, specify `static` for a backdrop which doesn't close the modal on click. ### loading - Type: `Boolean` - Default: `true` Indicate if show a loading spinner when load image or not. ### loop - Type: `Boolean` - Default: `true` Indicate if enable loop viewing or not. > If the current image is the last one, then the next one to view is the first one, and vice versa. ### interval - Type: `Number` - Default: `5000` The amount of time to delay between automatically cycling an image when playing. ### minWidth - Type: `Number` - Default: 200 Define the minimum width of the viewer. > Only available in inline mode (set the `inline` option to `true`). ### minHeight - Type: `Number` - Default: 100 Define the minimum height of the viewer. > Only available in inline mode (set the `inline` option to `true`). ### zoomRatio - Type: `Number` - Default: `0.1` Define the ratio when zoom the image by wheeling mouse. ### minZoomRatio - Type: `Number` - Default: `0.01` Define the min ratio of the image when zoom out. ### maxZoomRatio - Type: `Number` - Default: `100` Define the max ratio of the image when zoom in. ### zIndex - Type: `Number` - Default: `2015` Define the CSS `z-index` value of viewer in modal mode. ### zIndexInline - Type: `Number` - Default: `0` Define the CSS `z-index` value of viewer in inline mode. ### url - Type: `String` or `Function` - Default: `'src'` Define where to get the original image URL for viewing. > If it is a string, it should be one of the attributes of each image element. > If it is a function, it should return a valid image URL. For example: ```html <img src="picture.jpg?size=160"> ``` ```js new Viewer(image, { url(image) { return image.src.replac