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 get Viewer.js instance after initialized by calling var viewer = $(‘#single_image’).data(‘viewer’);. All methods can be found on 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);
	}
});