[Résolu] Gallerie d'images : taille plein écran/CSS et JS

Bonjour à tous,

Je vous sollicite aujourd'hui afin d'obtenir de l'aide sur deux petits problèmes que je n'arrive pas à résoudre sur une galerie d'images gérée en majorité par le CSS. Il y a un peu de JS pour les fonctionnalités d'affichage en plein écran des images et pour la navigation suivant/précédent de la galerie.

Son fonctionnement est simple : on affiche les miniatures de 4 images et au clic sur l'une d'entre elles, on l'affiche en grand format. Des flèches suivant/précédent permettent de visualiser les autres images, on peut fermer le plein écran d'un clic sur la croix.

Afin de ne pas ré-inventer la roue, je me suis basé sur ce que propose le site web W3School, notamment pour le JS, là où j'ai encore des lacunes pour l'instant. Une bonne partie du CSS et du JS n'est donc pas de moi.

Actuellement, ça fonctionne plutôt bien mais mon premier problème se situe au niveau de la taille de l'image en plein écran : sa hauteur ne s'adapte pas à la taille de l'écran. Sur les petits écrans de téléphone ou sur les écrans de 22'' et plus, aucun souci vu que la largeur de mon image s'adapte. Mais pour la hauteur, c'est plus compliqué sur des petits écrans d'ordinateur de 13''. Quand je spécifie à mon conteneur d'image une hauteur de 100%, celui prend évidement 100% de la hauteur de la page, et pas de l'écran. J'ai alors testé avec l'unité vh au lieu de %, mais je n'ai rien obtenu d'interessant (ou alors je m'en sert mal...)
Pouvez-vous me mettre sur la voie ? Je suis sûr qu'il y a une solution simple à mettre en oeuvre du côté du CSS

Mon second problème est plutôt de l'ordre du détail, mais je n'arrive pas à le résoudre non plus. J'aimerais qu'on puisse fermer le plein écran en cliquant en dehors de l'image et pas uniquement sur la croix. Je me suis dit "Facile ! Il suffit simplement d'ajouter du côté HTML un

onclick="closeModal()"

sur mon div de fond !"
Mais cela à pour effet de fermer le plein écran même si je clique sur l'un des enfants (l'image, les contrôles suivant/précédent)
J'ai essayé de jouer avec les z-index en pensant résoudre ce comportement, mais malheureusement ça n'a pas fonctionné.
Il existe sûrement un moyen du côté du CSS (ou du JS pour ce cas là ?) pour préciser que le clic ne doit s'effectuer que sur le background de la galerie ou pour ne pas cibler les éléments enfants... Quelqu'un peut m'aider ?

Ci-dessous, vous trouverez quelques explications ainsi que le code source. J'ai effectué des recherches et des tests avant de poster ici, mais n'ayant toujours pas résolu ces petits soucis, je m'en réfère donc à la communauté.

HTML - Affichage des miniatures :

<div class="text-center">
  <img class="galerie-mini" src="1.jpg" alt="#" onclick="openModal();currentSlide(1)" />
  <img class="galerie-mini" src="2.jpg" alt="#" onclick="openModal();currentSlide(2)" />
  <img class="galerie-mini" src="3.jpg" alt="#" onclick="openModal();currentSlide(3)" />
  <img class="galerie-mini" src="4.jpg" alt="#" onclick="openModal();currentSlide(4)" />
</div>

HTML - Affichage de l'image en plein écran (modal box) :

<div id="modal" class="modal-background">

    <span class="close cursor" onclick="closeModal()">&times;</span>

      <div class="modal-content">
        
        <div class="imgGallery">
          <img src="1-big.jpg">
        </div>

        <div class="imgGallery">
          <img src="2-big.jpg">
        </div>

        <div class="imgGallery">
          <img src="3-big.jpg">
        </div>

        <div class="imgGallery">
          <img src="4-big.jpg">
        </div>

        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
        <a class="next" onclick="plusSlides(1)">&#10095;</a>
      
      </div>

  </div>

CSS de la galerie :

/* J'ai volontairement épuré le code en ne gardant que le strict nécessaire. */

/*** Galerie - miniatures ***/

.galerie-mini {
  border-radius: 5px;
  padding: 3px;
  background-color: #eaeaea;
  box-shadow:  2px 2px 5px #222;
  transition: 0.3s;
}

.galerie-mini:hover {
  opacity: 0.8;
  cursor: pointer;
  background-color: #8f1d25;
  transition: 0.3s;
}


/*** Galerie - Plein écran ***/

.modal-background {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 50px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}

.modal-content {
  position: relative;
  margin: 0 auto;
  max-width: 1200px;
  height: auto;
}

.modal-content img {
  width: 100%;
}

Javascript - fonctionnalités d'ouverture, de fermeture du plein écran et navigation entre les images :

function openModal() {
  document.getElementById('modal').style.display = "block";
}

function closeModal() {
  document.getElementById('modal').style.display = "none";
}

var galleryIndex = 1;
showPhotos(galleryIndex);

function plusSlides(n) {
  showPhotos(galleryIndex += n);
}

function currentSlide(n) {
  showPhotos(galleryIndex = n);
}

function showPhotos(n) {
  var i;
  var slides = document.getElementsByClassName("imgGallery");
  var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  if (n > slides.length) {galleryIndex = 1}
  if (n < 1) {galleryIndex = 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[galleryIndex-1].style.display = "block";
  dots[galleryIndex-1].className += " active";
  captionText.innerHTML = dots[galleryIndex-1].alt;
}

Merci d'avance à tous ceux qui voudront bien m'aider. Bon dimanche !
Modifié par Loraga (16 Dec 2018 - 11:11)

Bonjour,

Tu souhaites que l'image grand format fasse 100% de la largeur de l'écran, ou bien 100% de la hauteur, ou bien 100% de la largeur ou de la hauteur de l'écran afin que l'image soit entièrement affichée ? (ce n'est pas possible que ça fasse à la fois 100% de la largeur et 100% de la hauteur sans déformer l'image)

Amicalement,
Modifié par parsimonhi (16 Dec 2018 - 14:03)

Bonjour,

Loraga a écrit :
Mais pour la hauteur, c'est plus compliqué sur des petits écrans d'ordinateur de 13''. Quand je spécifie à mon conteneur d'image une hauteur de 100%, celui prend évidement 100% de la hauteur de la page, et pas de l'écran.

Il me semble que ça ne peut pas être autrement. Sur les mobiles, ça peut prendre 100% de l'écran parce que les navigateurs affichent leurs pages en prenant tout l'écran (ou presque, ça dépend un peu des mobiles). Pour les machines dont le navigateur affiche ses fenêtres sur une partie de l'écran seulement, c'est l'utilisateur qui décide de passer ou pas en plein écran, et auquel cas, le comportement sera comme sur un mobile.

Ou alors, je n'ai rien compris au problème !

Amicalement,

comme ceci la fenêtre est toujours remplie sans déformation

.image {
top:0;
left:0;
width:100%;
height:100%;
position:fixed;
z-index:1;
object-fit:cover;
}

comme ici : https://royal-playa-club.alwaysdata.net/lac-xhatiff.html

Bonjour à vous et merci pour votre aide

Parsimonhi, je souhaite que l'image soit entièrement affichée tout en conservant ses proportions.

Drphilgood, merci pour ton astuce du object-fit, je ne connaissais pas ! J'ai préféré utiliser object-fit: contain; plutôt que cover, en tout cas, ça fonctionne bien.

Merci à tous les deux

Il ne me reste plus qu'à régler le problème de la fermeture du plein écran. J'aimerais qu'un clic sur le .modal-background fasse appel à la fonction closeModal. Le problème, c'est que si j'ajoute un onclick="closeModal()" à mon <div> modal-background, le plein écran se referme même si je clique sur un de ses éléments enfants (l'image, les boutons suiv/préc...)

Quelqu'un à une idée pour me mettre sur la bonne voie ?

Merci encore et bonne journée

Bonjour,

Il faudrait dans les fonctions qui se déclenchent lors d'un click sur un bouton, une image, etc. ajouter un ev.stopPropagation() (où ev est un objet de type event dont tu dois disposer à l'intérieur des fonctions en question).

Tu peux éventuellement lire aussi https://www.alsacreations.com/article/lire/578-La-gestion-des-evenements-en-JavaScript.html

Amicalement,

Hello,

Les évènements comme le click se propagent sur les parents. On utilise en effet stopPropagation pour annuler cet effet, en utilisant des attributs (beurk) on peut le faire comme ceci:

<div class="container" onclick="closeModal();">
…
<div class="modal" onclick="event.stopPropagation();">
  … 
  <button onclick="closeModal();">FERMER</button>
</div>
…
</div>

Bonsoir Parsimonhi, bonsoir Kustolovic,

Merci à vous deux pour votre aide ! Ça fonctionne parfaitement bien

Je ne connaissais pas stopPropagation(), je vous remercie pour vos explications.
Résolution 2019 : apprendre Javascript ! Plus j'avance dans mon apprentissage du web, plus je me rend compte que j'ai besoin de ce langage.

Bonne soirée et à bientôt !