How to open a scrollable PDF or iframe with lightbox2?

Question

I need to open a PDF file in a Lightbox and I was trying with Lightbox2 but it doesn't seem to work

I did find an old answer that stated to use iframe inside data-lightbox but only the first page it is displayed because Lightbox opens my PDF file inside a tag

$(document).ready(function() {
        
  lightbox.option({
    'resizeDuration': 200,
    'wrapAround': true
  });
        
});

<p id="my-gallery"><a data-lightbox="iframe" href="./mypdf.pdf">PDF view</a></p>

Check this https://stackoverflow.com/questions/23419692/view-pdf-on-a-lightbox — WBLord, Apr 11 '22 at 10:26
fancybox is a really outdated script and the new one isn't free — al404IT, Apr 11 '22 at 10:35

score 1 · Accepted Answer · answered Apr 23 '22 at 02:04

I think you will find that unless you fork/rewrite lightbox2 it is intentionally limited to images, which it does so well there are many clones including paid for ones that do very little extra (i.e. also limited to static images)

However the Fancybox you mention has various versions and version 3 looks well polished with many options.

But by far the simplest is Iframe-Box the options are less but that can be a bonus for simplicity.

<!DOCTYPE html><html lang="en-us">
<head>
  <meta charset="utf-8">
  <title>IFrame-box Example</title>
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.js"></script>
  <link rel="stylesheet" href="./css/framer.css">
</head>

<body><p style="color :red; ">Introduction, click to 

<a href="http://africau.edu/images/default/sample.pdf" data-framer="iframe-1" data-title="A descriptive caption or instruction<br>
 Can include inline break for second caption line<br> Can include inline break for third caption line<br>Etc.">open a PDF</a>

 Any other page Text </p>
  
<script src="./js/framer.js"></script></body></html>

How to open a scrollable PDF or iframe with lightbox2?

1 Answers1