11480 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

stade A Smiley smile
J'ai codé mon site internet avec Bootstrap4.
Dans ce dernier, j'ai une galerie d'image qui fonctionne grâce à un fichier miniGalerie.js
Mon site et le JavaScript fonctionnait très bien.

stade B
J'ai effectué sa migration vers une mise en forme avec md-bootstrap for bootstrap4.
Mon site et le JavaScript fonctionnait toujours très bien.

stade C Smiley eek
J'ai déplacé mes fichiers .php contenant les galeries d'images dans un dossier -projets- (car ils étaient au niveau racine et je ne voyait plus mon fichier index.php)
J'ai réécrit tous mes liens pour qu'il retrouve les images, les php et les styles.
Mon site retrouve tout sauf la galerie JavaScript, qui ne fonctionne plus.

pour info :

mon arborescence au STADE B :
- index.php
- projet.php
- dossier css
- dossier font
- dossier img
- dossier js
- dossier php
- dossier vignette


mon arborescence au STADE C :
- index.php
- dossier projets > - projet.php
- dossier css
- dossier font
- dossier img
- dossier js
- dossier php
- dossier vignette


le contenu html de mes pages projet.php où s’exécute le JavaScript au STADE B:

<!--DEBUT galerie-->
<div class="MesClass" id="galerie_mini">
				<a href="./img/zoom01.jpg" title="logo sur serviette"><img class="MesClass" src="./vignette/mini01.jpg" alt="logo sur serviette"></a>
				<a href="./img/zoom02.jpg" title="logo soins et massages"><img class="MesClass" src="./vignette/mini02.jpg" alt="logo soins et massages"></a>
</div>
<!--FIN galerie-->
<!--DEBUT image en grand-->
			<div class="MesClass"> <img class="MesClass" id="big_pict" src="./img/zoom01.jpg" alt="logo sur serviette"> 
			</div>
<!--FIN image en grand-->


le contenu html de mes pages projet.php où s’exécute le JavaScript au STADE C:

<!--DEBUT galerie-->
<div class="MesClass" id="galerie_mini">
				<a href="../img/zoom01.jpg" title="logo sur serviette"><img class="MesClass" src="../vignette/mini01.jpg" alt="logo sur serviette"></a>
				<a href="../img/zoom02.jpg" title="logo soins et massages"><img class="MesClass" src="../vignette/mini02.jpg" alt="logo soins et massages"></a>
</div>
<!--FIN galerie-->
<!--DEBUT image en grand-->
			<div class="MesClass"> <img class="MesClass" id="big_pict" src="../img/zoom01.jpg" alt="logo sur serviette"> 
			</div>
<!--FIN image en grand-->


le code JavaScript qui gère la galerie :

if (typeof g !== 'undefined') {
  // Désormais, on sait que toto est bien
  // défini et on peut poursuivre.
}

// JavaScript Document
function miniGalerie()
{
  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

  // 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 l'attribut alt de l'image en le remplaçant par title du lien
      return false; // Et pour finir on inhibe l'action réelle du lien
    };
  }
}

// Il ne reste plus qu'à appeler notre fonction au chargement de la page
window.onload = miniGalerie;


N'hésitez pas à me dire si ce n'est pas clair.
Merci pour l'aide Smiley cligne
dans mes linkhead :
<!--appel feuille CSS-->
<link href="../css/style.css" rel="stylesheet" type="text/css">

   
<!--appel de la feuille de style
<link rel="stylesheet" href="css/style.css">-->
<!--appel de la grille bootstrap-->
<!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">-->


  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
 
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
  <!-- Bootstrap core CSS -->
  <link href="../css/bootstrap.min.css" rel="stylesheet">
  <!-- Material Design Bootstrap -->
  <link href="../css/mdb.min.css" rel="stylesheet">



<!--appel des polices
<link href="https://fonts.googleapis.com/css?family=Reem+Kufi|Source+Sans+Pro:400,400i,700,700i" rel="stylesheet"> 

<link rel="stylesheet" href="assets/font-awesome-4.7.0/css/font-awesome.min.css">
<!--fin font awesome-->
  


dans l'appel des scripts en bas de page :
<!--TOUTES PAGES-->
<!--Script pour visualiser la galerie d'images-->
<script type="text/javascript" src="js/miniGalerie.js"></script>

<!--JS pour BOOTSTRAP-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!--FIN JS pour BOOTSTRAP-->
C'est bon ! C'était ça !

changer :
<script type="text/javascript" src="js/miniGalerie.js"></script>

en :
<script type="text/javascript" src="../js/miniGalerie.js"></script>


Merci ! Le petit message m'a fait réalisé que je devait le changer
Meilleure solution