Help needed please with PDF lightbox embed code as a link
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&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&_sid=f7fc6ef18&_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.
Copy link to clipboard
Copied
I have a working example of using buttons to trigger lightbox mode at this CodePen.
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!
Copy link to clipboard
Copied
Just modify the CSS to make the buttons appear however you like.
Copy link to clipboard
Copied
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

