Search

Searching USERS

Export Page

Use the Amplience Lightbox

You have the option to build a content module within your Authoring Studio as normal, and call this specific content module you create from within a separate parent/ master module using the Amplience Lightbox feature. This is especially useful if you want to build a Product Display Page to display advanced product data, or to call a more advanced module overlay that you would like your users to engage with. 

NOTE:

  1. The term "Lightbox", this refers to the container that will hold your content module you are triggering.
  2. A parent module is the master module that references an external module in a lightbox call.
  3. A child module is the module that will be assigned to the lightbox and displayed when the call to action is triggered.

Creating a Lightbox Module in the Editor

  1. Create the module that will be displayed in the lightbox - this can be your new advanced product display panel, or a manual panel with additional features.
  2. Add close button or text to your content module.

3.  In the actions panel for that close button, select the Lightbox tab, and check 'Make this button close any active lightboxes'.

4. Save and close the module.

5. Create a separate parent module that will launch the lightbox.

6. Add the button or image map, which will launch the lightbox.

7. In the actions panel, select the Lightbox tab, and un-check  “Make this button close any active lightboxes.”

8.  Select the lightbox module you created earlier from the drop down list.

9.  If the list is too long, begin typing the module name to filter the list.

10.  Enter any additional variables in query string format (var1=value&var2=x), and a product SKU if required.

11.  Save and close the module.

12.  You will now see your child and parent in your dashboard. 


Publishing your Module and Associated Lightbox

1.  Assign the parent module you just created to an area - you do not need to do anything in the publish area with your child module that will be referenced via your lightbox.

2.  Publish your master/ parent module.

3.  The associated lightbox child module(s) will automatically be published alongside the parent.


Additional Development Configuration - Lightbox Appearance

It is possible to further customise the appearance of your Lightbox, but this will require additional development effort that can be managed by your integrator/ internal developers.

These options are as follows:

Once 'lightbox.min.js' has been loaded, a user can customise the following properties:

Property Name

Default Value

Description

zindex

20000000000

The layer in which the lightbox will be displayed.

The default value should cause it to appear above any other elements on the page.

opacity

0.6

The opacity of the panel that greys out elements behind the lightbox.

shadow

true

Whether to show a shadow around the lightbox. This is only supported in some browsers.

shadowOpacity

0.6

The opacity of the lightbox shadow (if visible).

Examples of how to change these properties:

//Make the background panel transparent
interact.lbd.opacity = 0;

//Hide the shadow
interact.lbd.shadow = false;

//Set Lightbox z-index
interact.lbd.zindex = false;

//Set lightbox shadow opacity
interact.lbd.shadowOpacity = 0.2;

 

Current Known Restrictions/Issues with the Lightbox

1. Layering: you can only show 1 lightbox layer at a time, i.e. you cannot chain lightboxes together. So for example, if you ChildModuleX and ChildModuleY, you can reference either or both of these from within the parent module; but you cannot call ChildModuleX from within ChildModuleY and vice versa.

2. When you add a close button to your lightbox module, you will need to set this call to action each time on each slide as it is currently bound to the slide, and not the child module.

3. During wipe transitions, it is a known issue that the close button action may be temporarily unclickable.

4. The Parent carousel will not pause in editor preview.

5. Can’t have a Flash & HTML player showing the same module on a page.

6. All light boxes should have a background image or solid colour applied - the colour will be inherited from the parent module.