Connecting Lightbox to a Button

[danielc36355721]

The documentation only gives the javascript for the lightbox, but doesn't give clear examples of connecting it to a button. Here is the code that I have used, but it is not working. I based it on the codepen from Joel Geraci: https://codepen.io/practicalPDF/pen/MWyKKLZ 

I have just one button in my example..

You can check it at the following link and click the button. Unfortunately, the lightbox does not open: https://mdpl.org/2020/08/21/ocean-drive-master-plans/

<button id="showPDF01">See the plan</button>

<script type="text/javascript">
const clientId = "9dcefe93a0974e39bde91432083cffec";
const viewerOptions = {
    embedMode: "LIGHT_BOX",
    defaultViewMode: "FIT_PAGE",
    showDownloadPDF: false,
    showPrintPDF: false
};

function fetchPDF(urlToPDF) {
    return new Promise((resolve) => {
        fetch(urlToPDF)
            .then((resolve) => resolve.blob())
            .then((blob) => {
                resolve(blob.arrayBuffer());
            })
    })
}

function showPDF(urlToPDF) {
    var adobeDCView = new AdobeDC.View({
            clientId: clientId
        });
        var previewFilePromise = adobeDCView.previewFile(
            {
                content: { promise: fetchPDF(urlToPDF) },
                metaData: { fileName: urlToPDF.split("/").slice(-1)[0] }
            },
            viewerOptions
        );
}

document.addEventListener("adobe_dc_view_sdk.ready", function () {
    document.getElementById("showPDF01").addEventListener("click", function () {
        showPDF("https://documentcloud.adobe.com/view-sdk-demo/PDFs/Summary.pdf")
    });
    document.getElementById("showPDF02").addEventListener("click", function () {
        showPDF("https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf")
    });
    document.getElementById("showPDF03").addEventListener("click", function () {
        showPDF("https://documentcloud.adobe.com/view-sdk-demo/PDFs/Overview.pdf")
    });
});

// Add arrayBuffer if necessary i.e. Safari
(function () {
    if (Blob.arrayBuffer != "function") {
        Blob.prototype.arrayBuffer = myArrayBuffer;
    }

    function myArrayBuffer() {
        return new Promise((resolve) => {
            let fileReader = new FileReader();
            fileReader.onload = () => {
                resolve(fileReader.result);
            };
            fileReader.readAsArrayBuffer(this);
        });
    }
})();
</script>

[Sumona Ghosh · Accepted solution]

Hi, thank you for using PDF Embed API.

I noticed that the code snippet doesn't include the Embed API JavaScript.

Please try to run the code after including this line.

<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>

 Let us know if you still face any issue while using Lightbox embed mode.

[danielc36355721]

Thanks for your reply. I updated per your recommendation, and now it is
working, great! However, it's only working when I am signed in as an
administrator to my wordpress site, and view the page.

On the public site, at the link here, nothing happens when the buttons are
clicked. https://mdpl.org/2020/08/21/ocean-drive-master-plans/

Thank you.

[danielc36355721]

Hi, I was able to fix the problem of not working on the public site, by removing the page from caching. Thanks again for your help.