Ouverture d'une image en grand puis fermeture

Bonjour à tous,

Je suis actuellement en train d'aider un ami sur son site internet (je précise que je ne suis pas développeuse, je maîtrise quelques bases en HTML / CSS et je comprends le JS mais j'essaye surtout de me renseigner avec ce que je trouve sur internet )

Voilà mon problème :

?Nous affichons actuellement une galerie d'image grâce à une modale. Cette galerie fonctionne bien et s'ouvre bien dans ma boîte de dialogue. Néanmoins, les images ne sont finalement que des miniatures, ce qui semble logique pour un affichage pertinent.
J'aimerais pouvoir, au clic sur une des images, l'ouvrir en grand/taille réelle pour que l'utilisateur puisse avoir un beau rendu (nous sommes sur un site de photographe).

J'arrive bien à ouvrir une image en grand et à la bonne taille (elle s'ouvre directement via le lien de l'image). Néanmoins, j'aimerais pouvoir permettre à l'utilisateur de quitter le lien de l'image et de revenir sur la galerie photo via une croix de fermeture par exemple mais je ne vois pas comment m'y prendre.

Voici ce que j'ai actuellement : https://www.loom.com/share/bb3769cc37e2411f8184dccbd8ae8809?sid=14933851-0fa9-4982-a82a-2877752fbdb9

On voit bien que l'image s'ouvre via un autre lien mais que je dois revenir en arrière via le navigateure.

Voici mon code :

HTML

<dialog id="dialog">
<div class="container-gallery">
          <div class="gallery-image">
              <figure class="gallery__item gallery__item--1">
                <a href="./assets/images/gallery-4.jpg" > <img src="https://unsplash.com/photos/uY2kic9wlmc/download?force=true" alt="Gallery image 1" class="gallery__img"></a>
              </figure>
              <figure class="gallery__item gallery__item--2">
                  <img src="https://unsplash.com/photos/yWwob8kwOCk/download?force=true" alt="Gallery image 2" class="gallery__img">
              </figure>
              <figure class="gallery__item gallery__item--3">
                  <img src="https://unsplash.com/photos/uY2kic9wlmc/download?force=true" alt="Gallery image 3" class="gallery__img">
              </figure>
              <figure class="gallery__item gallery__item--4">
                  <img src="https://unsplash.com/photos/yWwob8kwOCk/download?force=true" alt="Gallery image 4" class="gallery__img">
              </figure>
              <figure class="gallery__item gallery__item--5">
                  <img src="https://unsplash.com/photos/Wv65tpVIdDg/download?force=true" alt="Gallery image 5" class="gallery__img">
              </figure>
              <figure class="gallery__item gallery__item--6">
                <img src="https://unsplash.com/photos/Wv65tpVIdDg/download?force=true" alt="Gallery image 5" class="gallery__img">
            </figure>
            <figure class="gallery__item gallery__item--7">
              <img src="https://unsplash.com/photos/Wv65tpVIdDg/download?force=true" alt="Gallery image 5" class="gallery__img">
          </figure>
          <figure class="gallery__item gallery__item--8">
            <img src="https://unsplash.com/photos/Wv65tpVIdDg/download?force=true" alt="Gallery image 5" class="gallery__img">
        </figure>
   
          </div>
       
<button onclick="window.dialog.close();" aria-label="close" class="x">?</button>
      </dialog>

CSS

.container-modal {
  max-width: 800px;
  margin: 5% auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-sizing: border-box;
}
.text-center {
  text-align: center;
  margin-bottom: 1em;
}
.lightbox-gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
.lightbox-gallery div > img {
  max-width: 100%;
  display: block;
}
.lightbox-gallery div {
  margin: 10px;
  flex-basis: 180px;
}
@media only screen and (max-width: 480px) {
  .lightbox-gallery {
    flex-direction: column;
    align-items: center;
  }
.lightbox > div {
    margin-bottom: 10px;
  }
}
.container-gallery {
  width: 60%;
  margin: 2rem auto; 
}
.gallery-image {
  display: grid;
  grid-template-columns: repeat(8, 2fr);
  grid-template-rows: repeat(8, 5vw);
  grid-gap: 1.5rem; 
}
.gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; 
}
.gallery__item--1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
}
.gallery__item--2 {
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 3;
}
.gallery__item--3 {
  grid-column-start: 5;
  grid-column-end: 9;
  grid-row-start: 1;
  grid-row-end: 5;
}
.gallery__item--4 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 3;
  grid-row-end: 5;
}
.gallery__item--5 {
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row-start: 3;
  grid-row-end: 5;
}
.gallery__item--6 {
  grid-column-start: 5;
  grid-column-end: 9;
  grid-row-start: 5;
  grid-row-end: 8;
}
.gallery__item--7 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 3;
  grid-row-end: 8;
}
.gallery__item--8 {
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row-start: 5;
  grid-row-end: 9;
}.

Pourriez-vous m'aider ?
Merci beaucoup
Alice

Salut,

Je comprends pas bien pourquoi ouvrir la galerie dans une modale plutôt que dans une page dédiée. C'est ce que se fait et du coup on peut en profiter pour mettre l'image en grand dans la modale quand on clique dessus. Sinon ca va faire une modale de modale

Bonne aprem

Hello Laurent,

C'est aussi ce que j'ai proposé mais le client c'est le client

Et dans tous les cas, même dans ce cadre là, j'ai un peu du mal à voir comment écrire le code pour ouvrir une modale directement là dedans :

<figure class="gallery__item gallery__item--1">
<a href="./assets/images/gallery-4.jpg" > <img src="https://unsplash.com/photos/uY2kic9wlmc/download?force=true" alt="Gallery image 1" class="gallery__img"></a>
</figure>

Je ne vois pas bien comment l'écrire, je suis vraiment débutante de chez débutante ^^