Essential Grid WP
09.04.2016
Add Lightbox Image Descriptions using JackBox
The following shows how you can setup image descriptions using the JackBox lightbox which is compatible with Essential Grid.
1. Purchase a copy of JackBox, and then after both Essential Grid and JackBox are installed and activated, set JackBox as the grid's default lightbox.
2. Create and populate Custom Meta Data that will be used for the JackBox description.
3. Add the newly created Custom Meta to your grid's skin.
4. Then hide the Item Skin's custom meta element from initial view with some Custom CSS (so it only shows up inside the light box).
5. From the grid's main settings, add the following code to the "API/JavaScript" section (adjust the class name just like for the custom CSS part above).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// change the class name below to the class name for the description's skin element var descriptionClassName = 'eg-jefferson-element-9'; jQuery('.esgbox').on('click', function() { jQuery('.esgbox').each(addDescriptions); }); function addDescriptions() { var $this = jQuery(this); $this.attr('data-jbdescription', $this.closest('li').find('.' + descriptionClassName).html()); } |
Result:
- Quick Tip:
Show the description by default from: "WP Menu -> Settings -> JackBox -> Show Description by Default -> Yes".
