Fifth Example / ColorBox Gallery

The fifth example shows the usage of the lhpGigaImgViewer plugin in ligthbox gallery. This example using ColorBox, w lightweight customizable lightbox plugin for jQuery.

javascript code:

$(document).ready(function(){
	var $cbImgViewerCnt;
	
	var settings = {
		'viewportWidth' : '100%',
		'viewportHeight' : '100%',
		'fitToViewportShortSide' : true,  
		'contentSizeOver100' : false,
		'startScale' : .5,
		'startX' : 1860,
		'startY' : 2830,
		'animTime' : 500,
		'draggInertia' : 10,
		'imgDir' : 'sampleImgSrc_1/',
		'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
	};
	
	$(".group1").colorbox({innerWidth : '600px', innerHeight : '400px', rel : 'group1'});
	$(".group1").colorbox({
		onComplete : function() {
			if($cbImgViewerCnt) {
				$cbImgViewerCnt.lhpGigaImgViewer('destroy');
			}
			$cbImgViewerCnt = $('<div/>').css({'width' : '100%', 'height' : '100%', 'overflow' : 'hidden'});
			$('#cboxLoadedContent').empty().append($cbImgViewerCnt);
			
			settings.imgDir = $(this).attr('href');
			settings.mainImgWidth = $(this).data('main-img-width');
			settings.mainImgHeight = $(this).data('main-img-height');
			
			$cbImgViewerCnt.lhpGigaImgViewer(settings);
		},
		onClosed : function() {
			if($cbImgViewerCnt) {
				$cbImgViewerCnt.lhpGigaImgViewer('destroy');
			}
		}
	});
	$('.sample 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 -->
<a href="sampleImgSrc_1/" class="group1" data-main-img-width="2000" data-main-img-height="1346">
	<img src="sampleImgSrc_1/thumb.jpg"/>
</a> 
<a href="sampleImgSrc_2/" class="group1" data-main-img-width="2000" data-main-img-height="1346">
	<img src="sampleImgSrc_2/thumb.jpg"/>
</a> 
<a href="sampleImgSrc_3/" class="group1" data-main-img-width="2000" data-main-img-height="1346">
	<img src="sampleImgSrc_3/thumb.jpg"/>
</a> 
<a href="sampleImgSrc_4/" class="group1" data-main-img-width="1920" data-main-img-height="1080">
	<img src="sampleImgSrc_4/thumb.jpg"/>
</a> 
<a href="sampleImgSrc_5/" class="group1" data-main-img-width="1920" data-main-img-height="1080">
	<img src="sampleImgSrc_5/thumb.jpg"/>
</a>