类似qq相册，查看、阅览

# Viewer [](https://www.npmjs.com/package/imageviewer) [](https://www.npmjs.com/package/imageviewer) > A simple jQuery image viewing plugin. - [Website](https://fengyuanchen.github.io/viewer) - [Viewer.js](https://github.com/fengyuanchen/viewerjs) - the non-jQuery version of Viewer (**recommended**). ## 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 [options](#options) - Supports [methods](#methods) - Supports [events](#events) - 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 ### Install ```shell npm install imageviewer ``` Include files: ```html <script src="/path/to/jquery.js"></script><!-- jQuery is required --> <link href="/path/to/viewer.css" rel="stylesheet"> <script src="/path/to/viewer.js"></script> ``` ### Usage Initialize with `$.fn.viewer` method. ```html <!-- a block container is required --> <div> <img class="image" src="picture.jpg" alt="Picture"> </div> <div> <ul class="images"> <li><img src="picture.jpg" alt="Picture"></li> <li><img src="picture-2.jpg" alt="Picture 2"></li> <li><img src="picture-3.jpg" alt="Picture 3"></li> </ul> </div> ``` ```js // View one image $('.image').viewer(); // View some images $('.images').viewer(); ``` ## Keyboard support > Only available in modal mode. - `Esc`: Exit full screen 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 `$().viewer(options)`. If you want to change the global default options, You may use `$.fn.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 screen width great then 768 pixels - `3`: show the navbar only when screen width great then 992 pixels - `4`: show the navbar only when screen width great then 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 screen width great then 768 pixels - `3`: show the title only when screen width great then 992 pixels - `4`: show the title only when screen width great then 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` - Default: `true` - Options: - `0` or `false`: hide the toolbar - `1` or `true`: show the toolbar - `2`: show the toolbar only when screen width great then 768 pixels - `3`: show the toolbar only when screen width great then 992 pixels - `4`: show the toolbar only when screen width great then 1200 pixels Specify the visibility of the toolbar. ### 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. ### interval - Type: `Number` - Default: `5000` Define interval of each 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 will be called on each image and should return a valid image URL. ### ready - Type: `Function` - Default: `null` A shortcut of the "ready" event. ### show - Type: `Function` - Default: `null` A shortcut of the "show" event. ### shown - Type: `Function` - Default: `null` A shortcut of the "shown" event. ### hide - Type: `Function` - Default: `null` A shortcut of the "hide" event. ### hidden - Type: `Function` - Default: `null` A shortcut of the "hidden" event. ### view - Type: `Function` - Default: `null` A shortcut of the "view" event. ### viewed - Type: `Function` - Default: `null` A shortcut of the "viewed" event. [⬆ back to top](#table-of-contents) ## Methods As there are some **asynchronous** processes when start the viewer, you should call a method only when it is available, see the following **lifecycle**: ```js $().viewer({ built: function () { // 2 methods are available here: "show" and "destroy". }, shown: function () { // 9 methods are available here: "hide", "view", "prev", "next", "play", "stop", "full", "exit" and "destroy". }, viewed: function () { // All methods are available here except "show". $(this).viewer('rotate', 90).viewer('scale', -1, -1); } } ``` ### show() Show the viewer. > Only available in modal mode. ### hide() hide the viewer. > Only available in modal mode. ### view([index]) - **index** (optional): - Type: `Number` - Default: `0` - The index of the image for viewing View one of the images with image's index. ```js $().viewer('view', 1); // View the second image ``` ### prev() View the previous image. ### next() View the next image. ### move(offsetX[, offsetY]) - **offsetX**: - Type: `Number` - Moving size (px) in the horizontal direction - **offsetY** (optional): - Type: `Number` - Moving size (px) in the vertical direction. - If not present, its default value is `offsetX` Move the image with relative offsets. ```js $().viewer('move', 1); $().viewer('move', -1, 0); // Move