Litebox som anpassar sig efter webbläsarfönstret

Jag tycker att bildvisning med hjälp av Lightbox2 / Litebox är riktigt snyggt på webbsidor och har nyligen installerat det på en av mina hemsidor.

Jag hittade då ett problem där applikationen inte tar hänsyn till hur stora bilderna är relaterat till webbläsaren vilken ibland gjorde att inte hela bilderna syntes. När man använder dessa skript får man inte heller någon skrollbar så man kunde inte bläddra för att se hela bilden.

Enkelt löst tänkte jag och googlade vidare efter liknande applikation som gör just detta, men jag hittade inget bra och bestämde mig för att lösa detta själv.

Det som behöver göras är att lägga in ny funktionalitet i litebox-1.0.js för att ta hänsyn till storleken på webbläsarfönstret. Förändringen som behövs är liten och enkel att införa. Byt bara ut

imgPreloader.onload=function(){
	Element.setSrc('lightboxImage', imageArray[activeImage][0]);
	myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height);
}

mot

imgPreloader.onload=function(){
	Element.setSrc('lightboxImage', imageArray[activeImage][0]);
	
	var innerWidth = arrayPageSize[2];
	var innerHeight = arrayPageSize[3];
	
	if(imgPreloader.width>(innerWidth-100) || imgPreloader.height>(innerHeight-130)){
		if(imgPreloader.width>(innerWidth-100)){
			var width=(innerWidth-100);
			var height=imgPreloader.height/(imgPreloader.width/(innerWidth-100));
			if(height>(innerHeight-130) ){
				var height=(innerHeight-130);
				var width=imgPreloader.width/(imgPreloader.height/(innerHeight-130));
			}
		} else if(imgPreloader.height>(innerHeight-130)){
			var height=(innerHeight-130);
			var width=imgPreloader.width/(imgPreloader.height/(innerHeight-130));
		}
		
		height = Math.floor(height);
		width = Math.floor(width);
		
		document.getElementById('lightboxImage').height=height;
		document.getElementById('lightboxImage').width=width;
		document.getElementById('lightboxImage').style.width=width;
		document.getElementById('lightboxImage').style.height=height;
		myLightbox.resizeImageContainer(width, height);
	} else {
		document.getElementById('lightboxImage').height=imgPreloader.height;
		document.getElementById('lightboxImage').width=imgPreloader.width;
		document.getElementById('lightboxImage').style.width=imgPreloader.width;
		document.getElementById('lightboxImage').style.height=imgPreloader.height;
		myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height);
	}
}

så skall det fungera.

Skillnaden mellan Litebox och Lightbox är liten och ligger främst i vilket bakomliggande JavaScript-ramverk som används, vilket gör att detta därför går att applicera på båda applikationerna.