BzLightbox

Lightbox & gallery

An image gallery with a full-screen viewer.

Image gallery

Just hand it a list of image URLs. Clicking any image opens the full-screen viewer.

Click any image to enlarge; use the arrow keys to move between them.

Parameter	Type	Description
`Images`	`List<string>`	Image URLs — local or remote

razor

@using BzCore.Components.Overlay

<BzLightbox Images="_imgs" />

@code {
    private List<string> _imgs = new()
    {
        "https://picsum.photos/seed/n1/400/300",
        "https://picsum.photos/seed/n2/400/300",
        "https://picsum.photos/seed/n3/400/300",
        "https://picsum.photos/seed/n4/400/300",
    };
}

Gallery from local files

Same component, just with paths under wwwroot.

razor

@using BzCore.Components.Overlay

<BzLightbox Images="_local" />

@code {
    // Files live under wwwroot/images/
    private List<string> _local = new()
    {
        "/images/photo-1.jpg",
        "/images/photo-2.jpg",
        "/images/photo-3.jpg",
    };
}