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
CSS
Pourriez-vous m'aider ?
Merci beaucoup
Alice
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
