Image Lightbox

Full-screen image viewer overlay with navigation.

python 8 params

open

image_lightbox(open=True, images=[{'src': "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='270'><rect width='100%' height='100%' fill='%2334473a'/><text x='50%' y='50%' fill='%23edf1ed' font-family='sans-serif' font-size='28' text-anchor='middle' dominant-baseline='middle'>1</text></svg>", 'alt': 'First slide', 'caption': 'First'}, {'src': "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='270'><rect width='100%' height='100%' fill='%2334473a'/><text x='50%' y='50%' fill='%23edf1ed' font-family='sans-serif' font-size='28' text-anchor='middle' dominant-baseline='middle'>2</text></svg>", 'alt': 'Second slide', 'caption': 'Second'}])

Usage

views.py

from djust import LiveView
from djust.decorators import event_handler
from djust.components import ImageLightbox


class MyView(LiveView):
    template_name = "my_template.html"

    def mount(self, request, **kwargs):
        self.component = ImageLightbox(open=True, images=[{'src': "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='270'><rect width='100%' height='100%' fill='%2334473a'/><text x='50%' y='50%' fill='%23edf1ed' font-family='sans-serif' font-size='28' text-anchor='middle' dominant-baseline='middle'>1</text></svg>", 'alt': 'First slide', 'caption': 'First'}, {'src': "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='270'><rect width='100%' height='100%' fill='%2334473a'/><text x='50%' y='50%' fill='%23edf1ed' font-family='sans-serif' font-size='28' text-anchor='middle' dominant-baseline='middle'>2</text></svg>", 'alt': 'Second slide', 'caption': 'Second'}])

    @event_handler()
    def close_lightbox(self, **kwargs):
        ...  # write to self.component; the re-render carries it

    @event_handler()
    def lightbox_navigate(self, value, **kwargs):
        self.component.active = value

my_template.html

{{ component }}

Events this component sends to the view: close_lightbox, lightbox_navigate.

Needs a client hook djust does not ship: dj-hook="ImageLightbox". The markup renders, but the interaction described above is yours to add — register window.djust.hooks.ImageLightbox = { mounted() { … } } before client.js loads (see the hooks guide).

Parameters

Name	Type	Default
images	list \| None	None
active	int	0
open	bool	False
close_event	str — renames the event; identity is `name`	'close_lightbox'
navigate_event	str — renames the event; identity is `name`	'lightbox_navigate'
show_counter	bool	True
custom_class	str	''
**kwargs	— passed to `Component.__init__`: `name=` identifies the instance in the events it sends, `id=` sets `component.id`, and any other keyword is kept as state	—

Source & styles

File	Path	Notes
module	djust.components.components.image_lightbox	Subclass it, or pass custom_class, to change how it renders.
css	djust_components/components.css	Defines 9 of this component's classes at line 1991, 1992, 1993, 1994, 1995, 1996, 1997, 2001. Override those rules, or the custom properties they read, in a stylesheet loaded after it.
css	djust_theming/catalogue.css	Defines 1 of this component's classes at line 158. Override those rules, or the custom properties they read, in a stylesheet loaded after it.

Image Lightbox

Preview

Usage

Parameters