11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Aller plus loin avec le tuto de galerie en js

Bonjour à tous,

Je viens d'intégrer la galerie en javascript et tout c'est bien passé.

Maintenant, je souhaite aller un poil plus loin mais mes compétences en javascript étant fortement limitées, je bloque sur un truc tout bête.

Mon html ressemble à ça :

<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>


L'image miniature s'appelle picto1-s.jpg et la moyenne picto1.jpg.
J'en ai une 3ème de grande taille que je souhaite afficher avec le lightbox (picto1-b.jpg) qui s'affiche en cliquant sur un lien "Agrandir l'image".

L'étape où je bloque est donc de définir le href de mon lien "Agrandir l'image"... vous me suivez ?

J'ai donc tenté ça (au sein de la fonction display_pics du tuto, juste en dessous de big_photo.src = this.href;

if {this.href = /v2/assets/images/projets/3/picto1.jpg} {
    zoom.href = /v2/assets/images/projets/3/picto1-b.jpg
    };
    else {
    if {this.href = /v2/assets/images/projets/3/picto2.jpg} {
        zoom.href = /v2/assets/images/projets/3/picto2-b.jpg
        } ;
    };


(zoom étant l'id de mon lien "Agrandir l'image")

Mais cela ne fonctionne pas... ce qui ne m'étonne aucunement d'ailleurs Smiley lol

Est-ce que quelqu'un aurait une solution ?
Merci par avance,

Perrine
Modifié par Perrine (06 Oct 2006 - 11:17)
Bien, j'ai finalement trouvé une solution. Au lieu de tester chaque href, je fais tout simplement un replace pour transformer le nom de l'image picto1.jpg par picto1-b.jpg et ça fonctionne !

Voici le code :
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
Sujet clos
Aller à