Highlighted

Connecting Lightbox to a Button

Community Beginner ,
Aug 22, 2020

Copy link to clipboard

Copied

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>

 

 

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.

Views

51

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Connecting Lightbox to a Button

Community Beginner ,
Aug 22, 2020

Copy link to clipboard

Copied

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>

 

 

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.

Views

52

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Employee ,
Aug 30, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Community Beginner ,
Aug 30, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Community Beginner ,
Aug 30, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Resources