Lightbox button for Gallery


How can I have a gallery lightbox popup after clicking on a “GALLERY” button? I’ve tried so many things but not getting it. I could acomplish this button for a video following this code:

[x_button class=“video-button” shape=“square” size=“mini” block=“true” info=“none” link=“true” href=“…” lightbox_video=“true”]VIDEO[/x_button]

[lightbox selector=" .video-button"]

but when I try this with a gallery nothing happens or it shows thumbnails:

[x_button class=“gallery-icon a" shape=“square” size=“mini” block=“true” link=“true” gallery link=“file” ids=“1161,1162,1163,1164”]GALLERY[/x_button]
[lightbox selector=".gallery-icon a"]

What am I doing wrong? I apreciate all your help!!! thank you. M

1 Like

Hi There,

Thanks for writing in! Please go through our documentation here.

Hope that helps.

Hi Darshana,

THank you so much for your response. I tried all the combinations included in this article and was able to create a lightbox with single image markup also was able to insert the gallery I created in the media section, but can’t figure out how to make a simple button labeled “GALLERY” that when click would open a lightbox containing my gallery or images.

This markup worked like a charm for video but can’t crack the code for the gallery :frowning:

[x_button class=“video-button” shape=“square” size=“mini” block=“true” info=“none” link=“true” href=“…” lightbox_video=“true”]VIDEO[/x_button]

[lightbox selector=" .video-button"]

Hi There,

You can add your images to the page, add the same class to each image.

You can add the class, folio-1 , for example.

Than add a RAW Code Element and add the lightbox selector.

[lightbox selector=".folio-1"]

Now you can add a button, and add the class folio-1 to your button and link to one of your images.

If you want you can hide the row where you have placed the images and they will appear just on the lightbox.

Hope it helps

1 Like

Is there an easier way then this for the same thing? I have this for my gallery button but it send me to the top of the page with a #

This is my code right now and its not working…

[x_button class=“btn-lightbox” type=“transparent” href="" shape=“rounded” size=“small” link=“file” ids=“19838,19837,19703,19704,19632,19633,19641,6651,18769,19025,19372,19842,19960,19952”]See Examples[/x_button]
[lightbox selector=".gallery-icon a"]

Hello There,

Thanks for posting in! I think this is the the correct button shortcode or the gallery shortcode.
Could you please post in your next reply the whole shortcodes for displaying the gallery and button?

Best Regards.

thats is the whole shortcode

Hi @knuhkles,

May I know where did you get that shortcode? That looks wrong to me, as a lightbox, the href should contain a valid URL and the link attribute. Is this from old X Shortcodes plugin?


Hi there,

Credentials are wrong, for the meantime, would you mind providing more information about the shortcode and how did you get it? Perhaps it’s from very old contents?


It was a cut and paste from a website… what is the correct code then?

Hi Chris,

Sorry for the confusion, the shortcode that the original poster above and your shortcode does not really work in the first place. You cannot place a shortcode inside another shortcode, in this case you placed the gallery shortcode inside the button shortcode, it needs to be separated.

Please add your Gallery shortcode on a Raw Content element or Content Area element.

[gallery size="medium" columns="3" link="file" ids="19838,19837,19703,19704,19632,19633,19641,6651,18769,19025,19372,19842,19960,19952"]

Then the button and lightbox shortcode on another Raw element

<div class="gallery-icon">
[x_button shape="square" size="mini" info="none" link="false" href="FIRST IMAGE URL HERE" lightbox="true"]Gallery[/x_button]
[lightbox selector=".gallery-icon a"]

Replace the FIRST IMAGE URL HERE phrase with the actual image that you want to show first.

Hope that helps,

ok still doesnt work like i need it tooo… very simple i need it to click on a box under lighting in then it just open a lightbox with a gallery of images. I thought this would be super simple.


Upon checking, I can see that your code is not correct. The href of your button was set to # instead of the url of your first image.

I also cannot see your gallery shortcode.

[gallery size="medium" columns="3" link="file" ids="19838,19837,19703,19704,19632,19633,19641,6651,18769,19025,19372,19842,19960,19952"]

To create a gallery, kindly follow the guide on the link below.

Then wrap your gallery code in a div with display:none so it is not visible until the button is clicked.

The entire code in your raw content element should look similar to this.

<div style="display:none;">[gallery link="file" ids="273,137,136"]</div>
<div class="gallery-icon">[x_button shape="square" size="mini" info="none" link="false" href="" lightbox="true"]Gallery[/x_button]</a>
[lightbox selector=".gallery-icon a"]

Hope that helps

1 Like

ok its working now but it throws the column next to it off with the display:none … any way to fix this?

Hi Chris,

In that case, please provide us the direct page URL and login credentials in a secure note so we can take a closer look.


added secure note for login… thank you

Hi @knuhkles,

The closing </div> is too far from its open counterpart.

It should be like this,

<div class="gallery-icon">[x_button type="transparent" shape="rounded" size="small" size="small" info="none" link="false" href="" lightbox="true"]View Uplighting Examples[/x_button]</div>

A closing right after the element that it wraps. And looks like you edited the shortcode which also breaks the entire structure. How about doing it within the builder?


Got it working… thank you so much… just missing the at the end… stupid me

You’re welcome. Glad we could help.

Hi there, I’ve tried to follow instructions from Joao on Oct’17 and have some doubts regarding this website

  1. The only way to show a Lightbox Gallery is by adding images to the page? Couldn’t be done with an Envira Gallery, for example?
  2. I added both images and button same class, sobrino but don’t know how to link button to one of those 3 images
  3. I want to hide row where I had placed images but don’t know how…
  4. I also want the Lightbox Gallery to open when you click at the image behind button, could you please explain how to do that