Album photo en xhtml css et javascript [Résolu]

Bonjour,

Après avoir lu ce tuto très inspirant, j'éssai d'en faire une version qui me convient mieux. J'ai apporté certaines modifications exemple la photo grand format ne s'affiche pas par défaut mais uniquement au clique de la miniature. J'aimerai qu'au clique sur la photo grand format elle disparaissent à nouveau, je sais le faire avec un javascript intrusif et ca m'oblige a ajouter un href du style

<a href="#" onclick="document.getElementById('photo').style.display='none'">

, comment le faire directement dans le fichier javascript, quelques pistes de solution sont les bienvenu merci.
Modifié par Parmenioneyes (04 Nov 2006 - 22:43)

Parmenioneyes a écrit :
Bonjour,

Après avoir lu ce tuto .

Salut, on est pas devin

chmel a écrit :

Salut, on est pas devin

http://css.alsacreations.com/Tutoriels-JavaScript/galerie-photo-javascript

Bon je viens de trouver un début de réponse avec le nouveau tutoriel «les bonnes pratique javascript»

donc le code ressemble à ca pour le moment

// Création d'un lien
   var oA = document.createElement('a');
   oA.setAttribute('href', '#');
   var oTxtA = document.createTextNode('Fermer');
   oA.appendChild(oTxtA);

   // Affectation d'une action au clic sur le lien
   oA.onclick = function() { document.getElementById('photo').style.display='none'; return false; }
	
   // Positionnement du lien dans la page
   var oCont = document.getElementById('photo');
   if(!oCont) return;
   oCont.appendChild(oA);


	var photos = document.getElementById('galerie_mini') ;
	// On récupère l'élément ayant pour id galerie_mini
	var liens = photos.getElementsByTagName('a') ;
	// On récupère dans une variable tous les liens contenu dans galerie_mini
	var big_photo = document.getElementById('big_pict') ;
	// Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale
	var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ;
	// Et enfin le titre de la photo de taille normale
	
	for(var i = 0 ; i < liens.length ; i++)
	// Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
	{
		liens[i].onclick = function()
		// Au clique sur ces liens
		{
			// on affiche la photo au format normal
			document.getElementById('photo').style.display='block';
			big_photo.src = this.href ; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
			big_photo.alt = this.title ; // On change son titre
			titre_photo.firstChild.nodeValue = this.title ; // On change le texte de titre de la photo
			return false ; // Et pour finir on inhibe l'action réelle du lien
		}
	}
}


window.onload = displayPics;

le lien est ajouté via javascript dans le dl ayant pour id photo. Comment faire pour que ce soit la photo qui soit cliquable ? [/i]

Bonjour, je n'avait pas bien compris ta demande mais la solution est simple :

Parmenioneyes a écrit :
Bonjour,
Après avoir lu ce tuto très inspirant, j'éssai d'en faire une version qui me convient mieux. J'ai apporté certaines modifications exemple la photo grand format ne s'affiche pas par défaut mais uniquement au clique de la miniature.

Pour cela, comme tu l'avais découvert, il suffit de changer le src de la grande image par celle que tu veux comme ici

a écrit :
J'aimerai qu'au clique sur la photo grand format elle disparaissent à nouveau, .

Il faut modifier le script :
juste après la ligne

	var big_photo = document.getElementById('big_pict') ;

ajoutes :

	big_photo.onclick=function(){this.src="url_de_ton_choix"}

Modifié par chmel (02 Nov 2006 - 22:04)

chmel a écrit :
Bonjour, je n'avait pas bien compris ta demande mais la solution est simple :
Pour cela, comme tu l'avais découvert, il suffit de changer le src de la grande image par celle que tu veux comme ici
J'aimerai qu'au clique sur la photo grand format elle disparaissent à nouveau, .

Il faut modifier le script :
juste après la ligne

	var big_photo = document.getElementById('big_pict') ;

ajoutes :

	big_photo.onclick=function(){this.src="url_de_ton_choix"}

je comprend pas ta soluce ce que j'ai fait c'est

big_photo.onclick=function(){document.getElementById('photo').style.display='none';}

mais rien n'indique à l'utilisateur que ca fait disparaitre l'image il n'y a pas de main comme pour un lien. J'aimerai ajouté via le dom le <a href="#"> avant la balise img mais je ne sais pas comment m'y prendre.

Décidément on ne se comprends pas:
si tu tiens à cacher la grande image au click :

big_photo.onclick=function(){this.style.display='none';}
// et pour la main (js seulement):
big_photo.style.cursor='pointer';}

Salut,

Parmenioneyes a écrit :
je comprend pas ta soluce ce que j'ai fait c'est

big_photo.onclick=function(){document.getElementById('photo').style.display='none';}

Tu peux faire quelque chose dans ce genre :

var a = document.createElement("a");
a.href = "#";
a.onclick = function() { document.getElementById('photo').style.display='none'; return false; }

big_photo.parentNode.appendChild(a);
a.appendChild(big_photo);

(voir encore une fois cette discussion)
Modifié par Eldebaran (04 Nov 2006 - 09:52)

Eldebaran a écrit :
Salut,Tu peux faire quelque chose dans ce genre :

var a = document.createElement("a");
a.href = "#";
a.onclick = function() { document.getElementById('photo').style.display='none'; return false; }

big_photo.parentNode.appendChild(a);
a.appendChild(big_photo);

(voir encore une fois cette discussion)

Excellent tu as compris ce que je souhaitais faire, merci. Connais-tu un tuto sur le dom javascript qui permet d'apprendre la base ? exemple parentNode c'est quoi ?
Modifié par Parmenioneyes (04 Nov 2006 - 23:01)

chmel a écrit :
Décidément on ne se comprends pas:
si tu tiens à cacher la grande image au click :

big_photo.onclick=function(){this.style.display='none';}
// et pour la main (js seulement):
big_photo.style.cursor='pointer';}

chmel je te send agressif. Tu avais écris

big_photo.onclick=function(){this.src="url_de_ton_choix"}

et non ca

this.style.display='none';

c'est la rasion pour laquelle je comprenais pas trop le rapport avec mon besoin. Ce que je voulais c'est ajouter dynamiquement via le dom javascript la balise <a href="#"> Eldebaran m'a fourni la méthode :

big_photo.parentNode.appendChild(a);
a.appendChild(big_photo);

j'espère qu'on se comprend maintenant. et je te remercie pour ton aide.

Excuse moi si j'ai pu te paraitre agressif, c'est possible sans lien mais J'avais oublié la navigation clavier.
Modifié par chmel (05 Nov 2006 - 01:58)