28128 sujets

CSS et mise en forme, CSS3

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)
Modérateur
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)
Bonjour Olivier C le but, c'est de le faire en "pur css" sans JS...mais merci quand même de ta réponse et d'avoir pris le temps.
Bonjour parsimonhi, je vais étudier ton idée, juste que je veux me servir de l'image pour la fermer et là tu peux cliquer sur l'image et en dehors de l'image.
Merci d'avoir pris le temps de répondre.
Modifié par ricem (12 Apr 2023 - 19:07)
Modérateur
Bonjour,

ricem a écrit :
... juste que je veux me servir de l'image pour la fermer et là tu peux cliquer sur l'image et en dehors de l'image...

Dans le css, déplace le "pointer-events: auto" du sélecteur .modal:target (qui fait la taille de tout l'écran) vers le sélecteur .grand img (qui ne fait que la taille de l'image).

Amicalement,
Meilleure solution
parsimonhi a écrit :
Bonjour,
Dans le css, déplace le "pointer-events: auto" du sélecteur .modal:target (qui fait la taille de tout l'écran) vers le sélecteur .grand img (qui ne fait que la taille de l'image).
Amicalement,


Bonjour,
Juste pour info, dans le sélecteur "modal", je l'ai mis en position
position: fixed;  
car quand je scrollais, l'image scrollais aussi..
upload/1681468124-67715-scroll.png
Modifié par ricem (14 Apr 2023 - 12:29)