# Lightbox API Reference

See Source

See Output

Open

[code]

    def ex_lightbox1():
        return LightboxContainer(
            LightboxItem(Button("Open"), href='https://picsum.photos/id/100/1280/720.webp', data_alt='A placeholder image to demonstrate the lightbox', data_caption='This is my super cool caption'),
        )
    
[/code]

See Source

See Output

Open

[code]

    def ex_lightbox2():
        return LightboxContainer(
            LightboxItem(Button("Open"), href='https://picsum.photos/id/100/1280/720.webp', data_alt='A placeholder image to demonstrate the lightbox', data_caption='Image 1'),
            LightboxItem(href='https://picsum.photos/id/101/1280/720.webp', data_alt='A placeholder image to demonstrate the lightbox', data_caption='Image 2'),
            LightboxItem(href='https://picsum.photos/id/102/1280/720.webp', data_alt='A placeholder image to demonstrate the lightbox', data_caption='Image 3'),
        )
    
[/code]

See Source

See Output

mp4YoutubeVimeoIframe

[code]

    def ex_lightbox3():
        return LightboxContainer(
            LightboxItem(Button("mp4"), href='https://yootheme.com/site/images/media/yootheme-pro.mp4'),
            LightboxItem(Button("Youtube"), href='https://www.youtube.com/watch?v=c2pz2mlSfXA'),
            LightboxItem(Button("Vimeo"), href='https://vimeo.com/1084537'),
            LightboxItem(Button("Iframe"), data_type='iframe', href='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4740.819266853735!2d9.99008871708242!3d53.550454675412404!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x3f9d24afe84a0263!2sRathaus!5e0!3m2!1sde!2sde!4v1499675200938'))
    
[/code]

### LightboxContainer

Source

[code]

    LightboxContainer(*lightboxitem, data_uk_lightbox='counter: true', **kwargs) -> fastcore.xml.FT
[/code]

> Lightbox container that will hold `LightboxItems`

**Params**

  * `lightboxitem` `LightBoxItem`s that will be inside lightbox

  * `data_uk_lightbox` See https://franken-ui.dev/docs/2.0/lightbox for advanced options

  * `kwargs`

**Returns:** Lightbox

### LightboxItem

Source

[code]

    LightboxItem(*c, href, data_alt=None, data_caption=None, cls='', **kwargs) -> fastcore.xml.FT
[/code]

> Anchor tag with appropriate structure to go inside a `LightBoxContainer`

**Params**

  * `c` Component that when clicked will open the lightbox (often a button)

  * `href` Href to image, youtube video, vimeo, google maps, etc.

  * `data_alt` Alt text for the lightbox item/image

  * `data_caption` Caption for the item that shows below it

  * `cls` Class for the A tag (often nothing or `uk-btn`)

  * `kwargs`

**Returns:** A(... href, data_alt, cls., ...)