Fourth Example / Thumbnail Gallery

This is an example of using the lhpMegaImgViewer plugin for building a thumbnail gallery on your website.

javascript code:

$(document).ready(function(){
	var settings = {
		'viewportWidth' : '100%',
		'viewportHeight' : '100%',
		'intNavAutoHide' : false,
		'fitToViewportShortSide' : false, 
		'loadingBgColor' : '#ffffff',
		'startScale' : 1,
		'startX' : 0,
		'startY' : 0,
		'animTime' : 500,
		'draggInertia' : 10,
		'zoomLevel' : 1,
		'zoomStep' : 0.1,
		'contentUrl' : 'img/1.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-1.jpg',
		'mapPos' : 'BL',
		'popupShowAction' : 'click',
		'testMode' : false
	};
	
	$('#myDiv').lhpMegaImgViewer(settings);
	
	$('#galleryThumbImg a').each(function(index){
		$(this).click(function(e) {
			e.preventDefault();
			settings.contentUrl = $(this).attr('href');
			settings.mapThumb = $(this).find('img').attr('src');
			$('#myDiv').lhpMegaImgViewer('destroy');
			$('#myDiv').lhpMegaImgViewer(settings);
		});
	});
});	
				

html code:

<!-- thumbs -->
<div id="galleryThumbImg">
	<a href="img/1.jpg"><img src="img/thumb-1.jpg" /></a>
	<a href="img/2.jpg"><img src="img/thumb-2.jpg" /></a>
	<a href="img/3.jpg"><img src="img/thumb-3.jpg" /></a>
	<a href="img/4.jpg"><img src="img/thumb-4.jpg" /></a>
	<a href="img/5.jpg"><img src="img/thumb-5.jpg" /></a>
</div>

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