solid-lightbox

Lightweight image/video gallery lightbox for SolidJS.

Features

• Fullscreen image & video preview
• Thumbnail strip navigation
• Zoom (wheel, double-click, +/- buttons)
• Pan when zoomed
• Swipe navigation between items
• Keyboard shortcuts (arrows, Esc, +/-, 0)
• Programmatic API (openGallery, openLightbox, closeLightbox)
• Zero dependencies (only solid-js peer dep)
• MIT license

Install

npm install solid-lightbox solid-js

Usage

Programmatic API (recommended)

import { openGallery, openLightbox } from 'solid-lightbox'
import 'solid-lightbox/styles.css'

// Single image
openLightbox({ src: '/photo.jpg' })

// Gallery with thumbnails
openGallery([
  { src: '/photo1.jpg', thumb: '/thumb1.jpg', caption: 'First' },
  { src: '/photo2.jpg', thumb: '/thumb2.jpg', caption: 'Second' },
  { src: '/video.mp4', type: 'video/mp4' },
], 0) // start at index 0

Declarative component

import { Lightbox } from 'solid-lightbox'
import 'solid-lightbox/styles.css'

<Lightbox
  items={items()}
  index={currentIndex()}
  open={isOpen()}
  onClose={() => setIsOpen(false)}
  maxZoom={4}
/>

LightboxItem

type LightboxItem = {
  src: string
  thumb?: string
  alt?: string
  width?: number
  height?: number
  caption?: string
  type?: string // MIME type, e.g. 'video/mp4'
}

License

MIT