jQuery selectors allow you to find and target specific HTML elements. With the Dynamic feature, you can target any HTML element and use that content to dynamically populate a lightbox.
For example, most WordPress blogs classify their articles by category. You may want to display a newsletter sign-up form that’s customized based on the blog post category. That way, a visitor reading an article in the Features post category would see a customized lightbox like this:
Here’s how you can set this up:
- Find the category tag jQuery selector. In this case, it’s .cat-links a:
- From the Boxes page, click on Dynamic next to the appropriate lightbox.
- Click on +New Dynamic Item.
- You’ll see the window below:
- Source: In this example, we’re choosing JQuery as the source (other source options are URL parameter and URL).
- URL Parameter Name: In this case, we’re pushing text from the category tag.
- Operator: In this case, we’re using “equals,” but you have a range of options in this drop-down menu.
- Comparison: Here we’re not worried about matching the case, so we're picking Case Insensitive. You can also select Case Sensitive if you need to.
- Source Value Matches: Here we’re saying the source value (the category tag) can match anything. In other cases, you may have a specific match in mind, and you can select Custom from the drop-down menu.
- Target: The target in our case is the Text 2 field within our lightbox. You can target text fields, image fields, HTML, buttons, and more.
- Target Page: Here we’re targeting the Main Page of our lightbox.
- Target Fill: Here we’re pushing the text from the category tag, so we’re going to use Source Value. If you want to display something else, choose Custom.
- Target Fallback Value: If there’s no value in the category tag, we’ll display a fallback value, in this case, Mobile Marketing Newsletter.
Update: You can now choose a jQuery Method for your jQuery Selector in Dynamic. Originally, we used “.html()” by default. But now, you can choose between the following methods: HTML, text, Val, length, attr, prop, is, CSS, and hasClass.
Have questions about dynamically adding content using jQuery selectors? Send an email to email@example.com.
Please sign in to leave a comment.