CMS

Media Gallery

Fullscreen lightbox dialog for multi-image viewing with zoom, navigation, and a thumbnail strip.

Overview

MediaGallery is a fullscreen lightbox dialog for multi-image viewing. The component is itself the dialog: open it with v-model:open, pass the image array via medias, and a required title for the dialog heading. Inside the dialog, a Swiper-driven image stage handles slide navigation, optional zoom (controlled via zoomLevel), and a ThumbnailsSlider strip for jumping between images.

Use it from a parent component (article view, brand page, product gallery) that opens the lightbox in response to a click on a representative image.

Key Business & UX Benefits

A dedicated fullscreen dialog lets shoppers and readers inspect imagery in detail without leaving the article or product page.
Optional zoom plus pan reveals fine detail on textiles, materials, and editorial photography, raising buyer confidence.
The thumbnail strip inside the dialog keeps orientation across long image sets, so readers do not lose their place mid-browse.
Editors maintain the image array in Studio, so creative teams refresh galleries on launch day without code changes.

Usage

MediaGallery Default

<MediaGallery
    v-model:open="open"
    title="Spring lookbook"
    :medias="postImages"
  />

Feature List

The component is itself the fullscreen lightbox dialog; open it with v-model:open
medias prop drives a Swiper image stage with slide navigation and optional zoom (via zoomLevel)
ThumbnailsSlider strip inside the dialog jumps between images and tracks the active slide
Required title prop sets the dialog heading; optional brand prop adds a secondary label
Closes via Escape or overlay click by default (toggle via closeOnEsc and closeOnOverlayClick)
Editors maintain the image array in Studio so creative teams refresh galleries on launch day

API Reference

Prop	Default	Type
`title`required		`string`
`medias`required		`Media[]`
`brand`		`string`
`zoomLevel`	`1`	`number`
`hasNavigationSlider`		`boolean`
`closeOnEsc`	`true`	`boolean`
`closeOnOverlayClick`	`true`	`boolean`
`open`		`boolean`

Event	Type
`update:open`	`(event: "update:open", value: boolean): void`
`close`	`(event: "close"): void`

Edit this pageorReport an issue

Editorial Grid

Editorial-style grid of cards with optional featured-card emphasis, driven by a cards array.

Email Input Form

Email field and submit button for newsletter signup. Generic enough for footers, popups, or dedicated newsletter sections.