jQuery selectors allow you to find and target specific HTML elements. With Digioh’s new “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 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 (scroll past the video for the written instructions):
1. Find the category tag jQuery selector. In this case, it’s .cat-links a:
2. From the Boxes page, click on “Dynamic” next to the appropriate lightbox.
3. Click on “+New Dynamic Item”
4. You’ll see this window open up:
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 pick “case insensitive”, but you can 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.
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 just used “.html()” by default. But now, you can choose between the following methods: html, text, val, length, attr, prop, is, css, hasClass.
Have any questions about dynamically adding content using jQuery selectors? Send us a message and we’ll be happy to help you out!