Lightbox sans onclick et avec redimensionnement

Soyez le premier à donner votre avis sur cette source.

Vue 8 575 fois - Téléchargée 1 022 fois

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.

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

gillardg
Messages postés
3275
Date d'inscription
jeudi 3 avril 2008
Statut
Membre
Dernière intervention
14 septembre 2014
3 -
cool cool cool :)
XtremDuke
Messages postés
631
Date d'inscription
samedi 28 septembre 2002
Statut
Membre
Dernière intervention
18 mai 2009
3 -
- Pour le window.onload, c'est la seule manière que j'ai trouvé pour lancer le script au chargement sans utiliser de

>> Tout simplement :
addEvent(window, "load", maFonction);

- Pour le "sImg.style.filter = 'alpha(opacity='+sLayerImage+')';", j'ai bien penser utiliser un png, mais dans ce cas, il n'y a plus de transparence pour ie6...

>> Fait un test juste avant de regler ton opacité :
De manière "barbare" if(document.all) ... else ....

-Il fallait que je remonte l'objet (ou un event)...

>> Ta fonction addEvent te permet de récuperer l'event donc l'objet :
addEvent(obj, "click", clickObjet);

function clickObjet(event){
if(!event) var event = window.event;
var monObject = event.target || event.srcElement;
}
cyrphp
Messages postés
18
Date d'inscription
dimanche 17 octobre 2004
Statut
Membre
Dernière intervention
13 avril 2009
-
@zoby44

heu non , peut-etre n'as tu pas compris ce que j'ai fait :)

dans la boite des propriétés de liens de fckeditor , tu as l'onglet avancé . C'est dans celui-ci que j'ai ajouté au formulaire un champ rel , pour gerer l'attribut rel des liens .
De la , dans l'attribut REL tu y met ce que tu veut (no-follow , external , [lighbox] , etc ... ) Tu applique alors ton lightbox ou tu veut :) .

Ceci dit , ton script est intéressant , ma remarque ne se portait que sur ton approche du problème .

GC
zoby44
Messages postés
817
Date d'inscription
vendredi 3 novembre 2006
Statut
Membre
Dernière intervention
14 décembre 2010
-
Salut. Je voulais d'abord répondre à XtremDuke.

- Pour le window.onload, c'est la seule manière que j'ai trouvé pour lancer le script au chargement sans utiliser de

- Pour le "sImg.style.filter = 'alpha(opacity='+sLayerImage+')';", j'ai bien penser utiliser un png, mais dans ce cas, il n'y a plus de transparence pour ie6, et ce n'est plus possible de modifier la transparence en changeant la valeur des LayerOpacity, et personnellement, je n'ai eu aucun problème avec les debuggeurs (Firebux et debbugbar pour ie8)

- addEvent(obj,'click',(function (objet){
return function() {
sLight(objet)
};
})(obj));

Il fallait que je remonte l'objet (ou un event). J'ai essayer pleins de méthodes, dont celle que tu donne, mais uniquement celle ci fonctionne (elle ma été donnée sur le forum du siteduzero d'ailleurs, merci à eux).

Mais je suis bien conscient qu'il me reste encore pleins de progrès a faire en JS.

@cyrphp -> J'ai bien pensé à modifier FckEditor, mais dans ce cas, toutes les images s'ouvrent dans un lightbox, je veux pouvoir choisir lesquelles ouvrir. Et à chaque changement de version de fck, il faut remodifier le fichier (enfin je pense).

@Heirem -> Je suis content qu'elle t'ai appris quelque chose.
cs_Heirem
Messages postés
23
Date d'inscription
dimanche 16 juillet 2006
Statut
Membre
Dernière intervention
25 novembre 2011
-
Bonjour,
Tu as bien fait de mettre cette source dans le niveau débutant.
Ce n'est pas parfait et cela reste à travailler mais je la garde car ce code est vraiment enrichissant et formateur, en particulier en ce qui concerne la gestion des événements js.
Donc merci !

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)