Bonjour,

J'essaye de faire une petite galerie photo personnelle, et je bloque sur le centrage des photos au milieu de la page.

Voici mon code complet :

window.onload = init;

/*
 - Recherche de toutes les images dans la div #simpleBox
 - Création d'une boucle pour afficher ces images
 - L'SRC de l'image sur laquelle je clique est stoqué dans la variable 'actualImg'
 - On a plus besoin de rester dans la fonction litérale, alors on termine les configurations dans une fonction extérieure (boxCFG)
 */
function init() {
	cibleDiv = document.getElementById("simpleBox");
	cibleImg = cibleDiv.getElementsByTagName("img");

	for (var i = 0; i < cibleImg.length; i++) {
		cibleImg[i].addEventListener('click', function() {
			actualImg = this.src;
			callFunction = boxCFG();
		}, false);
	}
}

/*
 - Création d'une balise "img", introduction de cette balise dans la div #simpleBox
 - L'attribut SRC de l'image sur laquelle on clique (actualImg) est modifié, on change son chemin en remplacent "small" par "original" (noms des dossiers),
   cela permettra d'afficher l'image en taille réelle.
 - Positionnement de l'image au centre de la fenêtre
 */
function boxCFG() {
    var imgTag = document.createElement("img");
	cibleDiv.appendChild(imgTag);
	
	origToBigImg = actualImg.replace("small", "original");
	imgTag.src = origToBigImg;
    imgTag.className = "originalImg";

	parseInt(imgTag.style.marginLeft = "-" + (imgTag.width / 2) + "px");
	parseInt(imgTag.style.marginTop = "-" + (imgTag.height / 2) + "px");
}

Mon problème concerne les deux dernières lignes, qui servent à positionner l'image au milieu de la page :

Lorsqu'on clique une fois sur toutes les images, les valeurs de imgTag.width et height valent 0 car l'image se positionne à 0 pixel, et j'ai pu le savoir en mettant un alert dessus.

Mais quand je clique une deuxième fois dessus, le bonnes valeurs sont retrouvées, le calcul peut s'effectuer et mon image s'affiche au milieu de la page, comme je le voulais.

Le problème doit peut-être venir du DOM, car pour que les valeurs d'une image soit détectée, il faut obligatoirement que l'évènement click passe dessus 1 fois.

Pour tester vous même, voici le script en ligne : [url]http://chokgfx.free.fr/uploads/galerie-photo-js/preview.html[/url]

Merci.

imgTag n'aura les bonnes dimensions qu'une fois l'image chargée.

Il serait donc bon d'attendre l'événement onload pour positionner ton image, en mettant un petit texte ou gif de chargement en attendant.

Et comment le faire techniquement ?

http://tinyurl.com/6kkyhyv...

Ou via le SiteDuZero.

Merci beaucoup !