The giga image viewer jQuery plugin allows you to easily replace <div> tags with animated image viewers with hotspots.
Viewer used for displaying very high-resolution JPG.
It is a completely packaged to present high resolution images on the web.
Package contains command line program (for Windows only) and php script, for cutting images into pieces (max tested image had size 9000x9000 px).
Preparing image for this plugin is easy:
- cut the picture into pieces on the local machine (use the command line program or php script)
- upload pieces on server
- install plugin on website
Viewer displays the given high-resolution JPG inside the user-defined viewport area.
Viewer allows to control the position and zoom of the high-resolution JPG inside the viewport.
Viewer controls the sliding and zoom of the high-resolution JPG so that the viewport area will be filled completely.
Second Example / Basic Usage
This is an example of using the plugin (without hotspots and size changer) for a single viewer on your website. jQuery plugin lhpGigaImgViewer 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.
javascript code:
$(document).ready(function(){
var settings = {
'viewportWidth' : '100%',
'viewportHeight' : '100%',
'fitToViewportShortSide' : false,
'contentSizeOver100' : false,
'startScale' : 0,
'startX' : 2500,
'startY' : 2500,
'animTime' : 500,
'draggInertia' : 10,
'imgDir' : 'hubbleImgSrc/',
'mainImgWidth' : 5000,
'mainImgHeight' : 5000,
'intNavEnable' : true,
'intNavPos' : 'B',
'intNavAutoHide' : false,
'intNavMoveDownBtt' : true,
'intNavMoveUpBtt' : true,
'intNavMoveRightBtt' : true,
'intNavMoveLeftBtt' : true,
'intNavZoomBtt' : true,
'intNavUnzoomBtt' : true,
'intNavFitToViewportBtt' : true,
'intNavFullSizeBtt' : true,
'intNavBttSizeRation' : 1,
'mapEnable' : true,
'mapPos' : 'BL',
'popupShowAction' : 'click',
'testMode' : false
};
$('#myDiv').lhpGigaImgViewer(settings);
});
html code:<!-- viewer container --> <div id="myDiv" style="width:960px; height:600px; overflow:hidden; border:solid 1px #a6a6a6; background:#000;"></div>