How to dynamically add content from a jQuery selector into your lightbox

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!