Viewer
A simple jQuery image viewing plugin. As of v1.0.0, the core code of Viewer is replaced with Viewer.js.
- Demo
- Viewer.js - JavaScript image viewer (recommended)
- jquery-viewer - A jQuery plugin wrapper for Viewer.js (recommended for jQuery users to use this instead of Viewer)
Main
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
npm install imageviewer jquery
Include files:
<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<script src="/path/to/viewer.js"></script>
<link href="/path/to/viewer.css" rel="stylesheet">
Usage
Initialize with $.fn.viewer method.
<!-- 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>
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 of Viewer.js.
$().viewer(options);
Methods
See the available methods of Viewer.js.
$().viewer('method', argument1, , argument2, ..., argumentN);
Events
See the available events of Viewer.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.
<script src="other-plugin.js"></script>
<script src="viewer.js"></script>
<script>
$.fn.viewer.noConflict();
// Code that uses other plugin's "$().viewer" can follow here.
</script>
Browser support
It is the same as the browser support of Viewer.js. As a jQuery plugin, you also need to see the jQuery Browser Support.
Versioning
Maintained under the Semantic Versioning guidelines.
7.7k Jan 4, 2023
3.9k Dec 30, 2022
212 Jun 30, 2022
455 Nov 6, 2022
327 Oct 27, 2022
1k Jan 5, 2023
49 Sep 5, 2022
1.2k Dec 24, 2022
531 Oct 24, 2022
3.2k Dec 30, 2022
8 Oct 10, 2022
7.8k Dec 27, 2022
7.9k Dec 27, 2022
1k Dec 24, 2022
8.6k Jan 5, 2023
7.3k Dec 25, 2022
3.3k Dec 20, 2022
4 Nov 2, 2022
417 Dec 15, 2022