Lightbox

A full-screen overlay image viewer. Supports keyboard navigation (← / → to navigate, Esc to close), click-backdrop-to-close, and can be opened programmatically. Can be pre-populated from PHP or supplied at open-time via JavaScript.

Standalone Lightbox

A lightbox pre-loaded with six Unsplash images. Click any thumbnail below to open it at that image.

Click a thumbnail to open the lightbox...

// PHP: Pre-load images into the lightbox
$lb = $m->lightbox('photoLightbox');
$lb->addImage('https://example.com/photo1.jpg', 'Mountain sunset')
   ->addImage('https://example.com/photo2.jpg', 'Ocean view')
   ->addImage('https://example.com/photo3.jpg', 'Forest trail');
echo $lb;

// Open at a specific index
var lb = m.lightbox('photoLightbox');
lb.show(0);   // first image

// Or supply images dynamically at open time
lb.show(2, [
    { src: '/img/a.jpg', caption: 'Image A' },
    { src: '/img/b.jpg', caption: 'Image B' },
    { src: '/img/c.jpg', caption: 'Image C' },
]);

// Navigate
lb.prev();
lb.next();
lb.hide();

// Listen to events
document.getElementById('photoLightbox').addEventListener('m:lightbox:change', function(e) {
    console.log('Now at index', e.detail.index);
});

Single Image Lightbox

A lightbox can hold a single image — navigation arrows are hidden automatically. Useful for enlarging a single photo or diagram.

// Single image — no navigation arrows shown
echo $m->lightbox('singleLb')
    ->addImage('https://example.com/hero.jpg', 'Hero image');

var lb = m.lightbox('singleLb');
lb.show(0);

PHP PHP Methods (Fluent)

Method / Property	Parameters	Description
`$m->lightbox($id)`	`Lightbox`	Create a Lightbox component.
`->addImage($src, $caption, $thumb)`	`self`	Pre-populate with an image. `$caption` and `$thumb` are optional.

JS JS Methods

Method / Property	Parameters	Description
`m.lightbox(id)`	`object`	Initialise (or retrieve) lightbox instance.
`lb.show(index, images)`		Open at `index`. `images` is an optional `[{src, caption}]` array that overrides pre-loaded images.
`lb.hide()`		Close the lightbox.
`lb.prev()`		Go to previous image.
`lb.next()`		Go to next image.
`lb.getIndex()`	`number`	Return the current image index.

EVENT Events

Event Name	Detail	Description
`m:lightbox:open`	`{ index }`	Fired when the lightbox opens.
`m:lightbox:close`	`{}`	Fired when the lightbox closes.
`m:lightbox:change`	`{ index }`	Fired when the active image changes.