javascript et barre de navigation

javascript et barre de navigation - Javascript/Node.js - Programmation

Marsh Posté le 19-06-2016 à 11:37:41    

bonjour a tous
 
j'ai un gros bug pour mon site; j'ai un code javascript qui me permets d'agrandir et de réduire une photo.
j'ai un fichier de grandes images et un de petites. le code fonctionne très bien mais il pollue ma navigation.
quand je veux changer de page j'arrive sur une page  vierge.
 
 
voici mon code, si quelqu'un a une solution je suis preneur.
ps: mes connaissances  en javascript sont limitées.
 
merci d'avance
 
 
 
<div id="menu">
 <nav>
   <ul>
    <li><a href="#">Acceuil</a>
    </li>
    <li><a href="galerie.html">Galerie</a>
    </li>
    <li><a href="macro.html">Macro</a>
    </li>
    <li><a href="#">Carnet de voyages</a>
      <ul>
       <li><a href="madere-portugal.html">Madère, Portugal</a></li></ul>
    </li>
    <li><a href="blog.html">Blog</a>
    </li>
    <li><a href="#">A propos</a>
      <ul>
        <li><a href="lephotographe.html">Le photographe</a></li>
        <li><a href="mentions-legales.html">Mentions légales</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </li>
  </ul>
 </nav>  
</div>
<div id="grdgalerie"></div>  
<p>
 <a href="photos_galerie_web/grandes_vignettes/champs_en_fleur+le.jpg"height="450" width="790" alt="Champs en fleurs" title="champs en fleur"> <img src="photos_galerie_web/petites_vignettes/champs_en_fleur.jpg" height="160" width="266"  alt="miniature"/></a>
  <a href="photos_galerie_web/grandes_vignettes/coucher_de_soleil+le.jpg"height="450" width="790" title="Afficher l'image originale"><img src="photos_galerie_web/petites_vignettes/coucher_de_soleil.jpg"  height="160" width="266"  alt="Miniature"/></a><span>Coucher de soleil</span>
</p>
<script>
 var links = document.getElementsByTagName('a'),
          linksLen = links.length;
 for (var i = 2 ; i < linksLen ; i++) {
  links[i].onclick = function() {  
              displayImg(this);  
              return false;  
          };
  }
function displayImg(link) {
 var img = new Image(),
           grdgalerie = document.getElementById('grdgalerie');
 img.onload = function() {
            grdgalerie.innerHTML = '';
 grdgalerie.appendChild(img);
 img.src = link.href;
         grdgalerie.style.display = 'block';
        grdgalerie.innerHTML = '<span>Chargement en cours...</span>';     }
    document.getElementById('grdgalerie').onclick = function() {
          this.style.display ='none';
      };
  </script>
 
 

Reply

Marsh Posté le 19-06-2016 à 11:37:41   

Reply

Marsh Posté le 30-06-2016 à 16:56:24    

Salut,
 
Déjà ton script boucle sur tous les liens de ta page ce qui comprend également la navigation donc c'est dégueux:

Code :
  1. var links = document.getElementsByTagName('a')


 
Je te conseille d'ajouter une classe css sur tes liens qui servent au photos comme par exemple:

Code :
  1. <a href="..." class="miniature"><img src="..." /></a>


 
et tu changes ton getElementsByTagName par getElementsByClassName l'avantage c'est que tu pointes uniquement sur tes liens d'image

Code :
  1. var links = document.getElementsByClassName('miniature')


 
autre chose tu n'es pas obligé de créer une variable pour connaitre la taille du tableau tu peux directement mettre dans la condition de ta boucle for, par contre bien mettre le var i = 0 à cause du changement précédent

Code :
  1. for (var i = 0 ; i < links.length ; i++)


---------------
[Feed-back]
Reply

Marsh Posté le 03-07-2016 à 18:24:15    

Salut
 
merci beaucoup pour tes conseil, tu m'a rendu un gros service, je ne savais plus comment faire depuis plusieurs semaines.
grâce tes corrections je  peux enfin  finir  mon site
 
merci
 
Grisou-57

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed