CustomisingΒΆ

Edit the template files. I do plan on doing template tags in the future for a better experience but this is just how it is for now.

All that you absolutely need is to load the wagtail_gallery/css/lightbox.min.css at the top of the page. You will need to load wagtail_gallery/js/jquery.min.js before wagtail_gallery/js/lightbox.min.js static files in the wagtail_gallery/gallery_page.html template.

To actually render the gallery and lightbox script add the following:

<script>
    lightbox.option({
        'alwaysShowNavOnTouchDevices': true,
        'wrapAround': true
    })
</script>

{% for img in page.gallery_image.all %}
    {% image img.image fill-400x300-c100 as header_image %}
        <a class="d-block mb-4 h-100" href="{{ img.image.file.url }}" data-lightbox="{{ page.title }}"
           data-title="{{ img.description }}">
            <img class="img-raised rounded img-fluid" src="{{ header_image.url }}">
        </a>
{% endfor %}

There is only a small amount of customisation available of both how the lightbox looks and functions, see: Lightbox JS docs