lightbox2

How to open a scrollable PDF or iframe with lightbox2?

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>
Solution

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

    enter image description here

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

    enter image description here

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