<div class="row">
    <div class="col-md-12">

        <div id="mdb-lightbox-ui-{{ siteid }}" class="mdb-lightbox-container"></div>

        <div class="mdb-lightbox">

            {% for e in elements %}

                <figure class="col-md-4">
                    <a href="{{ asset('files/users/'~userid~'/gallery/'~e.id~'.jpg') }}" data-size="{{ e.width }}x{{ e.height }}">
                        <img src="{{ asset('files/users/'~userid~'/gallery/'~e.id~'_thumb.jpg') }}" class="img-fluid z-depth-1">
                    </a>
                </figure>

            {% endfor %}

        </div>
    </div>
</div>

<script type="text/javascript" src="{{ asset("./scripts/mdb/js/modules/lightbox.js") }}"></script>
<script>

    $(function () {
        $("#mdb-lightbox-ui-{{ siteid }}").load("{{ asset('./scripts/mdb/mdb-addons/mdb-lightbox-ui.html') }}");
    });

</script>