Lighbox for image

Support
#1

Hi.

I have a pdf file on this page I’d like to open in a lightbox when clicked.

How do I do this?

Thanks.

#2

Hello There,

Thanks for writing in!

You haven’t specified how you want to open lightbox. So if you want to click on a text and opens up a pdf in a lightbox, please use following shortcode in a Cornerstone Raw Content element:

<a class="link-lightbox" href="example.com/filename.pdf" title="Open the pdf">Click me [lightbox selector=".link-lightbox"]</a>

If you want to click on a button and open a pdf in a lightbox, please use following shortcode in a Cornerstone Raw Content element:

[x_button class="btn-lightbox" shape="square" size="large" float="none" href="example.com/filename.pdf" info="none" lightbox_video="true"]Click me[lightbox selector=".btn-lightbox"][/x_button]

Let us know how it goes.

Thanks.

#3

Thanks Prasant.

Neither. The pdf is on the page as an image – please check the URL above, it’s the image with green saying ‘Zertifikat’. For those who would like to read it, I’d like it to open up larger, in a lightbox in front of the current page, with a small cross to close it.

Thanks.

#4

Hi There,

Please add an image element in Cornerstone.

Turn ON the Link, add the link to the pdf on the HREF

Add a class to the image: btn-lightbox

Add a raw code element and add the following shortcode code.

[lightbox selector=".btn-lightbox"]

Hope it helps

#5

Hi Joao.

As soon as I enable the link, it changes the layout of the images. How can I stop that?

#6

Hey There,

Would you mind providing us with login credentials so we can take a closer look? Please provide following information:

Set it as Secure Note

  • Link to your site
  • WordPress Admin username / password
    -Specific page where you have applied it

All the best!

#7

Hi Joao.

Here are the login details:

I have exchanged the pdf for a png but I still need the lightbox effect. Can I add this as a class or style?

#8

Hello There,

Thanks for providing the information. I went ahead and change the look of the image when it becomes a link. I removed the inline css and added a custom css instead:

a.x-img img {
  border: solid 0px #778692; 
  box-shadow: 0px 5px 10px #778692;  
  max-height: 500px; 
}

Please check your site now.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.