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'}])

The lightbox is opened by an image trigger supplied by the host page, so it has no standalone preview.

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):
        self.component.open = False

    @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 its script on the page: <script src="{% static 'djust_components/image-lightbox.js' %}"></script>. djust ships it; without it the markup renders but does not update in the browser.

Parameters

Name	Type	Default	Description
images	list \| None	None	list of dicts with ``src`` and optional ``alt``/``caption``
active	int	0	index of currently displayed image (default 0)
open	bool	False	whether lightbox is visible (default False)
close_event	str — renames the event; identity is `name`	'close_lightbox'	djust event to close (default "close_lightbox")
navigate_event	str — renames the event; identity is `name`	'lightbox_navigate'	djust event on nav (default "lightbox_navigate")
show_counter	bool	True	show "N of M" counter (default True)
custom_class	str	''	additional CSS classes
**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 2041, 2042, 2043, 2044, 2045, 2046, 2047, 2051. 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