Forums Zebulon.fr: Modification d'un script javascript de galerie d'images - Forums Zebulon.fr

Aller au contenu

Modification d'un script javascript de galerie d'images Utilisation de Lightview pour afficher un flash Noter : -----

#1 L'utilisateur est hors-ligne   xerel 

  • Member
  • Groupe : Membres
  • Messages : 72
  • Inscrit(e) : 22-août 08

Posté 29 octobre 2011 - 01:57

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

PUBLICITÉ

  • Annonces Google



Réponse rapide

  

Similar Topics
  Sujet Commencé par Statistiques Infos sur le dernier message
Sujet ouvert (nouvelles réponses) CPU à 100%, ordinateur ralenti, script ne répond plus Luca 
  • 3 réponses
  • 118 vues
Sujet ouvert (nouvelles réponses) [Résolu] Extraire texte et images d'un PDF
[Résolu… si l'on veut !] Comment procéder ?
BayernFan62 
  • 11 réponses
  • 1407 vues
Sujet ouvert (nouvelles réponses) Besoin d'aide pour ce code JavaScript
Ajouter un champ input text
caramela-bxl  
  • 0 réponses
  • 175 vues
Sujet ouvert (nouvelles réponses) Flash Player plante en permanence
Tout est dans le titre
bernuche 
  • 1 réponses
  • 253 vues
Sujet chaud (nouvelles réponses) Aperçu des images Windows will44 
  • 17 réponses
  • 16529 vues
Sujet chaud (nouvelles réponses) [Résolu] Utilisation Firefox MONTEIL  
  • 34 réponses
  • 1038 vues
Sujet ouvert (nouvelles réponses) [Résolu] Écran devenant noir en cours d'utilisation phil14 
  • 11 réponses
  • 506 vues
Sujet ouvert (nouvelles réponses) [Résolu] Automatisation script VBS 9project 
  • 6 réponses
  • 332 vues
Sujet ouvert (nouvelles réponses) Augmentation de l'utilisation de la mémoire
Analyse du rapport HijackThis
yapaslfeu 
  • 2 réponses
  • 219 vues
Sujet ouvert (nouvelles réponses) [Résolu] Augmentation de l'utilisation du CPU
Plusieurs objects cachés, d'après Avira
kholl 
  • 10 réponses
  • 437 vues

1 utilisateur(s) en train de lire ce sujet
0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)



    Page officielle Zebulon.fr