Bonjour,
stade A
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
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:
le contenu html de mes pages projet.php où s’exécute le JavaScript au STADE C:
le code JavaScript qui gère la galerie :
N'hésitez pas à me dire si ce n'est pas clair.
Merci pour l'aide
stade A
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
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