Skip to main content
C
CélineBB
Participant
February 19, 2023
Question

Création de fenetre pop up pour agrandir des photos

  • February 19, 2023
  • 2 replies
  • 774 views

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

 

    This topic has been closed for replies.

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    February 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
      C
      CélineBBAuthor
      Participant
      March 2, 2023

      Thank you for your answer

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

      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      March 2, 2023

      Looks like they changed their website.  Try this link:

      https://fancyapps.com/

       

      Nancy O'Shea— Product User & Community Expert
      O
      osgood_
      Legend
      February 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.

        C
        CélineBBAuthor
        Participant
        February 19, 2023

        Thank you for your answer. Here are the codes used

        HTML

        <div>&nbsp;</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>&nbsp;</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">&times;</span></p>
        </div>
        </div>
        </div>
        <div>&nbsp;</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

        O
        osgood_
        Legend
        February 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>

         

         

          Terms & ConditionsAccessibility statement
          Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices