Help needed please with PDF lightbox embed code as a link

New Here ,
Dec 17, 2020 Dec 17, 2020

Copy link to clipboard

Copied

Hello.

 

I have this code I generated from the PDF Embed API demo.

 

<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script> <script type="text/javascript"> document.addEventListener("adobe_dc_view_sdk.ready", function(){ var adobeDCView = new AdobeDC.View({clientId: "<YOUR_CLIENT_ID>"}); adobeDCView.previewFile({ content:{location: {url: "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf"}}, metaData:{fileName: "Bodea Brochure.pdf"} }, {embedMode: "LIGHT_BOX"}); }); </script>

 

I know that I have to enter my own client ID and PDF URL link.

My question is, how can I wrap all of this inside a clickable link? 

I want to have a link titled 'print solution' that, when clicked, fires off the above code and displays my PDF in a lightbox on the same page.

Currently I use Google PDF viewer and a lightbox to achieve this and my code looks like this:

<a href="https://docs.google.com/viewerng/viewer?embedded=true&amp;url=pdf link URL" target="_blank" class="open-yt-lightbox" rel="noopener noreferrer"><span class="glyphicon glyphicon-list-alt"></span> Print Solution</a> | <a href="product page URL?_pos=3&amp;_sid=f7fc6ef18&amp;_ss=r" target="_blank" rel="noopener noreferrer"><span class="glyphicon glyphicon-shopping-cart"></span> Buy<br><br></a>

How can I adapt the part in bold to use the Adobe code above instead so that, when the link is clicked, on the same page, Adobe opens a light box and displays my PDF?

Many thanks.

Views

1.0K

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
community guidelines
Community Expert ,
Dec 18, 2020 Dec 18, 2020

Copy link to clipboard

Copied

I have a working example of using buttons to trigger lightbox mode at this CodePen.

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
community guidelines
New Here ,
Dec 25, 2020 Dec 25, 2020

Copy link to clipboard

Copied

Thank you so much for replying @Joel_Geraci 

I will take a look at your example.

 

Is there any way to make the three buttons appear horizontally next to each other and not vertically?

Kind regards and Merry Christmas!

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
community guidelines
Community Expert ,
Jan 04, 2021 Jan 04, 2021

Copy link to clipboard

Copied

Just modify the CSS to make the buttons appear however you like.

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
community guidelines
New Here ,
Apr 24, 2021 Apr 24, 2021

Copy link to clipboard

Copied

LATEST

Can you please Help me by sending your previous code in which you have used google embed pdf viewer

I know you have already mentioned it above but i need total HTML and CSS and JAVASCRIPT and mainly of light0box code

 

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
community guidelines
Resources