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.
This is an example of using the plugin (without hotspots and size changer) 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.
$(document).ready(function(){
var settings = {
'viewportWidth' : '100%',
'viewportHeight' : '100%',
'intNavAutoHide' : false,
'fitToViewportShortSide' : false,
'loadingBgColor' : '#ffffff',
'startScale' : .5,
'startX' : 1100,
'startY' : 1700,
'animTime' : 500,
'draggInertia' : 10,
'zoomLevel' : 1,
'zoomStep' : 0.1,
'contentUrl' : 'img/0.jpg',
'intNavEnable' : true,
'intNavPos' : 'B',
'contentSizeOver100' : false,
'intNavMoveDownBtt' : true,
'intNavMoveUpBtt' : true,
'intNavMoveRightBtt' : true,
'intNavMoveLeftBtt' : true,
'intNavZoomBtt' : true,
'intNavUnzoomBtt' : true,
'intNavFitToViewportBtt' : true,
'intNavFullSizeBtt' : true,
'intNavBttSizeRation' : 1,
'mapEnable' : true,
'mapThumb' : 'img/thumb-0.jpg',
'mapPos' : 'BL',
'popupShowAction' : 'click',
'testMode' : false
};
$('#myDiv').lhpMegaImgViewer(settings);
});
html code:<!-- viewer container --> <div id="myDiv" style="width:960px; height:600px; overflow:hidden; border:solid 1px #a6a6a6; background:#000;"></div>