Lightbox

Storyline lets you display slides in pop-ins, called Lightbox, over the base of a slide. However, the software does not allow you to modify the visual aspect.

For the purposes of a graphic charter, however, it may be useful to modify the elements that make it up.

Presentation

The feature implements several methods for deleting or modifying Lightbox graphic elements:

  • removeCloseButton : deletes the "Close" button from the Lightbox ;

  • removeWhiteBackground : deletes the white background of the Lightbox ;

  • resetCloseButton : modifies the visual appearance of the "Close" button in the Lightbox ;

  • resetOverlay : modifies the colour and transparency of the Lightbox watermark.

All methods are called once in the main initialization trigger.

Deleting a graphic element

To remove the button and/or the white background, add the declarations to the main initialisation trigger.

JavaScript
Lightbox.removeCloseButton();

Attention


Don't forget to insert a close button and assign it a Lightbox close trigger, either in the applied Master slide or in the slide itself.

JavaScript
Lightbox.removeWhiteBackground();

Modifying a graphic element

Close Button

The library can be used to redefine the graphic appearance of the "Close" button while retaining its original position in the top right-hand corner of the Storyline player.

JavaScript
Lightbox.resetCloseButton( offset, size, 'backgroundColor', alpha, 'svg');

  • offset: the pixel offset from the top right-hand corner of the browser.
    The default setting is 36 pixels;

  • size: the pixel size of the background circle.
    The default setting is 24 pixels;

  • backgroundColor: the hexadecimal value of the background circle colour.
    The default setting is #000000 ;

  • alpha: the transparency level between 0 and 1 of the background circle.
    The default setting is 0.6;

  • svg: an svg+xml character string encoded in base64..
    By default, uses the original string from the Storyline player.

Encoding an svg

Once you have the .svg file for your 'Close' button ready, open the file in your usual text utility and copy the complete SVG node.

The original visual cross of the Storyline player looks like this:

SVG
<svg class="cs-icon icon-close" width="20" height="20" viewBox="0 0 36 36" focusable="false">
      <polygon points="36,2.826 33.174,0 18,15.174 2.826,0 0,2.826 15.174,18 0,33.174 2.826,36 18,20.826 33.174,36 36,33.174 20.826,18"></polygon>
    </svg>

Then, using an XML to base 64 online service, encode the character string, copy the encrypted string and paste it as the value for the svg parameter of the Lightbox.resetCloseButton method.

Le overlay

The library also lets you change the overlay in the Lightbox background.

Only the colour and transparency can be changed.

JavaScript
Lightbox.resetOverlay( '#000000', 0.6 ); // original settings

The Lightbox overlay


Once a Lightbox is open, navigation between slides remains located in the Ligthbox. It is impossible to return to the base level of the Storyline player without using a Lightbox close trigger beforehand and in an unsynchronised way..

To prevent the user from unintentionally navigating to another slide, the Nuggets library will keep the overlay as a guard to prevent mouse events on clickable elements present in the base slide, the menu and the player interface buttons.