viewer.min.js

# Viewer.js [](https://www.npmjs.com/package/viewerjs) [](https://www.npmjs.com/package/viewerjs) [](https://unpkg.com/viewerjs/dist/viewer.common.js) > 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 53 [options](#options) - Supports 23 [methods](#methods) - Supports 17 [events](#events) - Supports modal and inline modes - Supports touch - Supports move - Supports zoom - Supports rotation - Supports scale (flip) - Supports keyboard - Cross-browser support ## Main files ```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 ``` In browser: ```html <link href="/path/to/viewer.css" rel="stylesheet"> <script src="/path/to/viewer.js"></script> ``` The [cdnjs](https://github.com/cdnjs/cdnjs) provides CDN support for Viewer.js's CSS and JavaScript. You can find the links [here](https://cdnjs.com/libraries/viewerjs). ### 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 // You should import the CSS file. // import 'viewerjs/dist/viewer.css'; import Viewer from 'viewerjs'; // View an image. const viewer = new Viewer(document.getElementById('image'), { inline: true, viewed() { viewer.zoomTo(1); }, }); // Then, show the image by clicking it, or call `viewer.show()`. // View a list of images. // Note: All images within the container will be found by calling `element.querySelectorAll('img')`. const gallery = new Viewer(document.getElementById('images')); // Then, show one image by click it, or call `gallery.show()`. ``` ## 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. - `Tab`: Switch the focus state on the buttons in the viewer. - `Enter`: Trigger the click event handler on the button. - `←`: 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)`. ### backdrop - Type: `Boolean` or `String` - Default: `true` Enable the modal backdrop, specify `static` for the backdrop that will not close the modal on click. ### 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` or `Function` or `Array` - Default: `true` - Options: - `0` or `false`: hide the title - `1` or `true` or `Function` or `Array`: 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 - `Function`: customize the title content - `[Number, Function]`: the first element indicate the visibility, the second element customize the title content Specify the visibility and the content of the title. > The name comes from the `alt` attribute of an image element or the image name parsed from its URL. For example, `title: 4` equals to: ```js new Viewer(image, { title: [4, (image, imageData) => `${image.alt} (${imageData.naturalWidth} × ${imageData.naturalHeight})`] }); ``` ### 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 built-in keys: "zoomIn", "zoomOut", "oneToOne", "reset", "prev", "play", "next", "rotateLeft", "rotateRight", "flipHorizontal", "flipVertical". - Available built-in sizes: "small", "medium" (default) and "large". Specify the visibility and layout of the toolbar its buttons. For example, `toolbar: 4` equals to: ```js new Viewer(image, { 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, }, }); ``` > see more for [custom toolbar](docs/examples/custom-toolbar.html). ### className - Type: `String` - Default: `''` Custom class name(s) to add to the viewer's root element. ### container - Type: `Element` or `String` - Default: `'body'` - An element or a valid selector for [Document.querySelector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) Container to place the viewer in the modal mode. > Only available when the `inline` option is set to `false`. ### filter - Type: `Function` - Default: `null` Filter the images for viewing (should return `true` if the image is viewable, return `false` to ignore the image). For example: ```js new Viewer(image, { filter(image) { return image.complete; }, }); ``` > Note that images without the `src` attribute set will be ignored by default. ### fullscreen - Type: `Boolean` or [`FullscreenOptions`](https://developer.mozilla.org/en-US/docs/Web/API/FullscreenOptions) - Default: `true` Enable to request full screen when play. > Requires the browser supports [Fullscreen API](https://caniuse.com/fullscreen). ### inheritedAttributes - Type: `Array` - Default: `['crossOrigin', 'decoding', 'isMap', 'loading', 'referrerPolicy', 'sizes', 'srcset', 'useMap']` Define the extra attributes to inherit from the original image. > Note that the basic attributes `src` and `alt` will always inherit from the original image. ### initialCove