Création de fenetre pop up pour agrandir des photos

Report · Feb 19, 2023

Bonjour

J'ai créé une fenetre pop up pour faire apparaitre des photos en plus grand avec le HTML, CSS et JavaScript

Lorsqu'il y a une photo à agrandir sur la page, tout marche très bien.

Par contre, lorsque je veux agrandir une deuxième photo, le système refuse et mentionne "The Id Value [ ex : btnPop ] must be unique et cela ne fonctionne plus. Pouvez vous me guider pour que je puisse agrandir plusieurs photos sur la même page ? Merci d'avance

Report · Feb 19, 2023

What javascript are you using? Sounds like it's only capable of popping up the one element with a specific id onclick rather than a script that can handle multiple images whose names are passed to the pop up container.

Can you post the javascript here so someone can see? It might be a case of adapting the script or using another script.

Report · Feb 19, 2023

Thank you for your answer. Here are the codes used

HTML

<div> </div>
<div align="center"><img src="images/PhotosSite/LacHillier/LacHillier_61.jpg" width="348" height="310" alt="A l'intérieur des terres, en route vers le Lac Hillier"/></div>
<div align="center">Source familiale - Janvier 2019 </div>
<div> </div>
<div text align="center"><button id="btnPopup" class="btnPopup">Afficher la photo en grand</button></div>
<div id="overlay" class="overlay">
<div id="popup" class="popup">
<p><img src="images/PhotosSite/LacHillier/LacHillier_62.jpg" width="1244" height="861" alt=""/>
<span id="btnClose" class="btnClose">×</span></p>
</div>
</div>
</div>
<div> </div>

CSS

.btnPopup {
background-color: #FF9933;
padding: 1em 2em;
font-size: 12pt;
color: #000000;
}
.btnPopup:hover{
background-color: #FF9933;
}

.overlay {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.popup {
background-color: #FF9933;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 100%; /* Could be more or less, depending on screen size */

}

.btnClose {
color: #000000;
float: right;
font-size: 36px;
font-weight: bold;
padding-top: 1em ;
cursor: pointer;
}

JAVA SCRIPT

var btnPopup = document.getElementById('btnPopup');
var overlay = document.getElementById('overlay');
var btnClose = document.getElementById('btnClose');

btnPopup.addEventListener('click', openbntPopup);
btnClose.addEventListener('click', closePopup);

function openbntPopup (){
overlay.style.display='block'
}
function closePopup (){
overlay.style.display='none'
}

I hope you can fix this one

Merci d'avance

Report · Feb 19, 2023

Needs a lot of re-working to accomodate multiple images (see example code below).

Add your image names and captions to the onclick popUpWindow event as the example shows. I've just duplicated the image/caption in the example.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pop Up Image Gallery</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: helvetica, sans-serif;
}
.pageWrapper h2 {
font-weight: 400;
text-align: center;
margin: 0;
padding: 30px 0;
}
.windowOverlay {
display: none;
opacity: 0;
align-items: center;
position: fixed;
height: 100vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.6);
transition: opacity 700ms ease-in-out;
}
.imgContainer {
width: 70%;
margin: 0 auto;
padding: 20px 20px 0 20px;
background-color: #fff;
border-radius: 8px;
}

@media screen and (max-width: 768px) {
.imgContainer {
width: 80%;
}
}

@media screen and (max-width: 560px) {
.imgContainer {
width: 90%;
}
}
.imgContainer img {
width: 100%;
display: block;
border-radius: 5px;
}
.imgCaption {
padding: 20px 0;
text-align: center;
}
.closeImgContainer {
position: absolute;
top: 4em;
right: 2em;
height: 40px;
width: 40px;
cursor: pointer;
}
.bar {
height: 2px;
background-color: #fff;
display: block;
width: 100%;
}
.bar:first-child {
transform: rotate(45deg) translate(2px);

}
.bar:last-child {
transform: rotate(-45deg) translate(1px);;
}
.thumbnailWrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 20px;
width: 80%;
margin: 0 auto;
}

@media screen and (max-width: 768px) {
.thumbnailWrapper {
grid-template-columns: repeat(3, 1fr);
}
}


@media screen and (max-width: 560px) {
.thumbnailWrapper {
grid-template-columns: repeat(2, 1fr);
width: 90%;
}
}


.thumbnail img {
max-width: 100%;
height: auto;
display: block;
border-radius: 5px;
}
.displayFlex {
display: flex;
}
.fullOpacity {
opacity: 1;
}

</style>
</head>
<body>
<div class="windowOverlay">
<div class="closeImgContainer">
<div class="bar"></div>
<div class="bar"></div>
</div>
<!-- end closeImgContainer -->
<div class="imgContainer"></div>
</div>
<!-- end windowOverlay -->

<div class="pageWrapper">
<h2>Image Gallery</h2>
<div class="thumbnailWrapper">

<div class="thumbnail" onclick="popUpWindow('LacHillier_61.jpg', 'A l\'intérieur des terres, en route vers le Lac Hillier')">
<img src="images/PhotosSite/LacHillier/LacHillier_61.jpg" alt="">
</div>
<!-- end thumbnail -->

<div class="thumbnail" onclick="popUpWindow('LacHillier_61.jpg', 'A l\'intérieur des terres, en route vers le Lac Hillier')">
<img src="images/PhotosSite/LacHillier/LacHillier_61.jpg" alt="">
</div>
<!-- end thumbnail -->

<div class="thumbnail" onclick="popUpWindow('LacHillier_61.jpg', 'A l\'intérieur des terres, en route vers le Lac Hillier')">
<img src="images/PhotosSite/LacHillier/LacHillier_61.jpg" alt="">
</div>
<!-- end thumbnail -->

<div class="thumbnail" onclick="popUpWindow('LacHillier_61.jpg', 'A l\'intérieur des terres, en route vers le Lac Hillier')">
<img src="images/PhotosSite/LacHillier/LacHillier_61.jpg" alt="">
</div>
<!-- end thumbnail -->

</div>
<!-- end thumbnailWrapper -->
</div>
<!-- end pageWrapper -->

<script>
const windowOverlay = document.querySelector('.windowOverlay');
const imgContainer = document.querySelector('.imgContainer');
const closeImgContainer = document.querySelector('.closeImgContainer');

// Open popUpWindow
function popUpWindow(imageName , imageCaption) {
imgContainer.innerHTML = `
<img src="images/PhotosSite/LacHillier/${imageName}" alt="">
<div class="imgCaption">${imageCaption}</div>
`
windowOverlay.classList.add('displayFlex');
setTimeout(function() {
windowOverlay.classList.add('fullOpacity');
}, 200)

}
// Close windowOverlay
closeImgContainer.onclick = function() {
windowOverlay.classList.remove('fullOpacity');
setTimeout(function() {
windowOverlay.classList.remove('displayFlex');
}, 700)
}


</script>

</body>
</html>

Report · Feb 19, 2023

If you want quick & professional results with a modern modal viewer, get Fancybox 4. It contains many options, too. See working examples below.

https://fancyapps.com/docs/ui/fancybox/

Hope that helps.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Mar 02, 2023

Thank you for your answer

I am very sorry but the answer to the mentionned link is "404 page not found"

Report · Mar 02, 2023

Looks like they changed their website. Try this link:

https://fancyapps.com/

Nancy O'Shea— Product User, Community Expert & Moderator

Adobe Community

Création de fenetre pop up pour agrandir des photos