[NueraParticipant]

I have a page setup with a group of buttons, which each link to a different resource. One of those buttons is a print booklet that I have turned into a little flipbook using another plugin. I would like the booklet to open via lightbox when a user clicks the button.

I have two issues as I can see it:

1) The plugin only provides a shortcode for the booklet, so I’m not sure how to summon that through a button.

2) I’m not sure how to open a lightbox directly from a button. If it’s easier to do through the button shortcode within a text element, I’m happy to go that route too.

Thanks in advance 🙂

[RupokMember]

Hi there,

Let’s follow this to setup lightbox – https://community.theme.co/kb/shortcode-walkthrough-lightbox/

Thanks!

[NueraParticipant]

Hi, I’m sorry. I tried to achieve either of the above goals using that page, but everything is presented in shortcodes, which I just don’t know how to apply in this instance.

Right now, I’ve got two “Catering Menu” buttons on the page. One is an actual button element, and one is a button built within a text element. If there is another way to build this, I’m totally open to it, but I’m a little lost on which direction I should take.

If you could help me navigate my options, that would be very much appreciated 🙂

[JoaoModerator]

Hi There,

Lightbox works like this:

On the HREF of your button put the URL of the content you want to be displayed in a lightbox.

Add a class to your button (This class will be used to launch a lightbox, if you use more than one lightbox, usee different classes to avoid the content gets mixed)(class example: yourclasshere)

Add a Raw Content with : [lightbox selector=”.yourclasshere”]

That is it.

Hope that helps

Joao

[NueraParticipant]

Ok, 2 questions in that case:

1) Can I summon a shortcode using this method?

2) I’m not sure what lightbox class I would be referencing here. Is there a standard class?

Thanks

[Paul RModerator]

Hi,

You can give any classname that you like, as long as your lightbox selector matches your button class.

Can you provide us your site url so we can take a closer look.

Thanks

[NueraParticipant]

This reply has been marked as private.

[JoaoModerator]

Hi ,

SO first of all to understand the “lightbox class”.

The selector [lightbox selector=”.yourclasshere”]

Will tell X to launch a lightbox once a link/button/ that contain that class is clicked.

Inside the lightbox will be the content of the href of that link/button.

So if you add a button to your site and link to an image, add the class yourclasshere to this button and on the same page you add in a raw content element the selector [lightbox selector=”.yourclasshere”]

Hope that is clear

Question 1-> If you want to open a shortcode inside the lightbox you need to create a page , place your shortcode.

Create a button or link and link it to that page.

Add a class to your link or button – for example class: lightboxing

On the same page(where the button or link is) add a raw content and add [lightbox selector=”.lightboxing”]

Hope that helps

Joao

[NueraParticipant]

So I have been attempting to implement this lightbox, with limited success. I think my problem primarily lies with the way I’m summong the lightbox selector code.

For instance, on this page I am trying to link to a Constant Contact email signup form: http://smps.nueramarketing.com/#newsletter

I have a raw element in the section with the following shortcode in it:
[lightbox selector=”.lightbox”]

And I have a button that is using the lightbox selector class beneath that:
[x_button shape="square" size="large" float="none" href="https://visitor.r20.constantcontact.com/d.jsp?llr=ydugaddab&p=oi&m=1102833733752&sit=cgtdieueb&f=22e4bcca-b5e9-401a-87b0-fa8e98ae8e4a" title="Newsletter Signup" info="none" info_place="top" info_trigger="hover" class="lightbox"]SUBSCRIBE[/x_button]

However, once clicked the button simply links traditionally and skips the lightbox command. What am I doing wrong here?

[JoaoModerator]

Hi There,

Please use this code for the selector instead and it will work.

[lightbox selector=".lightbox"]

Hope that helps

Joao

[NueraParticipant]

Thank you, that worked perfectly! Was it just the encoding of the quotation characters that were holding me up?

[JoaoModerator]

Yep 🙂

My bad actually, I guess the forum here when we dont select code it converts the straight quotes to that, for our human eye small difference, for the computer a no-go 🙂

Let us know if you need further help,

Joao

[NueraParticipant]

You’re the best, thanks Joao 🙂

[JoaoModerator]

My pleasure! 🙂

[Author]

Posts