Fourth Example / Thumbnail Gallery

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

javascript code:

$(document).ready(function(){
	var settings = {
		'viewportWidth' : '100%',
		'viewportHeight' : '100%',
		'fitToViewportShortSide' : false,  
		'contentSizeOver100' : false,
		'startScale' : .5,
		'startX' : 0,
		'startY' : 0,
		'animTime' : 500,
		'draggInertia' : 10,
		'imgDir' : 'sampleImgSrc_1/',
		'mainImgWidth' : 2000,
		'mainImgHeight' : 1346,
		'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);
	
	$('#galleryThumbImg a').each(function(index){
		$(this).click(function(e) {
			e.preventDefault();
			
			settings.imgDir = $(this).attr('href');
			settings.mainImgWidth = $(this).data('main-img-width');
			settings.mainImgHeight = $(this).data('main-img-height');
			
			$('#myDiv').lhpGigaImgViewer('destroy');
			$('#myDiv').lhpGigaImgViewer(settings);
		});
	});
	$('#galleryThumbImg img').each(function(index){
		$(this).hover(function(){
			$(this).stop(true, true).animate({'opacity':.4});
		},
		function () {
			$(this).stop(true, true).animate({'opacity':1});
		});
	});
});	
				

html code:

<!-- thumbs -->
<div id="galleryThumbImg">
	<a href="sampleImgSrc_1/" data-main-img-width="2000" data-main-img-height="1346"><img src="sampleImgSrc_1/thumb.jpg"/></a> 
	<a href="sampleImgSrc_2/" data-main-img-width="2000" data-main-img-height="1346"><img src="sampleImgSrc_2/thumb.jpg"/></a> 
	<a href="sampleImgSrc_3/" data-main-img-width="2000" data-main-img-height="1346"><img src="sampleImgSrc_3/thumb.jpg"/></a> 
	<a href="sampleImgSrc_4/" data-main-img-width="1920" data-main-img-height="1080"><img src="sampleImgSrc_4/thumb.jpg"/></a> 
	<a href="sampleImgSrc_5/" data-main-img-width="1920" data-main-img-height="1080"><img src="sampleImgSrc_5/thumb.jpg"/></a>
</div>

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