Modification d'un Script de gallerie d'image
Salut!
J'ai un petit soucis sur une fonction javascript qui m'a l'air pourtant simple au premier abord.
Je crée 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 souci passage de vignette > moyenne image.
Mon code Html est :
Code:
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
|
<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 :
Code:
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
|
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 pour accueillir le lightview
Code:
1 2
|
<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 contiennent mon lien vers mon flash.
ainsi j'ai
Code:
1 2
|
<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
Code:
1 2
|
<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
Code:
1 2
|
var fenetre = document.getElementById('lien_fenetre') ; |
Puis dans la boucle rajouter
Code:
1 2
|
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 souci)
Pouvez vous m'apporter votre aide ?