ImageViewer is a jQuery plugin for customizing image presentation. Web developer may easily embed it into the website, add header and/or footer bars to show additional content such as image title or navigation controls as well as use other options, such as fullscreen displaying, etc.
Plugin features:
jquery.imageviewer-1.0.zip – a zip archive containing the plugin source (general and minified versions), a minified version of jQuery, CSS and license text files.
|
Drag mouse cursor on the image to see the header and the footer bars. |
Download the plugin, unzip it and copy the JavaScript and CSS files to your website/application directory.
Load the files in the <head> section of your HTML document.
<head> ... <link rel="stylesheet" type="text/css" href="jquery.imageviewer/imageviewer.css" /> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.imageviewer.min.js"></script> ... </head>
Now prepare ImageViewer on an JQuery div element by calling imageviewer('options', options) method and then
call imageviewer('show', path_to_image) method to load the image:
<script type="text/javascript"> $(function() { $('div#viewer').imageviewer( 'options', {'size': {'w':width, 'h':height}, ...} ); $('div#viewer').imageviewer( 'show', path_to_image, '', '' ); }); </script>