5568 sujets

Sémantique web et HTML

[Résolu] Galerie qui ne s'affiche pas

Bonjour,

Voilà j'ai crée un code pour faire une galerie photo, alors que tout fonctionne quand j'ouvre ma page .html sur un explorateur pour la tester, maintenant qu'elle est en ligne ça ne semble pas fonctionner... En effet j'ai crée des images miniatures et en cliquant dessus elles sont censées s'afficher en grand et donne la possibilité à l'utilisateur de les faire défiler.
Seulement voilà, maintenant que le site est en ligne quand on clique sur la miniature rien ne se passe... et dans la console je vois ce message :

"Galerie.html:45 Uncaught ReferenceError: openModal is not defined at HTMLImageElement.onclick"

Je vous laisse mon code :
<div class="row">
					<div class="column">
						<img src="Photos/01.jpg" onclick="openModal();currentSlide(1)" class="hover-shadow" title="cliquez pour agrandir">
						<p> Les calanques </p>
					</div>
					<div class="column">
						<img src="Photos/02.jpg" onclick="openModal();currentSlide(2)" class="hover-shadow" title="cliquez pour agrandir">
						<p> Autoportrait </p>
					</div>
					<div class="column">
						<img src="Photos/07.jpg" onclick="openModal();currentSlide(3)" class="hover-shadow" title="cliquez pour agrandir">
						<p> Budapest </p>
					</div>
					<div class="column">
						<img src="Photos/04.jpg" onclick="openModal();currentSlide(4)" class="hover-shadow" title="cliquez pour agrandir">
					<p> Port-Blanc </p>
					</div>
					<div class="column">
						<img src="Photos/05.jpg" onclick="openModal();currentSlide(4)" class="hover-shadow" title="cliquez pour agrandir">
						<p> Nantes </p>
					</div>
				</div>

				<!-- The Modal/Lightbox -->
				<div id="myModal" class="modal">
				  <span class="close cursor" onclick="closeModal()">&times;</span>
				  <div class="modal-content">

					<div class="mySlides">
					  <div class="numbertext">1 / 5</div>
					  <img src="Photos/01.jpg" style="width:100%">
					</div>

					<div class="mySlides">
					  <div class="numbertext">2 / 5</div>
					  <img src="Photos/02.jpg" style="width:100%">
					</div>

					<div class="mySlides">
					  <div class="numbertext">3 / 5</div>
					  <img src="Photos/07.jpg" style="width:100%">
					</div>

					<div class="mySlides">
					  <div class="numbertext">4 / 5</div>
					  <img src="Photos/04.jpg" style="width:100%">
					</div>
					
					<div class="mySlides">
					  <div class="numbertext">5 / 5</div>
					  <img src="Photos/05.jpg" style="width:100%">
					</div>
					
					<!-- Next/previous controls -->
					<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
					<a class="next" onclick="plusSlides(1)">&#10095;</a>

				  </div>

Modifié par Cadi09 (13 May 2018 - 19:31)
Ton code n'arrive pas accéder à la fonction OpenModal que tu utilises pour afficher les images.

Tu as bien envoyé le script JS qui (gère la galerie) avec la page html sur ton serveur ?
Nolan a écrit :
Ton code n'arrive pas accéder à la fonction OpenModal que tu utilises pour afficher les images.

Tu as bien envoyé le script JS qui (gère la galerie) avec la page html sur ton serveur ?


Et bien oui mon fichier JS est bien dans mon www de mon ftp... je laisse son code :

// Open the Modal

function openModal() {

  document.getElementById('myModal').style.display = "block";

}



// Close the Modal

function closeModal() {

  document.getElementById('myModal').style.display = "none";

}



var slideIndex = 1;

showSlides(slideIndex);



// Next/previous controls

function plusSlides(n) {

  showSlides(slideIndex += n);

}



// Thumbnail image controls

function currentSlide(n) {

  showSlides(slideIndex = n);

}



function showSlides(n) {

  var i;

  var slides = document.getElementsByClassName("mySlides");

  var dots = document.getElementsByClassName("demo");

  var captionText = document.getElementById("caption");

  if (n > slides.length) {slideIndex = 1}

  if (n < 1) {slideIndex = slides.length}

  for (i = 0; i < slides.length; i++) {

    slides[i].style.display = "none";

  }

  for (i = 0; i < dots.length; i++) {

    dots[i].className = dots[i].className.replace(" active", "");

  }

  slides[slideIndex-1].style.display = "block";

  dots[slideIndex-1].className += " active";

  captionText.innerHTML = dots[slideIndex-1].alt;

}
Essaye peut-être de déclencher ton script après le chargement du DOM. Englobe ton script dans cet appel : 


document.addEventListener("DOMContentLoaded", function(event) { 
  // tout le script ici ...
});
Vérifie dans l'onglet réseau si tu n'as pas une erreur 404 quand tu télécharges tes scripts JS
Ton site est en HTTPS et tu télécharges tous tes scripts avec le même protocole ?
bazooka07 a écrit :
Vérifie dans l'onglet réseau si tu n'as pas une erreur 404 quand tu télécharges tes scripts JS
Ton site est en HTTPS et tu télécharges tous tes scripts avec le même protocole ?


J'ai transféré tous mes dossiers avec filezilla sur mon ftp je me suis pas posée la question j'avoue que c'est la première fois que je le fais donc niveau serveur j'suis pas experte... Il faut que je asse autrement ?
Je vais testé la solution du dessus d'ailleurs.
bazooka07 a écrit :
Vérifie dans l'onglet réseau si tu n'as pas une erreur 404 quand tu télécharges tes scripts JS
Ton site est en HTTPS et tu télécharges tous tes scripts avec le même protocole ?


Je crois qu'en fait c'est bien ça le problème il ne trouve pas mon fichier JS alors qu'il est bien sur mon ftp... Comment faire du coup ?
Bon bin finalement une simple bétise dans mon code... Un oublie de majuscule dans ma ligne de code pour accéder au fichier.... Des fois c'est à se demander pourquoi on cherche compliqué quand c'est tout simple !!
Merci en tout cas !
Sujet clos
Aller à