How do I create a Lightbox with images called from an array?

  arrays, javascript, lightbox, uikit

I’m trying to implement a Lightbox gallery where clicking an image link launches a slideshow of images that are loaded from an array, not from inline content on the page. All the examples I can find use a group of inline images. I am using a framework called UIkit (https://https://getuikit.com/docs/introduction) which has a "lightbox" class.

My Html looks like this:

<div class="[email protected]" uk-grid uk-lightbox="animation: fade">
    <div>
        <a class="uk-inline" href="images/dark.jpg">
            <img src="images/photo.jpg" alt="">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="images/light.jpg">
            <img src="images/dark.jpg" alt="">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="images/photo.jpg">
            <img src="images/light.jpg" alt="">
        </a>
    </div>
</div>

Can anyone think of a way to implement the lightbox using the images called from the array so we don’t have to see each individual image on the actual page (one image links to a lightbox containing more of that theme) and what the JS/html would look like?

Thank you in advance! Still new to JS and learning! : )

Source: Ask Javascript Questions

LEAVE A COMMENT