Fifth Example / ColorBox Gallery

The fifth example shows the usage of the lhpMegaImgViewer 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,
		'loadingBgColor' : '#ffffff',
		'startScale' : 1,
		'startX' : 500,
		'startY' : 500,
		'animTime' : 500,
		'draggInertia' : 10,
		'zoomLevel' : 1,
		'zoomStep' : 0.1,
		'contentUrl' : '',
		'intNavEnable' : true,
		'intNavPos' : 'R',
		'intNavAutoHide' : true,
		'intNavMoveDownBtt' : true,
		'intNavMoveUpBtt' : true,
		'intNavMoveRightBtt' : true,
		'intNavMoveLeftBtt' : true,
		'intNavZoomBtt' : true,
		'intNavUnzoomBtt' : true,
		'intNavFitToViewportBtt' : true,
		'intNavFullSizeBtt' : true,
		'intNavBttSizeRation' : 1,
		'mapEnable' : true,
		'mapThumb' : '',
		'mapPos' : 'BL',
		'popupShowAction' : 'click',
		'testMode' : false
	};
	
	$(".group1").colorbox({innerWidth : '600px', innerHeight : '400px', rel : 'group1'});
	$(".group1").colorbox({
		onComplete : function() {
			if($cbImgViewerCnt) {
				$cbImgViewerCnt.lhpMegaImgViewer('destroy');
			}
			$cbImgViewerCnt = $('<div/>').css({'width' : '100%', 'height' : '100%', 'overflow' : 'hidden'});
			$('#cboxLoadedContent').empty().append($cbImgViewerCnt);
			settings.contentUrl = $(this).attr('href');
			settings.mapThumb = $(this).find('img').attr('src');
			$cbImgViewerCnt.lhpMegaImgViewer(settings);
		},
		onClosed : function() {
			if($cbImgViewerCnt) {
				$cbImgViewerCnt.lhpMegaImgViewer('destroy');
			}
		}
	});
});	
				

html code:

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