Display image in lightbox after button press

[Houston]

I used to have this workingf but now that I have updated the image it no longer works. Is there something wrong with this code?

[x_button class="btn-lightbox" shape="square" size="large" float="none" block="true" href="https://nlptrainingconcepts.com/wp-content/uploads/2020/03/NLP-block-diagram.png"<a href="https://nlptrainingconcepts.com/wp-content/uploads/2020/03/NLP-block-diagram.png"></a> info="none" info_place="top" info_trigger="hover"]NLP Classes Overview[/x_button]<br />
[lightbox selector=".btn-lightbox"]

I read in another post to use “Content Area Model” but that is not a button. I need it to be a button as seen on this page, nlptrainingconcepts.com

[nabeel]

Hi @Houston,

Thank you for reaching out to us. I checked the shortcode you shared and there is an error in the code. Please update your shortcode with the following:

[x_button class="btn-lightbox" shape="square" size="large" float="none" block="true" href="https://nlptrainingconcepts.com/wp-content/uploads/2020/03/NLP-block-diagram.png" info="none" info_place="top" info_trigger="hover"]NLP Classes Overview[/x_button]
[lightbox selector=".btn-lightbox"]

Alternatively you can follow this thread Lightbox + Image Element and use Button element instead of an Image element.

Hope this helps!

[Houston]

@nabeel

[x_button class=“btn-lightbox” shape=“square” size=“large” float=“none” block=“true” href=“https://nlptrainingconcepts.com/wp-content/uploads/2020/03/NLP-block-diagram.png” info=“none” info_place=“top” info_trigger=“hover”]NLP Classes Overview[/x_button] [lightbox selector=".btn-lightbox"]

I don’t see any difference between your code and my original code. Never the less, I cut and pasted it and it did not work.

[jade]

Hi @Houston,

There was a slight difference from your code since you have:

<a href="https://nlptrainingconcepts.com/wp-content/uploads/2020/03/NLP-block-diagram.png"></a>

added to the button shortcode which causes the issue.

Glad to hear it’s sorted now.

[Houston]

I did not say it was working, I said that the code you gave me DID NOT work.!

[Houston]

@nabeel

Alternatively you can follow this thread Lightbox + Image Element and use Button element instead of an Image element.

I tried using this step instead but it makes now sense to me as it is having create 2 separate elements. One image element and then a text element. I don’t get why I am crating 2 elements when all I want it one. I am so confused. (???) All I am wanting it a button on the screen that when clicked, will launch a lightbox with an image inside.

[nabeel]

Hey @Houston,

I looked at your screenshot and your shortcode has pretty quotes that’s why it isn’t working, make sure you copy and paste the following code in the Raw Content element instead:

[x_button class="btn-lightbox" shape="square" size="large" float="none" block="true" href="https://nlptrainingconcepts.com/wp-content/uploads/2020/03/NLP-block-diagram.png" info="none" info_place="top" info_trigger="hover"]NLP Classes Overview[/x_button]
[lightbox selector=".btn-lightbox"]

I tested the above shortcode in my local setup and it works as expected:

The alternative method is for Cornerstone when you don’t want to use the button shortcode. Since you’re okay with using the button shortcode you can stick with the shortcode solution.

If you still have problems kindly get back to us with the URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case.

Hope this helps!

[Houston]

@nabeel,

That did work thank you.

[christopher]

You’re welcome .