How do I add a Light Box Action to an element?

Triggering this action will display the elements of your choice in a closable box over the dimmed page. If multiple elements are chosen, they will display one at a time with forward and back arrows available on the light box for navigating through all elements. It's a great way to bring secondary information to the forefront of the page on an as-needed basis. 

There are a number of ways to add interactivity to your pages in Claro. For a complete list of available interactions see our How do I add interactions to my page? article.

To add a Light Box action to elements:

  1. Select the element you want to have trigger the action.
  2. Select the Interaction tab.
  3. In the Element Interactions section, select the Actions button drop-down list. 
  4. Select Light Box from the drop-down menu. The Element Interactions panel will open.
  5. The panel has two list areas, Elements and Targets.
  6. Select the elements you want to target and drag them to the Target list. Once the element has been added, the elements will be highlighted on the stage area in a red dashed border. 
    Note: You can use the usual Shift or Ctrl (command) shortcut keys to select multiple Elements in a list to drag them all together. It is highly recommended that you use this processes as opposed to adding the same action to multiple elements individually—too many individual actions can create issues in some browsers.
  7. Select the Trigger for the action (When clicked, When double clicked, When right-clicked, When mouse rolls over, When mouse rolls off, When trigger element shows, When trigger element hides).
  8. You can also select a Delay after which the action should occur after the Trigger event.
  9. There are three checkboxes at the bottom: 
    —Check Hide other action targets to hide elements that may have been shown as part of another Action, Hotspot or Image map.
    —Check Set Hidden on Load for target elements to hide the action's elements when the page is loaded. If you want your mouse event elements visible when the page loads, uncheck this box. 
    Note: This option is checked by default. You can see the "Hidden on load" button toggled on for selected elements it has been applied to in the Element Interactions area of the Animate tab. If you subsequently edit an action and remove an element where "Hidden on load" was applied, you will need to turn off "Hidden on load" if you want the element to show when the page is loaded.
    Check Clear Hidden on Load for target elements to show the action's elements when the page is loaded even when "Hidden on load" may have been applied.
  10. Input any Conditions you wish to evaluate.
    Note: For examples of operators you can use in the Conditions field, see: JavaScript Operators by
  11. Click the Apply button when you’re done or click Cancel at anytime.
  12. You can then Preview the action right from the Element Interactions pane or Add another action to the element.
  13. Click Done when you are finished.
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request