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)
- Using Google Chrome browser, open a page with button you with to lauch a lighbtox
- Right click on the button and select “Inspect”
- In the area that appers, right click the line highlighted in grey
- Copy Selector
- 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.