First Example / Viewer with Hotspots
This is an example of using the plugin (with 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' : true,
'contentSizeOver100' : false,
'startScale' : .5,
'startX' : 1860,
'startY' : 2830,
'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, 'MyHotspots');
});
html code:
<div id="myDiv" style="width:960px; height:600px; overflow:hidden; border:solid 1px #a6a6a6; background:#000;"></div>
<div id="MyHotspots" style="display:none;">
<div class="lhp_giv_hotspot" data-x="1597" data-y="2569" data-visible-scale=".4">
<div class="lhp_giv_marker pos-BR">
<img src="gfx/arrow2.png" style="float:right;" />
<span class="label">Click me <span>#2</span></span>
</div>
<div class="lhp_giv_popup pos-R">
<div class="content">
<span>Lorem ipsum #2</span><br/>
<img src="gfx/popupImg1.jpg" />
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
</div>
</div>
</div>
...
</div>