[Résolu] Est-ce la bonne pratique

Bonjour,

J'ai créé un modal pour agrandir une image au "clic" puis la réduire au second clic (elle reprend son aspect normal).

Tout fonctionne, mais j'aimerais savoir si c'est la bonne pratique, si c'est comme ça que l'on doit faire, et font les développeurs sur leur site.

Le code est sur codepen, je vous le mets en lien. https://codepen.io/ricem/pen/abRvQKp

Merci de vos avis.
Modifié par ricem (14 Apr 2023 - 19:25)

Bonjour,

1) J'aurais simplifié le html (et adapté le css en conséquence)

<a href="#demo" class="reduit"><img src="https://cdn.pixabay.com/photo/2016/12/08/18/50/whatsapp-1892841_960_720.png" alt="lool"></a>

<a id="demo" href="#" class="modal grand"><img src="https://cdn.pixabay.com/photo/2016/12/08/18/50/whatsapp-1892841_960_720.png" alt="lool"></a>

2) Je n'aurais pas mis de "bottom: 0" pour la fenêtre modale, de manière à ce que l'internaute puisse quand même voir la totalité de l'image quand il l'agrandit dans le cas où elle dépasse de l'écran. Et j'aurais rajouté par précaution des "pointer-events: none" et "pointer-events: auto" sur la fenêtre modale.

body{
  display: flex;
  justify-content: center;
  align-items: center;
}
.reduit {
  cursor: zoom-in;
}
.grand {
  cursor: zoom-out;
}
img {
  display: block;
  padding: 15px;
  background-color: white;
  border-radius: 5px;
}
.reduit img {
  width: 200px;
}
.grand img {
  width: 600px;
}
.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;  
  background: rgba(77, 77, 77, 0.9);
  padding: 1.5em 2em;
  top: 0;
  right: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
  transition: all .4s;
  pointer-events: none;
}
.modal:target {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

Amicalement,
Modifié par parsimonhi (12 Apr 2023 - 15:09)

Alors, moi je me suis fais une fonctionnalité JavaScript (mise au point il y a longtemps). Celle-ci à l'avantage de fonctionner avec n'importe quelle image du site comportant le slug "-focus" dans l'une de ses classes CSS.

Une démo de ce que ça donne :
- sur un article
- sur une galerie d'images

Voilà le html de l'image par exemple :

<figure class="figure-focus">
  <picture>
    <source srcset="/medias/images/uploads/clay-banks-w600.webp, /medias/images/uploads/clay-banks-w1000.webp 2x">
    <img src="/medias/images/uploads/clay-banks-original.webp" alt="Yaquina Head, Newport, États-Unis" width="2002" height="3000">
  </picture>
</figure>

Et c'est tout pour le html.

L'image originale est incluse dans la balise image qui, en html5, n'est pas appelée par défaut au profit de l'un des attributs srcset. Si clique sur l'élément figure (comportant donc la classe "figure-focus), alors le script s'actionne.

Script js : Github.

Note importante : tout est accessible au clavier.
Modifié par Olivier C (12 Apr 2023 - 17:33)