Précédent   Forum des professionnels en informatique > Webmasters - Développement Web > JavaScript
JavaScript Forum programmation JavaScript. Lire : Cours JavaScript, FAQ JavaScript, Toutes les FAQ JavaScript et Sources JavaScript
Partagez cette discussion sur d'autres réseaux sociaux : Viadeo Twitter Google Facebook Digg Delicious MySpace Yahoo
Réponse Proposer ce sujet en actualité
 
Outils de la discussion
Publicité
'
Vieux 30/10/2011, 12h32   #1
Invité de passage
 
Inscription : juillet 2010
Messages : 16
Détails du profil
Informations forums :
Inscription : juillet 2010
Messages : 16
Points : 0
Points : 0
Par défaut 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 ?
xerel est déconnecté   Envoyer un message privé Réponse avec citation 00
Réponse Proposer ce sujet en actualité
Outils de la discussion



Fuseau horaire GMT +2. Il est actuellement 09h57.


 
 
 
 
Partenaires

Hébergement Web