Mettre un bouton pour fermer zoom photo

Résolu

mont_dani Messages postés 232 Date d'inscription Statut Membre Dernière intervention -
Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention - 16 nov. 2021 à 19:33

Bonjour

Afin de fermer la fenêtre de la photo zoomée, je voudrai mettre une croix pour fermer et revenir à l'image normale.
Voici mon code:

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
   
<style >

.arrow {
cursor: pointer;
color: white;
border: 1px solid #AEAEAE;
border-radius: 30px;
background: #605F61;
font-size: 131px;
font-weight: bold;
display: inline-block;
line-height: 0px;
padding: 11px 3px;
}
.arrow:before{
 content: "X";
}	

</style>
</head>
<body>
 
	<a href="../../image/galeria/42111a (5).jpg">
	<div><img src="../../image/galeria/42111a (5).jpg"><a href="#" class="arrow"></a></div>
	</a>
</body>
</html>

Mais la croix ne s'affiche pas.

Quelqu'un aurait-il une idée?

Merci pour votre aide

Afficher la suite

A voir également:

Html zoom image onclick
Editeur html - Télécharger - HTML
Image iso - Guide
Zoom appel video - Guide
Reduire taille image - Guide
Acronis true image - Télécharger - Sauvegarde

5 réponses

Réponse 1 / 5

Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention 527

Bonjour,

Tu as une erreur de syntaxe sur l'utilisation de ::before :

.arrow::before {
  content: "X";
}

https://developer.mozilla.org/fr/docs/Web/CSS/::before

Au passage, il n'est pas correct d'avoir une balise <a> à l'intérieur d'une autre balise <a>.
Tu devrais remplacer la balise <a> utilisé pour afficher la croix par une balise non interactive (une balise <span> par exemple).
L'utilisation de la balise <div> semble également inutile ici.

Bonne journée,

Réponse 2 / 5

mont_dani Messages postés 232 Date d'inscription Statut Membre Dernière intervention

Merci Pilet pour ton message.

Correction faite voici mon code:

<a href="../../image/galeria/42111a (5).jpg">
	<img src="../../image/galeria/42111a (5).jpg"><span class="arrow"></span>
	</a>

Mais la croix ne s'affiche pas pour fermer la fenetre.

Une idée?

Réponse 3 / 5

Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention 527

La croix s'affiche bien mais uniquement sur la page html qui affiche l'image : https://jsfiddle.net/y8df65n4/

Si on cliques sur le lien html, puisque celui-ci pointe sur l'image (href="../image.jpg"), le navigateur va alors afficher cette image.
Dans ce cas, le navigateur n'affiche pas une page html mais directement le document image, il n'est donc pas possible d'ajouter une croix en html/css sur cette image pour revenir à la page précédente du navigateur.

Une solution en html serait de modifier le lien afin de le faire pointer vers une autre page html (href="/galerie.html"). Dans cette 2e page html, on peut afficher l'image dans un autre format et créer un lien sous forme de croix pour revenir à la première page.

Le plus souvent pour faire un zoom sur une image, on va préférer rester sur la même page.
Une solution possible est alors d'utiliser javascript pour afficher l'image dans une fenêtre modale. Quelques exemples :
https://www.w3schools.com/howto/howto_css_modal_images.asp
https://codepen.io/r3dg3cko/pen/ZLryQG
https://css-tricks.com/creating-a-modal-image-gallery-with-bootstrap-components/

Réponse 4 / 5

mont_dani Messages postés 232 Date d'inscription Statut Membre Dernière intervention

Merci Pitet pour ton aide.

Cela fonctionne très bien en utilisant le srcipt de https://codepen.io/r3dg3cko/pen/ZLryQG.

Cependant, j'ai un problème. Quand je suis en local tout va bien, mais quand je passe sur serveur, le téléchargement des photo est long.

Si tu connais JS, pourrais-tu me dire comment insérer dans le script une variable php ($imagegrande) qui serait le nom dela photo en grande taille.

Voici le script

			function onClick(element) {
			  document.getElementById("img01").src = element.src;
			  document.getElementById("modal01").style.display = "block";
			}

Merci pour ton aide.

Au cas cela pourrait t'aider voici tout le script.

		
		

		
		if (!empty($_POST['pais'])){
						
			if(isset($_POST))
			{
			   $categoria = $_POST["pais"];
				
				
				$imagegrande = glob('../../image/galeria/'.$categoria.'*'); // toute les photo qui commence par
				$files = glob('../../image/galeria/mini/'.$categoria.'*'); // toute les photo qui commence par
				$lines = count($files); // nombre de photo
				$nb_colonne = 3; // nombre de colonnes a l'affichage
				$nb_imgCel = ceil($lines/$nb_colonne); // Nombre d'images par cellule

				//variable utilisées pour recréer un array organisé comme tu le souhaites
				$arrF = [];
				$row = 0;
				$col = 0;
				$K = 0;

				//on boucle sur chaque fichier :
				foreach($files as $F){
				 if($col>0 && $col % ($nb_colonne-1) == 0 && $K>=$nb_imgCel){
				   $col=0;
				   $K=0;
				   $row++;   
				 }
				  if($K>0 && $K % $nb_imgCel == 0){
				   $col++;
				   $K=0;
				 }
				 
				 $arrF[$row][$col][] = $F;
				 $K++;
				}

				//pour voir à quoi ressemble l'array
				
				echo "<table width='60%'  align='center'>";
				foreach($arrF as $Row ){
				  echo "<tr>";
				   foreach($Row as $Col){
					 echo "<td width='30%' style='vertical-align: top;>";
					 foreach($Col as $img){
						 echo "<div class='container1'><img class='catimage' src='$img' style=' cursor:pointer' onclick='onClick(this)' class='modal-hover-opacity'/><br></div>";
						 
		?>
			<div id="modal01" class="modal" onclick="this.style.display='none'">
				<span class="close">X</span>
					<div class="modal-content">
						<img id="img01" style="max-width:70%">
					</div>
			</div>
			<script>
			function onClick(element) {
			  document.getElementById("img01").src = element.src;
			  document.getElementById("modal01").style.display = "block";
			}
			</script>
		<?php


					  }
					   echo "</td>";
				   }
				  echo "</tr>";
				}
					
			}  
		}

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 5

Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention 527

Si tu reprends l'exemple proposé sur codepen, tu n'as normalement pas besoin de modifier le javascript, il faut simplement appeler la fonction javascript lorsqu'on clique sur l'image en ajoutant un attribut html onclick sur les balises img, ce que tu as bien fait.
Pour info, l'image est automatiquement passée à la fonction javascript grâce mot-clé this passé en paramètre.

Par contre, le code html de la fenêtre modale et la déclaration de la fonction javascript ne doit apparaitre qu'une seule fois dans la page html, il faut donc les sortir de la boucle foreach :

<?php

if (!empty($_POST['pais'])) {
    if (isset($_POST)) {
        $categoria = $_POST["pais"];

        $imagegrande = glob('../../image/galeria/' . $categoria . '*'); // toute les photo qui commence par
        $files = glob('../../image/galeria/mini/' . $categoria . '*'); // toute les photo qui commence par
        $lines = count($files); // nombre de photo
        $nb_colonne = 3; // nombre de colonnes a l'affichage
        $nb_imgCel = ceil($lines / $nb_colonne); // Nombre d'images par cellule

        //variable utilisées pour recréer un array organisé comme tu le souhaites
        $arrF = [];
        $row = 0;
        $col = 0;
        $K = 0;

        //on boucle sur chaque fichier :
        foreach ($files as $F) {
            if ($col > 0 && $col % ($nb_colonne - 1) == 0 && $K >= $nb_imgCel) {
                $col = 0;
                $K = 0;
                $row++;
            }
            if ($K > 0 && $K % $nb_imgCel == 0) {
                $col++;
                $K = 0;
            }

            $arrF[$row][$col][] = $F;
            $K++;
        }


        echo "<table width='60%'  align='center'>";
        foreach ($arrF as $Row) {
            echo "<tr>";
            foreach ($Row as $Col) {
                echo "<td width='30%' style='vertical-align: top;>";
                foreach ($Col as $img) {
                    echo "<div class='container1'><img class='catimage' src='$img' style=' cursor:pointer' onclick='showImageInModal(this)' class='modal-hover-opacity'/><br></div>";
                }
                echo "</td>";
            }
            echo "</tr>";
        }
        ?>
        <div id="modal01" class="modal" onclick="this.style.display='none'">
            <span class="close">X</span>
            <div class="modal-content">
                <img id="img01" style="max-width:70%">
            </div>
        </div>
        <script>
            function showImageInModal(element) {
                document.getElementById("img01").src = element.src;
                document.getElementById("modal01").style.display = "block";
            }
        </script>
        <?php
    }
}

Je me suis permis de renommer la fonction javascript en "showImageInModal". Tu peux lui donner un autre nom si tu préfères, mais le nom "onClick" n'était pas très pertinent (le nom devrait décrire ce que fait la fonction).

Pense à regarder la console du navigateur voir pour les éventuelles erreurs javascript.

Enfin, concernant le délai de chargement des images sur serveur, il faudrait surement optimiser tes images pour réduire leurs poids (mise à l'échelle, compression, choix du format, etc...).
C'est un sujet un peu vaste qui pourrait faire l'objet d'une autre discussion, et tu pourras facilement trouver pleins d'infos sur le net à ce sujet, à minima redimensionner les images selon leurs tailles affichées (par exemple, pas besoin d'avoir une image de 2000px de large si elle n'est affichée au maximum que sur 500px dans le site web).

Discussions similaires

PIX

la balise <br> ou <br />

Votre réponse

Discussions similaires