Modification d'un script javascript de galerie d'images

[xerel]

Salut!

J'ai un petit soucis sur une fonction javascript qui m'a l'air pourtant simple au premier abord.

Je créer un portfolio comprenant des vignettes, lorsque je clique sur ces vignettes, cela m'affiche une image de taille moyenne sur ma page html et j'aimerais que lorsque je clique sur cette image moyenne, celle ci affiche mon flash.

 

donc vignette >click!> moyenne image >click! > lightview flash

 

Première partie no soucis passage de vignette > moyenne image.

Mon code Html est :

<dl id="photo">
     <dd><img id="big_pict" src="../images/web/moyenne/img-mexico1.PNG"  alt="culturamexico" /></dd>

	<dt>Cultura Popular en Mexico, Réalisation d'une maquette de site sur le thème de la culture populaire mexicain. Technique : AS3 et flash. Cliquez sur les photos pour tester.</dt>


       	 <ul id="galerie_mini" >

       <li><a href="../images/web/moyenne/img-mexico1.PNG" title="Cultura Popular en Mexico, Réalisation d'une maquette de site sur le thème de la culture populaire mexicain.  Technique : AS3 et flash. Cliquez sur les photos pour tester."><img src="../images/web/miniature/m-mexico.JPG" alt="culturamexico"/></a></li>

       <li><a href="../images/web/moyenne/img-mexico2.PNG" title="Cultura Popular en Mexico, Réalisation d'une maquette de site sur le thème de la culture populaire mexicain. Technique : AS3 et flash" name="../images/web/light/culuramexico2.swf"><img src="../images/web/miniature/m-mexico2.JPG"alt="culturamexico" /></a></li> 

       <li><a href="../images/web/moyenne/img-mexico3.PNG" title="Cultura Popular en Mexico, Réalisation d'une maquette de site sur le thème de la culture populaire mexicain. Technique : AS3 et flash"><img src="../images/web/miniature/m-mexico3.JPG" alt="culturamexico" /></a></li>

       <li><img src="../images/void.PNG" alt="" /></li>
       <br/>

       <li><img src="../images/void.PNG" alt="" /></li>
       <li><img src="../images/void.PNG" alt="" /></li>
       <li><img src="../images/void.PNG" alt="" /></li>
       <li><img src="../images/void.PNG" alt="" /></li>
 </ul>	

  </dl>

 

Le code javascript correspondant est :

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') ;
// 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

// Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
for (var i = 0 ; i < liens.length ; ++i) {
	// Au clique sur ces liens 
	liens[i].onclick = function() {
		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;

 

Donc pas vraiment compliqué, on inverse en fait le contenu de href par celui src pour chaque image et le contenu de alt par title pour chaque texte.

J'aimerais garder utiliser ce script pr mon effet lightview.

 

Donc j'ai modifié mon html comme ceci pr accueillir le lightview

 

<dd><a href="../images/web/light/culuramexico1.swf" rel="flash" class="lightview"  ><img id="big_pict" src="../images/web/moyenne/img-mexico1.PNG"  alt="culturamexico" /></a></dd>

 

et je me suis donc dis qu'il faudrait procéder de la même façon pour avoir un flash différent qui s'affiche pour chaque vignette.

c'est a dire rajouter une variable qui récupère l'id de <a></a> qui permet d'afficher le lightview (ici l'id fenetre) et rajouter un attribut name sur les balises <a></a> de mes vignettes qui contienent mon lien vers mon flash.

 

ainsi j'ai

<dd><a href="../images/web/light/culuramexico1.swf" rel"flash" class="lightview" id="lien_fenetre" ><img id="big_pict" src="../images/web/moyenne/img-mexico1.PNG"  alt="culturamexico" /></a></dd>

 

et

 

<li><a href="../images/web/moyenne/img-mexico2.PNG" title="Cultura Popular en Mexico, Réalisation d'une maquette de site sur le thème de la culture populaire mexicain. Technique : AS3 et flash" name="../images/web/light/culuramexico2.swf"><img src="../images/web/miniature/m-mexico2.JPG"alt="culturamexico" /></a></li>

 

et en js j'ai

 

var fenetre = document.getElementById('lien_fenetre') ;

 

Puis dans la boucle rajouter

 

fenetre.href = this.name;

 

a priori, l'inversion devrait marché et le contenu de 'name'(mon lien vers mon flash) devrait se retrouver dans le 'href' pour la lightview, mais ça ne fonctionne pas

(La lightview en elle même marche, il n'y a pas de soucis)

Pouvez vous m'apporter votre aide ?