Discussion :

[antoine_59]

Bonjour,

J'aimerais intégrer sur mon site une galerie de photos mignature avec la possibilité d'afficher une grande version en cliquant dessus.

Cela marche très bien avec une photo verticale.

Pour une photo horizontale, j'aimerais modifier les propriétés width et height de la grande version à afficher selon l'orientation de la photo mignature.
J'ai repris l'idée du script que j'ai trouvé sur internet en ajoutant la variable img mais cela ne fonctionne pas

Voici le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<script type="text/javascript">	
		function displayPics()
{
    var photos = document.getElementById('galerie_mini') ;
	// On récupère l'élément ayant pour id galerie_mini
	var liens = photos.getElementsByTagName('a') ;
	var img = photos.getElementsByTagName('img');
	// On récupère dans une variable tous les liens contenu dans galerie_mini
	var big_photo = document.getElementById('big_pic') ;
	// Ici c'est l'élément ayant pour id big_pic qui est récupéré, c'est notre photo en 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
		{
			big_photo.src = this.href ; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
			if (img[i].width > img[i].height) { // Affichage photo (big_pic) horizontal ou vertical selon orientation photo mignature
			big_photo.width=340;
			big_photo.height=228;
			}
			else {
			big_photo.width=237;
			big_photo.height=355;
			}	
			return false ; // Et pour finir on inhibe l'action réelle du lien
		}
	}
}
window.onload = displayPics ;
// Il ne reste plus qu'à appeler notre fonction au chargement de la page
</script>

Je vous remercie pour votre aide!

[kernelfailure]

Tu utilises bien this.href, par contre, j'ai des doutes sur la portée de "img[i]" et "big_photo" dans ta fonction anonyme pour le onclick.

[E.Bzz]

Bonjour,

j'ai des doutes sur la portée de "img[i]" et "big_photo" dans ta fonction anonyme pour le onclick.

+1

Explications et réponse dans la FAQ
(le cas est différent, mais le problème et donc la solution, sont les mêmes)

A+

[antoine_59]

Un peu compliqué pour un non expert en javascript Pas compris comment adapter ce code à mon cas.

Par contre je m'en suis sorti quand même en intégrant un id="horiz" aux balises <a> des mignatures horizontales.

Ensuite, la condition dans le javascript pour affichage horizontal ou vertical de la version en grand format devient :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if (this.id == "horiz")

Ca pourra peut être aider quelqu'un...

Merci à vous.

[SpaceFrog]

et du coup tu te retourves avec plusieurs id identiques sur la page ...

en fait la solution proposé indique juste de lettre une propriété (attribut) personnelle à l'objet par exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 sens="horiz"

et ensuite de tester

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 if (this.sens == "horiz")

mais les id identiques sont à proscrire !!!

[antoine_59]

OK merci beaucoup pour la remarque !