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