Inster Block: Lightbox Settings

The Inspector panel provides great opportunities for customizing the block. You can hide/show the Inspector panel by clicking on the button with the gear icon, top right. Or using hotkeys ? + ? , for Mac, and ? + ? + , for Windows and Linux.

Important

Please note that all the settings mentioned on this page will work only while viewing the page. Lightbox will not be displayed in the editor.

Enable Lightbox

This toggle enable/disable the display of the Lightbox by clicking on the post.

Lightbox animation

Lightbox Image animation. You can select one of the preset animation modes:

  • None
  • Opacity
  • Scale
  • Rotate clockwise
  • Rotate counter-clockwise
  • Width
  • Height
  • Translate left to right
  • Translate right to left
  • Translate top to bottom
  • Translate bottom to top

You can also customize the animation as you need it with the following settings:

Lightbox animation timing

Timing function for animation. Similar to CSS animation-timing-function

Animation timing function graph

Lightbox animation duration

Initial animation duration in seconds

Lightbox animation delay

Delay start playing animation

Overlay animation

Lightbox Overlay (Background) animation. You can select one of the preset animation modes:

  • None
  • Opacity
  • Scale
  • Rotate clockwise
  • Rotate counter-clockwise
  • Width
  • Height
  • Translate left to right
  • Translate right to left
  • Translate top to bottom
  • Translate bottom to top

You can also customize the animation as you need it with the following settings:

Lightbox animation timing

Timing function for animation. Similar to CSS animation-timing-function

Animation timing function graph

Lightbox animation duration

Initial animation duration in seconds

Lightbox animation delay

Delay start playing animation

Overlay opacity

Overlay(ligthbox background) transparency, from 0 to 100. 0 – fully transparent, 100 – completely non-transparent

Overlay color

Overlay(lightbox background) color. You can choose one of the default colors from Instagram, or set your own color.

Arrows control

This setting enables the display of arrows to control the scrolling of images in the lightbox.

Keyboard control

This setting allows arrows on the keyboard ? ? to control the scrolling of images in the lightbox.

Lightbox links

Enable/disable link in Lightbox


Other block settings panel:

Was this article helpful to you?