https://github.com/fengyuanchen/jquery-viewer
A jQuery plugin wrapper for Viewer.js.
https://github.com/fengyuanchen/jquery-viewer
image-viewer jquery jquery-plugin viewer viewerjs
Last synced: 27 days ago
JSON representation
A jQuery plugin wrapper for Viewer.js.
- Host: GitHub
- URL: https://github.com/fengyuanchen/jquery-viewer
- Owner: fengyuanchen
- License: mit
- Created: 2018-03-10T13:58:03.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2020-07-21T11:09:18.000Z (almost 5 years ago)
- Last Synced: 2025-03-28T06:08:22.554Z (about 1 month ago)
- Topics: image-viewer, jquery, jquery-plugin, viewer, viewerjs
- Language: JavaScript
- Homepage: https://fengyuanchen.github.io/jquery-viewer
- Size: 3.12 MB
- Stars: 335
- Watchers: 20
- Forks: 168
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-starred - fengyuanchen/jquery-viewer - A jQuery plugin wrapper for Viewer.js. (jquery)
README
# jquery-viewer
[](https://travis-ci.org/fengyuanchen/jquery-viewer) [](https://codecov.io/gh/fengyuanchen/jquery-viewer) [](https://www.npmjs.com/package/jquery-viewer) [](https://www.npmjs.com/package/jquery-viewer)
> A jQuery plugin wrapper for [Viewer.js](https://github.com/fengyuanchen/viewerjs).
- [Demo](https://fengyuanchen.github.io/jquery-viewer)
## Main
```text
dist/
├── jquery-viewer.js (UMD)
├── jquery-viewer.min.js (UMD, compressed)
├── jquery-viewer.common.js (CommonJS, default)
└── jquery-viewer.esm.js (ES Module)
```
## Getting started
### Installation
```shell
npm install jquery-viewer jquery viewerjs
```
Include files:
```html
```
### Usage
Initialize with `$.fn.viewer` method.
```html
```
```js
var $image = $('#image');
$image.viewer({
inline: true,
viewed: function() {
$image.viewer('zoomTo', 1);
}
});
// Get the Viewer.js instance after initialized
var viewer = $image.data('viewer');
// View a list of images
$('#images').viewer();
```
## Options
See the available [options](https://github.com/fengyuanchen/viewerjs#options) of Viewer.js.
```js
$().viewer(options);
```
## Methods
See the available [methods](https://github.com/fengyuanchen/viewerjs#methods) of Viewer.js.
```js
$().viewer('method', argument1, , argument2, ..., argumentN);
```
## Events
See the available [events](https://github.com/fengyuanchen/viewerjs#events) of Viewer.js.
```js
$().on('event', handler);
```
## No conflict
If you have to use other plugin with the same namespace, just call the `$.fn.viewer.noConflict` method to revert to it.
```html
$.fn.viewer.noConflict();
// Code that uses other plugin's "$().viewer" can follow here.
```
## Browser support
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/).
## Versioning
Maintained under the [Semantic Versioning guidelines](https://semver.org/).
## License
[MIT](https://opensource.org/licenses/MIT) © [Chen Fengyuan](https://chenfengyuan.com/)