Lightbox

Lightbox is a type of format. Designers can create two different designs like a Fully Fluid Format and a Lightbox Format. This allows showing completely two different designs based on a certain event.

How to open a Lightbox

There are two ways of opening a Lightbox:

• Adding a click action from the editor.
• Using the Radical API to open the Lightbox format.

const extLightBox = rad.getExtension('lightbox')
extLightBox.open()

Closing the Lightbox

There are two ways of closing a Lightbox:

• Adding a click action from the editor.
• Using the Radical API to close the Lightbox format.

const extLightBox = rad.getExtension('lightbox')
extLightBox.close()

Accessing the Lightbox instance

When a Lightbox Format is opened, it triggers the onAdRender function. If you need to access the Lightbox instance, you can use the onAdRender function after opening it.

Here is an example of how to access the Lightbox instance:

lightboxButton.addEventListener('click', () => {
  rad.setState({
    isLightboxMode: true,
  })
  extLightBox.open()
})

Inside the onAdRender function:

function onAdRender() {
  const isLightboxMode = rad.getState().isLightboxMode
  if (isLightboxMode) {
    // run JavaScript code here
  }
}