Image Lightbox On Click Action

The Image Lightbox On Click action displays an image by filling the screen and dimming the rest of the page with a semitransparent overlay. A visitor triggers this lightbox when they click a defined page element and closes it by clicking either the overlay mask or a close button incorporated into the image with a click zone. The action also appends included CSS styles in the <head> of the page.

Required Components

Relative Element Selector

Input the element selector in the Relative Element Selector field. This selector defines what element on the page the site visitor must click to trigger the lightbox. For additional information on selectors, refer to Element Selectors.

Image Creative

Monetate displays the uploaded image on the page as part of a full-page overlay. This image supports click zones used as links or as a close button when you set the click zone URL to #close.

Optional Components

Pin Lightbox Position

This input controls the position property of the lightbox content.

If you select NO, then Monetate sets the lightbox position to relative and the lightbox content doesn't scroll with the page. If you select YES, then Monetate sets the lightbox content position to fixed and the lightbox content scrolls with the page.

Top Position

This input sets the distance in pixels of the lightbox content from the top of the viewport. By default, the lightbox content is 15% of the total height of the visitor's screen from the top of the viewport.

Left Position

This input sets set the distance in pixels of the lightbox content from the left side of the viewport. By default, the lightbox content is centered within the viewport.

Overlay Color

This input controls the background-color property of the lightbox overlay mask. It accepts HTML color codes (for example, red), hex color codes (for example, #ff0000), or RGB values (for example, rgb(255, 0, 0)). The default color is #000 (black).

Overlay Opacity

This input controls the opacity property of the lightbox overlay mask. It accepts any value between 0.00 and 1.00. The default value is 0.6.

CSS Style

Anything you add to the CSS editor is appended to a stylesheet in the <head> portion of your site in a <style> block. These styles are available on this page for use with any page elements.

Select All Elements

The Select multiple elements, if matched? toggle allows you to apply the action to the first occurrence of the element selector or all occurrences of the selector, if multiple exist.

Selecting NO applies the action to the first occurrence. Selecting YES applies the action to all occurrences.