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.
[javascript]
<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>
[/javascript]
HTML codes:
[html]
<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>
[/html]
Script:
[javascript]
//view single image
$(‘#single_image’).viewer({
inline: true,
viewed: function() {
$image.viewer(‘zoomTo’, 1);
}
});
// View a list of images
$(‘#images_gallery’).viewer();
[/javascript]
You can get get Viewer.js instance after initialized by calling var viewer = $(‘#single_image’).data(‘viewer’);. All methods can be found on original Viewer JS.
[javascript]
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);
}
});
[/javascript]
