[Perrine]

Bonjour à tous

J'utilise le tuto de galerie en js d'Alsacréations

J'utilise 3 formats d'images : miniature (picto1-s.jpg), moyen (picto1.jpg) et grand (picto1-b.jpg)

Voici mes sources :

L'affichage de l'image du centre :

<div id="img-rea-centre">
  <img id="img-centre" src="/v2/assets/images/projets/3/picto1.jpg" alt="" />
</div>

La liste des images de la galerie

<ul id="galerie-rea">
  <li><a href="/v2/assets/images/projets/3/picto1.jpg"><img src="/v2/assets/images/projets/3/picto1-s.jpg" alt="" /></a></li>
  <li><a href="/v2/assets/images/projets/3/picto2.jpg"><img src="/v2/assets/images/projets/3/picto2-s.jpg" alt="" /></a></li>
  <li><a href="/v2/assets/images/projets/3/picto3.jpg"><img src="/v2/assets/images/projets/3/picto3-s.jpg" alt="" /></a></li>
</ul>

Un lien pour agrandir encore plus l'image

<div id="rea-zoom"><a id="zoom-pict" href="/v2/assets/images/projets/3/picto1-b.jpg">Agrandir l'image</a></div>

Voici le .js

function displayPics()
{
	var photos = document.getElementById('galerie-rea');
	// On récupère l'élément ayant pour id galerie-rea (ul)
	var liens = photos.getElementsByTagName('a');
	// On récupère dans une variable tous les liens contenu dans galerie_mini
	var photo_centre = document.getElementById('img-centre');
	// Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale
		var zoom = document.getElementById('zoom-pict');

 	// Une boucle parcourant l'ensemble des liens contenu dans galerie-rea
	for (var i = 0; i < liens.length; ++i) {
		// Au clique sur ces liens 
		liens[i].onclick = function() {
			photo_centre.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
						zoom.href = this.href;
			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

Le tuto me permet, en cliquant sur une miniature, de modifier l'image de taille moyenne. Jusque là, tout marche.

L'étape suivante consisterait à afficher l'image grand format (picto1-b.jpg) et donc de modifier le href de mon dernier code HTML (#zoom-pict).

Pour cela, j'ai modifié le .js mais mes compétences en javascript étant limitées, je ne suis pas sure de moi.

Script modifié : (les lignes précédées de ** sont les lignes que j'ai ajoutées)

function displayPics()
{
	var photos = document.getElementById('galerie-rea');
	// On récupère l'élément ayant pour id galerie-rea (ul)
	var liens = photos.getElementsByTagName('a');
	// On récupère dans une variable tous les liens contenu dans galerie_mini
	var photo_centre = document.getElementById('img-centre');
	// Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale
		** var zoom = document.getElementById('zoom-pict');
		** //Je récupére l'élément qui me permet de faire le lien vers l'image grand format 

 	// Une boucle parcourant l'ensemble des liens contenu dans galerie-rea
	for (var i = 0; i < liens.length; ++i) {
		// Au clique sur ces liens 
		liens[i].onclick = function() {
			photo_centre.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
						** if {this.href == /v2/assets/images/projets/3/picto1.jpg} { // si l'image moyenne affichée est le numéro 1 
						**	 zoom.href = /v2/assets/images/projets/3/picto1-b.jpg  // alors j'affiche l'image grand format n°1
						**	 };
						** else
						**	 {
						**		if {this.href == /v2/assets/images/projets/3/picto2.jpg} // on traite l'image 2, et etc....
						**	  }  
						** zoom.href = this.href; // on affiche le bon href
			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

Mais ça ne fonctionne pas, probablement car les instructions que j'ai données sont fausses ? Peut-on faire un test if sur this.href ?

(La question a déjà été posée sur le forum d'Alsa et j'ai décidé de faire un doublon sur le HUB au vu de l'absence de réponse sur Alsa... quelle que soit la solution apportée, je la rapporterai ensuite sur le forum d'Alsa bien sûr )

[Régis]

Salut Perrine,

Il y a quelques jours, je regardai justement ce script là... J'ai voulu y amener quelques modifications afin de l'adapter à mes besoins, mais n'étant pas pro du javascript, j'ai rapidement laissé tomber pour m'intéresser à ce script : Lightbox JS v2.0

[Perrine]

Salut Régis,

C'est justement le script que je souhaite utiliser sur le lien #zoom-pict mais avant cela, je dois pouvoir modifier le href du dit #zoom-pict en complétant le tuto d'Alsa

LightBox propose uniquement 2 formats d'images alors que j'en ai 3 pour le cas qui m'occupe.

[Perrine]

J'avance mais à petits pas. Je crois que je touche au but mais si quelqu'un peut m'aiguiller, je ne dis pas non !

Je reprends mes explications pour essayer d'être le plus accessible possible...

J'ai une mini galerie, composée de 3 images, chacune de ces 3 images est déclinée en 3 formats différents : petit, moyen et grand.

Le clic sur une miniature (petit format) permet, grâce à du javascript, de modifier l'image moyen format affiché sur la même page. Jusque là, c'est facile, c'est le tuto d'Alsa.

L'étape suivante doit me permettre de modifier le href d'un lien <a> qui permet de faire le lien vers l'image grand format.

Donc, d'un seul clic sur une miniature, le src de l'image moyen format est modifiée, de même que le href de mon lien vers l'image grand format.

Le .js initial est

function displayPics()
{
	var photos = document.getElementById('galerie-rea');
	// On récupère l'élément ayant pour id galerie-rea (ul)
	var liens = photos.getElementsByTagName('a');
	// On récupère dans une variable tous les liens contenu dans galerie_mini
	var photo_centre = document.getElementById('img-centre');
	// Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale
		var zoom = document.getElementById('zoom-pict');

	// Une boucle parcourant l'ensemble des liens contenu dans galerie-rea
	for (var i = 0; i < liens.length; ++i) {
		// Au clique sur ces liens
		liens[i].onclick = function() {
			photo_centre.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
			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

Après moults tests et lectures, j'ai créé un tableau grandes[] qui me permet de stocker les liens vers les images grand format.
Ce tableau est donc quasi identique au tableau liens[], mis à part que liens[] stocke les liens vers les images moyen format.

Jusque là, y'a encore du monde qui me suit ?

Voici le code auquel j'arrive :

function displayPics()
{
	// On récupère l'élement contenant l'image du centre
	var photo_centre = document.getElementById('img-centre');
	// On récupère l'élément ayant pour id galerie-rea (ul)
	var photos = document.getElementById('galerie-rea');
	// On récupère dans une variable tous les liens contenu dans galerie_mini
	var liens = photos.getElementsByTagName('a');
	// On récupère le lien qui ouvre lightbox (image grand format)
	var zoom = document.getElementById('zoom-pict');

	// On crée le tableau qui stock les liens vers les images grand format
	var grandes = [];
	// On remplit le tableau
	grandes[0] = "[(base_url)]assets/images/projets/[[DocEnCours]]/picto1-b.jpg"
;
	grandes[1] = "[(base_url)]assets/images/projets/[[DocEnCours]]/picto2-b.jpg"
;
	grandes[2] = "[(base_url)]assets/images/projets/[[DocEnCours]]/picto3-b.jpg"
;
	// Une boucle parcourant l'ensemble des liens contenus dans galerie-rea permet de modifier l'image du centre et le href de #zoom-pict
	for (var i = 0; i < liens.length; ++i) {
		// Au clique sur ces liens 
		liens[i].onclick = function() {
			photo_centre.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
			zoom.href = grandes[i];
			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

Et là, je sais que je touche du doigt la solution... le seul hic, c'est que grandes[i] renvoit undefined. Or, quand je teste grandes[0], il me sort bien le bon lien !
Donc, j'en conclue que c'est mon i de grandes[i] qui ne va pas. Mais alors, comment faire pour que i prenne bien la valeur du i utilisé dans le for ?

Je sais que je suis pas loin, je le sais, je le sais !! Mais je suis bloquée... alors si un bonne âme passe par là ! Amen...

[Perrine]

J'ai trouvé la solution à mon problème : et il était tout bête !
Il suffisait de faire un replace sur la variable qui contient l'url de mon image moyen format de manière à appeler mon image grand format.

Je ne sais pas si ça sera utile, mais voici le code final qui fonctionne :

function displayPics()
{
	// On récupère l'élement contenant l'image du centre
	var photo_centre = document.getElementById('img-centre');
	// On récupère l'élément ayant pour id galerie-rea (ul)
	var photos = document.getElementById('galerie-rea');
	// On récupère dans une variable tous les liens contenu dans galerie_mini
	var liens = photos.getElementsByTagName('a');
	// On récupère le lien qui ouvre lightbox (image grand format)
	var zoom = document.getElementById('zoom-pict');

	// Une boucle parcourant l'ensemble des liens contenus dans galerie-rea permet de modifier l'image du centre et le href de #zoom-pict
	for (var i = 0; i < liens.length; ++i) {
		// Au clique sur ces liens 
		liens[ i ].onclick = function () {
			photo_centre.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
			var monhref = this.href; // Je crée monhref pour retravailler la chaîne de caractères
			monhref = monhref.replace (/.jpg/, "-b.jpg"); // Je remplace l'extension .jpg par -b.jpg pour appeler l'image grand format
			zoom.href = monhref; // Je remplace le href du lien
			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