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!