Galleries
The gallery lays out pictures as a grid, as masonry columns or as justified rows like a photo library, and only draws what is on screen, so ten thousand pictures scroll as smoothly as ten. Group them by day, month or year, sort them, search their titles, tags and captions, and select some with the mouse, the keyboard or a long press for your own actions.
Open one into the lightbox: zoom with the wheel, a pinch, a double click or the keys, pan, swipe to the next, play a slideshow, read the details, download. A before-and-after pair shows both with a handle to drag between them, and a video plays where it sits. Every picture has its text alternative; the gallery is a grid you can move through with the arrow keys.
A photo club's year
Twenty-five pictures and a video, grouped by month with the newest first. Open one and zoom, swipe, play the slideshow or open its details; the glacier lake is a before-and-after pair. Search or change the layout from the toolbar, and select a few with the tick in each corner.
Get the code
<script src="/assets/bmx-components.min.js"></script>
<bmx-gallery id="gl-club" toolbar selectable download group-by="month" sort="date-desc" item-size="200" label="Photo club, 2026" style="inline-size: 100%; --bmx-gallery-height: 34rem"></bmx-gallery>
<script>
const gallery = document.getElementById('gl-club');
gallery.items = [ /* your items */ ];
</script>
Prints for sale
The same pictures as a shop's square grid, with captions below and an action on each: add a print to the basket from the picture or from the lightbox. Switch between grid, masonry and justified rows.
<bmx-gallery layout="grid" cell-aspect="1" captions="below"></bmx-gallery>
gallery.items = prints.map(p => ({ id: p.sku, src: p.image, thumb: p.thumb, width: p.w, height: p.h, title: p.name, alt: p.name, caption: `A3 print, £${p.price}` }));
gallery.actions = [{ id: 'basket', label: 'Add to basket', icon: '+' }];
gallery.addEventListener('bmxAction', e => basket.add(e.detail.item.id));