Embedding IDRViewer as a lightbox

Creating a lightbox popup for your exported PDF is really simple, we’ve prepared some resources that you can slot into your site that’ll make it even simpler. This tutorial will provide some CSS and JavaScript that will allow you to call a single function that will create a lightbox with the converted PDF for you, that you will be able to dismiss by clicking on the darkened background.

CSS

First we need to define some CSS so the lightbox looks correct.

The following CSS needs to be added to the page, either inside a new stylesheet, the site’s existing one, or between some <style> tags

.idrLightbox {
    position: fixed;
    background-color: rgba(0,0,0, 0.7);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.idrLightbox iframe {
    display: block;
    width: 800px;
    height: 90%;
    margin: 30px auto auto;
}

This will create the darkened box over the page, and position the IDRViewer.

JavaScript

Next we need to add some JavaScript to handle creating and removing the lightbox.

The following needs to be added to the site, either within <script> tags or an external JavaScript file.

function createLightbox(path) {
    let lightbox = document.createElement("div");
    lightbox.classList.add("idrLightbox");

    // Add listener to the background so it is dismissed when clicked
    lightbox.addEventListener("click", () => {
        // Enable Scrolling
        document.querySelector("body").style.overflow = "unset";
        lightbox.remove()
    });

    let viewer = document.createElement("iframe");
    viewer.src = path;

    lightbox.appendChild(viewer);

    // Add the lightbox as the last element in the body
    document.querySelector("body").appendChild(lightbox);

    // prevent scrolling
    document.querySelector("body").style.overflow = "hidden";
}

Now whenever we call this function using createLightbox("path/to/converted/pdf") (replacing "path/to/converted/pdf" with a path to a converted PDF), it will create the lightbox and embed the IDRViewer into it. This code also sets the lightbox up such that clicking on the darkened background will dismiss it.

Example

This example demonstrates setting up an image that will open a lightbox when it is clicked.

We will add the image to the site like this:

<img src="path/to/image" onclick="createLightbox('path/to/converted/pdf')"/>

and that’s all you need to do. Now when you click the image, the lightbox will popup with the converted PDF.

Customisation

The style of the lightbox can easily be customised using the CSS:

• How dark the lightbox makes the background can be set with the 4th number of the .idrLightbox background-color property, where 0 is not darkened and 1 is completely black
• The width and height of the IDRViewer can be set with the width property of the .idrLightbox iframe. In this example it is set to always be 800 pixels wide and 90% the height of the window