Crreate gallery using uikit lightbox.

uikit-gallery.html

<div>
	<a href="img_1.jpg" data-uk-gallery></a>
	<a href="img_2.jpg" data-uk-gallery></a>
	<a href="img_3.jpg" data-uk-gallery></a>
</div>

<div>
	<a href="img_1.jpg" data-uk-gallery="cars"></a>
	<a href="img_2.jpg" data-uk-gallery="cars"></a>
	<a href="img_3.jpg" data-uk-gallery="cars"></a>
</div>

<style>
// Dynamic lightbox mobile fix
@media(max-width: 480px) {

    .uk-lightbox-items img {
        width: 90%;
        height: auto;
    }

}
</style>

<script>
window.addEventListener("DOMContentLoaded", function() {
    uikitGallery();
    uikitGallery("cars");
});
</script>

uikit-gallery.js

/**
 *  Uikit Gallery
 *  @param {string} group
 *  @example <a href="image.jpg" data-uk-gallery=""></a>
 * 
 */
function uikitGallery(group = "") {

    let selector = (group == '') ? "a[data-uk-gallery]" : `a[data-uk-gallery="${group}"]`;

    var elements = document.querySelectorAll(selector);
    var i = 0;   


    elements.forEach(el => {

        var index = i++;

        el.addEventListener("click", e => {

            e.preventDefault();

            let items = [];
            
            for (var i = 0; i < elements.length; i++) {
                let img = elements[i].getAttribute("href");
                let imgObj = {source: img};
                items.push(imgObj);
            }

            // console.log(items);

            
            UIkit.lightboxPanel({
                items: items,
                animation: 'scale',
            }).show(index);

        });

    });

}