Load an iFrame inside Essential Grid’s Lightbox

Setup your Essential Grid items to load iframe based content inside the default lightbox

1. Create a new Custom Meta

2. Assign the meta a Name(1) and Handle(2), with a "Type" of "Text"(3)

3. Add the iFrame's url to your post's Essential Grid Custom Settings

4. From the Essential Grid overview page, click "Edit Skin" for your grid

5. Add a new element to your skin's canvas, and apply the following source settings:

6. With the element still selected, find and copy its class name

7. Add the following Custom CSS, replacing the ".eg-washington-element-3" part with your element's class name

8. From the Essential Grid overview page, click "Settings" for your grid

9. Add the following code to your grid's API/JavaScript section

  • Modify the “.eg-washington-element-3” part at the top with your meta element’s class name.
  • Make optional adjustments to the “Custom Settings” section at the top using the information here:
    http://fancyapps.com/fancybox/#docs

10. Choose "Single" or "All Items" for the "Gallery Mode" option