The click jQuery selector rule shows the lightbox when the jQuery click selector is used, and a click event is shown.You can set it to show when a link is clicked, or when a button is clicked. For buttons, you may want to use the class or id attributes to identify the button for this rule. You’ll find the appropriate syntax for each below:

Notice the use of the “#” symbol and the “.” period?  That is how to target an “id” and “class” using jQuery selectors.

So, if you wanted to show the lightbox only when a button identified by the container class is clicked

your rule would look like this

Or, if you want to show the lightbox only on pages with the navigation_wrapper id

your rule would look like this:

Easy Steps to Identify ID Selector Syntax (see video above)

1. Using Google Chrome browser, open a page with button you with to lauch a lighbtox
2. Right click on the button and select “Inspect”
3. In the area that appers, right click the line highlighted in grey
4. Copy Selector
5. Paste into the input section of the Click jQuery Rule (within the Digioh interface)

Examples

This is a super powerful rule, for example when someone clicks a link or a button, you can have a lightbox open up instead of directing them to a new page. This eliminates load time, and keeps people on your website. This works great for Youtube videos, for example if you have a promotional video, they can watch the video inside the lightbox (while on your website), and then also have a form underneath it to capture their information.