Back

Gallery

3-column Grid

Image 1
Image 2
Image 3
Image 4
Image 5
Image 6

With Lightbox Integration

Click any image to open the full-screen viewer.

Image A
Image B
Image C
Image D

Usage

// Without lightbox:
@media.Gallery(media.GalleryProps{Columns: "3", Gap: "gap-3"}) {
    @media.GalleryItem(media.GalleryItemProps{Src: "/img/1.jpg", Alt: "..."}, media.GalleryProps{})
}

// With lightbox:
@media.Lightbox(media.LightboxProps{}) {
    @media.Gallery(media.GalleryProps{Columns: "3", WithLightbox: true}) {
        @media.GalleryItem(media.GalleryItemProps{Src: "/img/1.jpg", Alt: "..."}, media.GalleryProps{WithLightbox: true})
    }
}