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.

interactiv
resize

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:
<!-- viewer container -->
<div id="myDiv" style="width:960px; height:600px; overflow:hidden; border:solid 1px #a6a6a6; background:#000;"></div>

<!-- hotspots container -->
<div id="MyHotspots" style="display:none;">	
	
	<!-- hotspot -->
	<div class="lhp_miv_hotspot" data-x="964" data-y="1543" data-visible-scale=".5">
		<!-- marker -->
		<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>
		<!-- pop-up -->
		<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>
	
	<!-- hotspot -->
	...
	
</div>