Tableau avec images en pop-up

**laureneg** · 23/08/2020, 12h49

Bonjour,
Je suis en train de travailler sur une petite page web mais je suis en train de bloquer sur des éléments de jQuery. J'essaie de suivre les tutos trouvés en ligne mais malgré cela je ne parviens pas à résoudre mon problème. (la solution est surement sous mes yeux, mais à force d'être dessus je ne le vois plus)

Voici la page : https://dev.laurenegrisot.fr/ranges-def/index2.php

Lorsque l'on clique sur un chiffre, une image s'affiche. J'aimerais qu'elle s'affiche en pop-up a l'endroit de la case et que lorsque l'on clique ailleurs, l'image se ferme.
J'ai essayé de partir de ce tuto, mais il semblerait que ça ne convienne pas ( https://www.w3schools.com/w3css/tryi...ss_modal_close )

Voici les éléments que j'ai

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
	<div id="clear">
			<div id="image" >
			</div>
			<div id="image2">
			</div>
		</div>
 
 
<script>
var x = 0;
var y = 0;
var z = 0;
 
function loadImage(img) {
// Get the modal
var modal = document.getElementById("image").innerHTML = "<img src='images/" + img + "'/>";
    }
 
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
 
 
</script>

Il est possible que ma question soit totalement stupide et je m'en excuse, j'essaie de me mettre au jQuery mais je n'ai pas encore tout saisi malgré les nombreux tutos que je lis

Merci de votre aide !

**Toufik83** · 24/08/2020, 06h24

Bonjour,

Cela ne fonctionne pas parce que tu as des erreurs dans la console du navigateur.

1-la fonction loadImage est indéfinie dans le code du lien que tu as montré ( tu l'as mis comme commentaire...).

2-tu utilise un code jQuery qui n'a aucune utilité :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
$(document).ready(function() {
  $('.template-article img').each(function() {
      var currentImage = $(this);
      currentImage.wrap("<a class='image-link' href='" + currentImage.attr("src") + "'</a>");
  });
  $('.image-link').magnificPopup({type:'image'});
});

Alors que la bibliothèque jQuery n'est pas importé dans ta page html.

Je ne pense pas que tu dois utiliser jQuery pour ça, mais si tu veux l'apprendre on peux trouver une solution plus rapide et efficace.

Il faut d'abord importer jQuery, pour le faire, écris "jquery cdn" dans google, le premier lien qui s'affiche jQuery CDN tu cliques sur "uncompressed" dans la section jQuery 3.x (c'est la version non compressée), un popup s'affiche contenant une balise script

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<script
  src="https://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous"></script>

Copie cette balise et met à la fin de la balise <head>. maintenant tu peux utiliser jQuery sans souci.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
function loadImage(img) {
   $("#image") //sélectionner l'élément ayant l'id "image"
   .html( "<img src='images/" + img + "'/>" ) //modifier son html en ajoutant l'image
   .parent('#modal101').show() //revenir à son parent et l'afficher
   .css("top",$(this).offset().top); // set le top du parent en fonction du top du <td> sur laquelle on clique
}

**laureneg** · 28/08/2020, 08h51

@Toufik83 : ah oui je vois le soucis maintenant ! Merci pour l'aide, j'ai pu corriger mon erreur ! Encore merci

Tableau avec images en pop-up

JavaScript

Vue hybride

Discussions similaires

Partager

Partager