The mega image viewer jQuery plugin allows you to easily replace <div> tags
with animated image viewers.
Viewer used for displaying high-resolution object (image - JPG, PNG, GIF).
Viewer displays the given display object inside the user-defined viewport area.
Viewer allows to control the position and zoom of the object displayed
inside the viewport. Viewer controls the sliding and zoom of the displayed object
so that the viewport area will be filled completely.
If the viewport size is greater than the size of the displayed object,
the object is scaled over 100% to fit the viewport (zoom is disabled).
- Touch support for mobile devices.
- Mouse or Touch drag.
- Mouse wheel to zoom/unzoom.
- Mouse click or Touch move to center viewport.
- Possible viewport resize on runtime.
- Package contains a example for building thumbnail gallery.
- Package contains a example for building lightbox gallery (ColorBox Gallery).
- Cross-browser compatible – Image Viewer is compatible with IE, CHROME, FIREFOX, OPERA, SAFARI.
- Very easy installation on your html page.
- Very smooth animations.
- Fully scalable.
- set start coordinates and scale
- navigation bar (enabled / disabled)
- navigation bar autohide
- set the navigation bar position (acceptable values: TL, T, TR, L, R, BL, B, BR)
- set animation duration
- set drag inertia
- set image source from javascript {"contentUrl" : "images/my_image.jpg"} (relative or absolute path)
- set image source from html <img src="images/my_image.jpg"/>
- dispatch event 'mivChange' with information whether it is possible to move and zoom the display object
First Example / Basic Usage
This is an example of using the plugin for a single viewer on your website. jQuery plugin lhpMegaImgViewer lets you create several viewer instances. All you need to do is to include the necessary JavaScript files in the <head> section (details in the docs), adjust the settings to fit your needs and activate the plugin (for chosen elements) by pasting the JavaScript code below.
CUSTOMIZE:
javascript code:
html code:
<div id="myDiv" style="width:500px; height:300px; overflow:hidden; border:solid 1px #a6a6a6;"></div>
Second Example / Plugin Methods
This is an example of using the plugin methods. Use this code if you want to create your own navigation menu.
var pluginMethodsStt = { 'viewportWidth' : '100%', 'viewportHeight' : '100%' }; $('#secCntr').lhpMegaImgViewer(pluginMethodsStt);html code:
<div id="secCntr" style="width:450px; height:500px; overflow:hidden;">
<img src="img/2.jpg"/>
</div>
- $('#secCntr').lhpMegaImgViewer( pluginMethodsStt );
- $('#secCntr').lhpMegaImgViewer( 'setPosition', 1300, 300, 0.8 );
- $('#secCntr').lhpMegaImgViewer( 'moveUp' );
- $('#secCntr').lhpMegaImgViewer( 'moveDown' );
- $('#secCntr').lhpMegaImgViewer( 'moveLeft' );
- $('#secCntr').lhpMegaImgViewer( 'moveRight' );
- $('#secCntr').lhpMegaImgViewer( 'moveStop' );
- $('#secCntr').lhpMegaImgViewer( 'zoom' );
- $('#secCntr').lhpMegaImgViewer( 'unzoom' );
- $('#secCntr').lhpMegaImgViewer( 'zoomStop' );
- $('#secCntr').lhpMegaImgViewer( 'fitToViewport' );
- $('#secCntr').lhpMegaImgViewer( 'fullSize' );
- $('#secCntr').lhpMegaImgViewer( 'adaptsToContainer' );
- $('#secCntr').lhpMegaImgViewer( 'destroy' );
Thrid Example / Thumbnail Gallery
This is an example of using the lhpMegaImgViewer plugin for building a thumbnail gallery on your website.
