imageviewer
Advanced tools
A simple jQuery image viewing plugin. As of v1.0.0, the core code of Viewer is replaced with Viewer.js.
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)
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">
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();
See the available options of Viewer.js.
$().viewer(options);
See the available methods of Viewer.js.
$().viewer('method', argument1, , argument2, ..., argumentN);
See the available events of Viewer.js.
$().on('event', handler);
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>
It is the same as the browser support of Viewer.js. As a jQuery plugin, you also need to see the jQuery Browser Support.
Maintained under the Semantic Versioning guidelines.
1.1.0 (Dec 14 2019)
FAQs
A simple jQuery image viewing plugin.
The npm package imageviewer receives a total of 148 weekly downloads. As such, imageviewer popularity was classified as not popular.
We found that imageviewer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.