pdf in lightbox

crispy68 · Post by **crispy68** » 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.

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.

BaconFries · Post by **BaconFries** » Fri Mar 15, 2024 4:09 pm

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?

wwonderfull · Post by **wwonderfull** » Fri Mar 15, 2024 5:22 pm

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

crispy68 · Post by **crispy68** » Fri Mar 15, 2024 6:07 pm

@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.

wwonderfull · Post by **wwonderfull** » Fri Mar 15, 2024 6:15 pm

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>

wwonderfull · Post by **wwonderfull** » Fri Mar 15, 2024 7:04 pm

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.

crispy68 · Post by **crispy68** » Fri Mar 15, 2024 7:13 pm

@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!

wwonderfull · Post by **wwonderfull** » Fri Mar 15, 2024 7:28 pm

for magnifictpopup I think the height can be adjusted by setting the class height to 80%

Anyways very welcome : )

zinc · Post by **zinc** » Mon Mar 18, 2024 2:14 pm

Do I detect an extension?

www.wysiwygwebbuilder.com

pdf in lightbox

pdf in lightbox

Re: pdf in lightbox

Re: pdf in lightbox

Re: pdf in lightbox

Re: pdf in lightbox

Re: pdf in lightbox

Re: pdf in lightbox

Re: pdf in lightbox

Re: pdf in lightbox