Docs

[ryaneford]

Hello,

I am having a heck of a time figuring this out and I need help.

I am looking to open a lightbox gallery (be it Envira or X Lightbox) from a button on a page.

Essentially I don’t want any thumbnails to show up but just an X button that opens a lightbox to the gallery

Could I get some assistance on this? I’m REALLY lost.

Thanks

[citified]

I have gotten no response ether. twice the ? is why???

[citified]

Oh” citified

[Lely]

Hello @ryaneford,

Please try the following code inside a RAW element:

[image src="http://www.site.com/image-src1.jpg" lightbox_caption="I'm the first image."   class="lb-gallery hide-img"]
[image src="http://www.site.com/image-src2.jpg" lightbox_caption="I'm the second image."   class="lb-gallery hide-img"]
[image src="http://www.site.com/image-src3.jpg"  lightbox_caption="I'm the third image."  class="lb-gallery hide-img"]
[button class="lb-gallery" href="http://www.site.com/image-src.jpg"]Round Button[/button]
[lightbox   selector=".lb-gallery"]

Then also add this in Settings Tab > Custom CSS:

.hide-img{
  display:none;
}

Please also check the following link for some guide:
https://community.theme.co/kb/shortcode-walkthrough-lightbox/
http://theme.co/x/demo/icon/1/shortcodes/buttons/
http://theme.co/x/demo/integrity/1/shortcodes/responsive-lightbox/

@citified,

For future reference we kindly ask that our users not bump the threads as stated in our support policy. Since we answer questions from oldest to newest and bumping a thread makes it appear as brand new, this will only serve to lengthen our response time. Replies in the forum can take up to 24 hours during the week, but oftentimes we are able to get to questions much quicker than that. We request that our users wait patiently while we work our way through the forum as we can assure you that all questions will be addressed as soon as possible.

[ryaneford]

This reply has been marked as private.

[Paul R]

Hi,

Please update your theme to latest version – Xtheme V4.4.2 and see if that fixes the issue.

Thanks

[ryaneford]

Hi

Updating didn’t seem to fix the issue. The button should open the lightbox gallery. it just links to the full sized image.

[Rue Nel]

Hello There,

Sorry for the confusion. The correct code for opening a lightbox with a button is this:

[button class="lbs-gallery" href="http://teamfasttrack.com/wp-content/uploads/2016/04/zoomEvent.jpg" lightbox_caption="I am a caption."]button[/button]
[lightbox selector=".lbs-gallery"]

If you want to open a gallery, it should be something like this:

[lightbox selector=".gallery-icon > a"]

For further details, please check it here: https://community.theme.co/kb/shortcode-walkthrough-lightbox/ (at the very bottom of the page)

[ryaneford]

hi there,

sorry for the confusion! as it turns out the client wants that to open in a gallery but i can’t seem to figure out where i put the gallery link? Is it in lieu of where the single image is?

like this?

[button class="lbs-gallery" [gallery link="file" ids="17560,17559,17558,17226,3318,3317,3121,3120,3119"] lightbox_caption="I am a caption."]button[/button]
[lightbox selector=".lbs-gallery"]

[Jade]

Hi there,

You should just be needing a code like this:

[ gallery link="file" ids="17560,17559,17558,17226,3318,3317,3121,3120,3119"]
[lightbox selector=".gallery-icon > a"]

Let us know how it goes.

[ryaneford]

Thanks for the help I’m TERRIBLE at the lightbox syntax.

In there, where would I put the button code?

[Christopher]

Hi there,

Please put the code in text element.

Hope it helps.

[ryaneford]

Sorry I don’t understand. The whole intent is to open a lightbox gallery thru a button.

[Joao]

Hi There,

Please try this shortcode.

Add this to the code above

[button  type="flat" shape="square" title="Example" class="gallery-button"]Launch Me![/button]  

And Change lightbox selector for

[lightbox selector=".gallery-button"]

.`

If you need to customize your button according to your preferences please refere to this page and select your stack.

https://community.theme.co/kb/shortcode-walkthrough-button/

Hope that helps,

Joao

[ryaneford]

Hello,

Currently my code is this. But it seems to show the thumbnails BELOW the button. ( page is here http://teamfasttrack.com/?page_id=6911# )

[button  type="flat" shape="square" title="Example" class="gallery-button"]Launch Me![/button]  
[gallery link="file" ids="8428,8403,8401,8396,8393,8382,8381"]
[lightbox selector=".gallery-button"]

Am I missing something here? I’m so sorry to be a pest, I just need to understand how and if this can be done.

[Author]

Posts