Lightbox sans onclick et avec redimensionnement

Télécharger le projet
Commenter

Description

Bonjour, je sais qu'il en existe quelques une sur ce site mais celle ci a une petite particularité. Pour l'activer, il suffit de mettre l'image dans une balise <a> qui pointe vers cette même image.
J'ai décidé d'utiliser cette technique car j'utilise FCKeditor pour éditer les page de mon site, comme ça, en quelques clics,elle est en place.
Je vous laisse tester.

Source / Exemple : 


// Taille de l'écran
var scrX = document.documentElement.clientWidth;
var scrY = document.documentElement.clientHeight;

//Couleur de fond
var sLayerColor = 'black';
//Opacité du fond
var sLayerOpacity = 80;
//Opacité de l'image 
var sLayerImage = 100;
// Pourcentage de l'image en fonction de l'écran maximum
var sMax = 90;

function addEvent(obj,event,fct){
     if(obj.attachEvent)
        obj.attachEvent('on' + event,fct);
     else
        obj.addEventListener(event,fct,true);
}

// Au chargement
window.onload = function () {

	var sImg = document.getElementsByTagName('img');
	var n = sImg.length;
	var sUrl = new Array();
	// On scan toutes les <img...
	for (i=0; i<n; i++) {
		if (sImg[i].src == sImg[i].parentNode) {
			var obj = sImg[i];
			obj.id = 'sImg'+i;
			// On définit l'action pour chaque
			addEvent(obj,'click',(function (objet){
				return function() {
					sLight(objet)
				};
			})(obj));
		
			// On remplace l'url du liens
			sImg[i].parentNode.href = '#sImg'+i;
		}
	}
}

function sLight(sUrl) {
	var sLayer = document.createElement('div');
	var scY = document.body.offsetHeight;
	
	var ofTop = sUrl.offsetTop;
	
	//Définition du style du lightbox
	sLayer.style.backgroundColor = sLayerColor;
	sLayer.style.width = scrX+'px';
	sLayer.style.position = 'absolute';
	sLayer.style.top = '0';
	sLayer.style.left = '0';
	sLayer.style.opacity = sLayerOpacity/100;
	sLayer.style.filter = 'alpha(opacity='+sLayerOpacity+')';
	
	if(scrY > scY) {
		sLayer.style.height = scrY+'px';
	}
	else {
		sLayer.style.height = scY+50+'px';
	}	
	
	// Création de l'objet image
	var sImg = document.createElement('img');
	sImg.src=sUrl.src;
	
	// Taille max de l'image
	var imgXmax = sMax/100*scrX;
	var imgYmax = sMax/100*scrY;
	
	var sImgX = sImg.width;
	var sImgY = sImg.height;
	
	// Redimmension avec respect des proportions
	if (imgXmax/imgYmax < sImgX/sImgY) {
		if (sImgX > imgXmax) {
			var sCo = sImgX/imgXmax;
			
			var sXimg = imgXmax;
			var sYimg = sImgY/sCo;
		}
		else {
			var sXimg = sImgX;
			var sYimg = sImgY;
		}
	}
	else {
		if (sImgY > imgYmax) {
			var sCo = sImgY/imgYmax;
			
			var sXimg = sImgX/sCo;
			var sYimg = imgYmax;
		}
		else {
			var sXimg = sImgX;
			var sYimg = sImgY;
		}
	}
	
	
	
	// Mise en position
	var sLeftImg = (scrX - sXimg)/2;
	var sTopImg = ((scrY - sYimg)/2) + ofTop;
	
	if (sTopImg+sYimg > scY) {
		sTopImg = scY - (((scrY - sYimg)/2)+sYimg);
	}
	
	sImg.style.position = 'absolute';
	
	sImg.style.left = sLeftImg+'px';
	sImg.style.top = sTopImg+'px';
	sImg.style.width = sXimg+'px';
	sImg.style.height = sYimg+'px';
	
	sImg.style.opacity = sLayerImage/100;
	sImg.style.filter = 'alpha(opacity='+sLayerImage+')';
	

	// Fonction de fermeture et mise dans le document
	addEvent(sLayer,'click',function () {sClose(sLayer,sImg)});
	addEvent(sImg,'click',function () {sClose(sLayer,sImg)});
	document.body.appendChild(sLayer);
	document.body.appendChild(sImg);
	window.scrollbars.visible = false;
}

// Suppression du lightbox
function sClose(sLayer,sImg) {
	var paImg = sImg.parentNode;
	paImg.removeChild(sImg);
	
	var paSlayer = sLayer.parentNode;
	paSlayer.removeChild(sLayer);
}

Conclusion :


Je l'ai testé sous Firefox 3, Ie 6, Ie 8, Chrome et Safari le tout sous XP.

J'espère qu'elle va vous être utile.
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (zoby44)