• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Création de fenetre pop up pour agrandir des photos

New Here ,
Feb 19, 2023 Feb 19, 2023

Copy link to clipboard

Copied

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

 

Views

428

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 19, 2023 Feb 19, 2023

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 19, 2023 Feb 19, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 19, 2023 Feb 19, 2023

Copy link to clipboard

Copied

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>

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 19, 2023 Feb 19, 2023

Copy link to clipboard

Copied

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
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 02, 2023 Mar 02, 2023

Copy link to clipboard

Copied

Thank you for your answer

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 02, 2023 Mar 02, 2023

Copy link to clipboard

Copied

LATEST

Looks like they changed their website.  Try this link:

https://fancyapps.com/

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines