Lightbox

Available as: Web ComponentShortcodeOxygen Element

Creates a lightbox for images.

<spx-tailwind> <spx-lightbox body-overflow="false" spx-slider='{"slides-per-view":"2","gap":"20"}' class="w-full h-full"> <div class="grid grid-cols-3 gap-2"> {% for item in example.images %} <img class="w-full h-32 object-cover rounded-xl" src="{{ item }}" alt="" /> {% endfor %} </div> </spx-lightbox> </spx-tailwind>

Properties

body-overflow

Type: booleanDefault: true

If 'overflow: hidden' should be applied to the body when a lightbox is open.

close-button

Type: booleanDefault: true

Show close button.

close-button-color

Type: stringDefault: #ffffffCSS Variable: --spx-lightbox-close-button-color

overlay-backdrop-filter

Type: stringDefault: var(--spx-backdrop-filter)CSS Variable: --spx-lightbox-overlay-backdrop-filter

overlay-background

Type: stringDefault: rgba(0,0,0,0.8)CSS Variable: --spx-lightbox-overlay-background

spx-slider

Type: string

Pass attributes to the inner <spx-slider> component using a JSON string: { "slides-per-view": "2.5" }

target

Type: stringDefault: img

Target element. Can take any querySelector value. (id, class, tag etc.)

Events

spxLightboxDidLoad

Fires after component has loaded.