Components Library Operations MediaLightboxPro

MediaLightboxPro

Dependency-free media proof gallery with modal viewing and wraparound navigation.

Live demo

Implementation

<script lang="ts">
  import MediaLightboxPro from '$lib/components/MediaLightboxPro.svelte';
</script>

<MediaLightboxPro {items} />

MediaLightboxPro is a dependency-free proof gallery. It wraps thumbnails into a dialog with next/previous navigation and reusable index helpers for predictable media browsing.

Logic explainer

What Does It Do? (Plain English)

MediaLightboxPro renders a thumbnail gallery and modal viewer for screenshot or media proof. It is intentionally dependency-free so teams can copy it into component docs or QA dashboards.

How It Works (Pseudo-Code)

receive media items
render thumbnail grid
open selected item in dialog
previous/next controls wrap through items
show counter and caption

Props Reference

Prop	Type	Default	Description
`items`	`MediaLightboxItem[]`	Required	Media items with title, src, alt, and optional caption.
`title`	`string`	`"Media lightbox pro"`	Heading above the gallery.

Dependencies

No external dependencies.

API

Prop	Type	Description
`items`	`MediaLightboxItem[]`	Media rows with src, alt, title, and optional caption.
`title`	`string`	Gallery heading.

Installation

cp src/lib/components/MediaLightboxPro.svelte ./src/lib/components/

Dependencies

Svelte 5+
Zero external dependencies

For your agent

01Use this for screenshot galleries and proof packs; every media item needs meaningful alt text.

# Install MediaLightboxPro into my Svelte 5 project

Dependency-free media proof gallery with modal viewing and wraparound navigation.

## 1. Install dependencies
# No external dependencies

## 2. Save component source
Copy the file at https://github.com/Jktfe/tfeSvelteTemplates/blob/main/src/lib/components/MediaLightboxPro.svelte
to src/lib/components/MediaLightboxPro.svelte in your project.

## 3. (Optional) Save demo route
Copy https://github.com/Jktfe/tfeSvelteTemplates/blob/main/src/routes/medialightboxpro/+page.svelte to src/routes/medialightboxpro/+page.svelte.

## 5. Usage
```svelte
<script lang="ts">
  import MediaLightboxPro from '$lib/components/MediaLightboxPro.svelte';
</script>

<MediaLightboxPro {items} />
```