Add envira gallery lightbox to image

Support
#1

Hey there,

I already read the resouces on how to add a envira gallery button that opens a lightbox. I had no success to view the lightbox. I’d like the lightbox to open, once I click an image.
I currently got a column that has a bg image set and is only filled with a gap

[envira-link id=“166”]Click here[/envira-link]
Thanks for your help!

#2

Hey @ZerotoOneaerial,

You can achieve that using the Image shortcode or HTML like the following code. Add the code in a Text element.

###Image Shortcode

[envira-link id="4659"][x_image type="none" float="none" src="http://example.com/imge.jpg"][/envira-link]

Because you can use shortcodes, you can build a Global Block and use the Global Block Shortcode

###Image HTML

[envira-link id="4659"]<img src="http://example.com/imge.jpg">[/envira-link]

Hope that helps.

#3

Thank you,
I’am currently applying the image as a background image for my column, how would I proceed in this case?
Thanks for your help!

#4

Hello @ZerotoOneaerial,

If your image was added as a column background image, you will need to make sure that your link is fullwidth and full height the same as your column. Use this Envira Gallery link in a text element instead:

[envira-link id="4659"]&nbsp;[/envira-link]

And then in the Cornerstone’s custom css, add this:

.envira-gallery-links {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

We would love to know if this has worked for you. Thank you.

#5

Thank you! right now the setup is a column that is only filled with a gap to determine the display size and an image set as the background. So should I replace the gap with the text element?

#6

Hi @ZerotoOneaerial,

Yes, please use text element. Then for the height of the element/column, you can set padding on the text element.

Hope this helps.

#7

Thank you, It works great now. How can I add the link to my whole button next to the image?

#8

Hello @ZerotoOneaerial

How can I add the link to my whole button next to the image?

  • To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

#9

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