Adding a Show Image in a Light Box Action to a Button

Steps to add a Show Image in a Light Box action to a button.

When the learner selects the button the image will be shown over top of the main page in a Light Box or modal window.

You can add more than one image to this action. The Light Box will automatically switch to a carousel display so the learner can move from one image to the next.

Chris Van Wingerden

2022-02-25

2116

Show Me Try Me Guide Practice Me Test Me

1

Select the button on the Stage.

Click the continue button:
2

Select the Actions Element Control (lightning bolt icon).

Click the continue button:
3

Select Show an image in a Light Box.

Click the continue button:
4

The Element Interactions panel will open to the right of the Stage. Leave the Trigger setting as When clicked. Leave the Timer set at 0:0.0. Select Add Asset.

Click the continue button:
5

The Media Browser will open. Select the image.

Click the continue button:
6

Select Insert.

Click the continue button:
7

The image is now shown on the assets list on the Element Interactions panel. Select Apply when all images have been added.

Click the continue button:
8

The Actions Element Control (lightning bolt icon) now shows a dark purple circle, indicating that an Action has been applied to the button. Select Preview to view the action.

Click the continue button:
9

In the Preview browser that opens, select the Click here to view larger image button.

Click the continue button:
10

The image opens in a light box or modal window over the main page. Select the X in the upper right corner to close the light box.

Click the continue button:
11

The light box is closed and the main page is fully visible again.

Click the continue button: