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);
	}
});

Leave a Comment

Your email address will not be published. Required fields are marked *

We care about your privacy and data security. Google serves cookies to analyse traffic and show ads on this site. By using this site you agree to these cookies being set. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close