jQuery Viewer: a jQuery Wrapper for Viewer.js

Viewer Js is a powerful image viewer with many great features. It also supports player mode in which images are presented like in a slideshow. jQuery Viewer is a jQuery plugin wrapper for Viewer Js.

How to Use jQuery Viewer

The script can be downloaded here.

<script src="/path/to/jquery.js"></script>
<script src="/path/to/viewer.js"></script>
<link href="/path/to/viewer.css" rel="stylesheet">
<script src="/path/to/jquery-viewer.js"></script>

HTML codes:

<div class="container">
<!– Single Image –>
<div>
<img id="single_image" src="image.jpg" alt="Image">
</div>

<!– A list of Images –>
<div>
<ul id="images_gallery">
<li><img src="image-1.jpg" alt="Image 1"></li>
<li><img src="image-2.jpg" alt="Image 2"></li>
<li><img src="image-3.jpg" alt="Image 3"></li>
</ul>
</div>

</div>

Script:

//view single image
$(‘#single_image’).viewer({
inline: true,
viewed: function() {
$image.viewer(‘zoomTo’, 1);
}
});

// View a list of images
$(‘#images_gallery’).viewer();

You can get the Viewer.js instance after initialization by calling var viewer = $(‘#single_image’).data(‘viewer’);. All methods can be found on the original Viewer JS.

new Viewer(image, {
ready: 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.zoomTo(1).rotateTo(180);
}
});