Page 1 of 1
pdf in lightbox
Posted: Fri Mar 15, 2024 2:12 pm
by crispy68
I'm curious if anyone has successfully been able to show a .pdf in a lightbox that is also responsive for mobiles and the .pdf is responsive (no scrollbars). If so, which lightbox did you use? How did you set it up? Ultimately, I would like it centered in the page evenly and set the width and height in relation to the screensize.
I did try using the pdf object inside a dialog and it seems to work on desktop but is failing on mobiles and not showing the .pdf. The other issue is I'm not able to set the width of the dialog to my liking. I would like to set it to be 80% width of the screen size. It seems it's either a fixed size set in the work space or 100% width. I guess I could add CSS to override this unless I'm missing something. Still have the issues where the .pdf is not loading on my phone but works on a desktop.
Re: pdf in lightbox
Posted: Fri Mar 15, 2024 4:09 pm
by BaconFries
Similar question asked by alan_sh about the pdf object and responsive pdf see Pablos reply and my reply might be of help.
Make a PDF display responsive?
Re: pdf in lightbox
Posted: Fri Mar 15, 2024 5:22 pm
by wwonderfull
crispy68 wrote: Fri Mar 15, 2024 2:12 pm
I'm curious if anyone has successfully been able to show a .pdf in a lightbox that is also responsive for mobiles and the .pdf is responsive (no scrollbars). If so, which lightbox did you use? How did you set it up? Ultimately, I would like it centered in the page evenly and set the width and height in relation to the screensize.
Something like this?
https://gifyu.com/image/SUUJL
Re: pdf in lightbox
Posted: Fri Mar 15, 2024 6:07 pm
by crispy68
@wonderfull,
That looks like what I'm wanting. A button to open a lightbox or dialog and show the .pdf in it and the .pdf will be responsive/scale if the window gets smaller.
Re: pdf in lightbox
Posted: Fri Mar 15, 2024 6:15 pm
by wwonderfull
It is actually custom made. I think even magnificpopup can do the same too. But as it is a simple custom lightbox does exactly what it is meant to.
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.lightbox-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 9999;
text-align: center;
}
.pdf-container {
display: inline-block;
margin-top: 10%;
width: 80%;
height: 80%;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.pdf-container iframe {
width: 100%;
height: 100%;
border: none;
}
.close-button {
position: absolute;
top: 10px;
right: 10px;
background: none;
border: none;
color: #fff;
font-size: 24px;
cursor: pointer;
}
</style>
</head>
<body>
<button id="open-pdf">Open PDF</button>
<div class="lightbox-overlay" id="lightbox">
<button class="close-button" onclick="closeLightbox()">×</button>
<div class="pdf-container">
<iframe id="pdf-viewer" src="https://europanels.org/wp-content/uploads/2023/06/EU-Deforestation-Regulation-EUDR.pdf" frameborder="0"></iframe>
</div>
</div>
<script>
function openLightbox() {
document.getElementById('lightbox').style.display = 'block';
}
function closeLightbox() {
document.getElementById('lightbox').style.display = 'none';
}
document.getElementById('open-pdf').addEventListener('click', function() {
openLightbox();
});
document.getElementById('lightbox').addEventListener('click', function(event) {
if (event.target === document.getElementById('lightbox')) {
closeLightbox();
}
});
</script>
</body>
</html>
Re: pdf in lightbox
Posted: Fri Mar 15, 2024 7:04 pm
by wwonderfull
The same thing can be done from WYSIWYG Web Builder for example
Take a button and in the button properties go to links and use external link and paste the link then choose target to Open in lightbox. So I think by default it will use magnificpopup.
I would say about 98% same result other than some heigh and width adjustments.
Re: pdf in lightbox
Posted: Fri Mar 15, 2024 7:13 pm
by crispy68
@wonderfull,
Magnificpopup will work but the pdf does not scale within the lightbox or at least I've not been able to get it to work. I know I can adjust code after publish if necessary but I am trying to do it all within WB. I don't think there is way to adjust the iframe code being used in the lightbox,
However, your code I think will work very nicely for what I need. I am going to play around with it. Thanks a lot!
Re: pdf in lightbox
Posted: Fri Mar 15, 2024 7:28 pm
by wwonderfull
for magnifictpopup I think the height can be adjusted by setting the class height to 80%
Anyways very welcome : )
Re: pdf in lightbox
Posted: Mon Mar 18, 2024 2:14 pm
by zinc
Do I detect an extension?