animaltrack/docs/vendor/monsterui/api_ref/docs_lightbox.md

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 LightBoxItems 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., ...)