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 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.
javascript code:
$(document).ready(function(){
var settings = {
'viewportWidth' : '100%',
'viewportHeight' : '100%',
'fitToViewportShortSide' : true,
'contentSizeOver100' : 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',
'intNavAutoHide' : 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, '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_miv_hotspot" data-x="964" data-y="1543" data-visible-scale=".5">
<div class="lhp_miv_marker pos-BR">
<img src="gfx/arrow2.png" style="float:right;" />
<span class="label">Click me <span>#2</span></span>
</div>
<div class="lhp_miv_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>