<article class="post">
  <h1 class="uk-text-center">UIkit lightbox with indicators</h1>
  <div class="uk-container">
    <div class="uk-child-width-1-2@s" uk-grid>
      <div>
        <figure>
          <a href="https://assets.codepen.io/162656/ireland1.jpg" data-caption="Ring of Kerry, County Kerry, Ireland" data-alt="Ring of Kerry, County Kerry, Ireland">
            <img width="1920" height="1280" data-src="https://assets.codepen.io/162656/ireland1.jpg" alt="Ring of Kerry, County Kerry, Ireland" uk-img>
          </a>
        </figure>
      </div>
      <div>
        <figure>
          <a href="https://assets.codepen.io/162656/ireland2.jpg" data-caption="Fintown, Ireland" data-alt="Fintown, Ireland">
            <img width="1920" height="1280" data-src="https://assets.codepen.io/162656/ireland2.jpg" alt="Fintown, Ireland" uk-img>
          </a>
        </figure>
      </div>
      <div>
        <figure>
          <a href="https://assets.codepen.io/162656/ireland3.jpg" data-caption="Anne Street, Dublin, Ireland" data-alt="Anne Street, Dublin, Ireland">
            <img width="1920" height="1280" data-src="https://assets.codepen.io/162656/ireland3.jpg" alt="Anne Street, Dublin, Ireland" uk-img>
          </a>
        </figure>
      </div>
      <div>
        <figure>
          <a href="https://assets.codepen.io/162656/ireland4.jpg" data-caption="Doonagore Castle, Doolin, Ireland" data-alt="Doonagore Castle, Doolin, Ireland">
            <img width="1920" height="1280" data-src="https://assets.codepen.io/162656/ireland4.jpg" alt="Doonagore Castle, Doolin, Ireland" uk-img>
          </a>
        </figure>
      </div>
    </div>
  </div>
</article>

<footer class="page-footer">
  <span>made by </span>
  <a href="https://georgemartsoukos.com/" target="_blank">
    <img width="24" height="24" src="https://assets.codepen.io/162656/george-martsoukos-small-logo.svg" alt="George Martsoukos logo">
  </a>
</footer>

body {
  margin: 40px 0;
}

.uk-position-top-center {
  top: 20px;
}


/* FOOTER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
  position: fixed;
  right: 0;
  bottom: 20px;
  display: flex;
  align-items: center;
  font-size: 1rem;
  padding: 5px;
  background: rgba(255, 255, 255, 0.65);
}

.page-footer a {
  display: flex;
  margin-left: 9px;
}

const postLightbox = UIkit.lightbox(".post");
const ukActiveClass = "uk-active";

UIkit.util.on(document, "beforeshow", function (e) {
  const target = e.target;
  const lightboxItems = target.querySelectorAll(".uk-lightbox-items li").length;
  let markup = '<ul class="uk-dotnav">';
  for (let i = 0; i < lightboxItems; i++) {
    markup += '<li><a href=""></a></li>';
  }
  markup += "</ul>";
  const dotNav = document.createElement("div");
  dotNav.setAttribute("class", "uk-position-top-center");
  dotNav.innerHTML = markup;
  target.appendChild(dotNav);
  target.classList.add("uk-light");
});

UIkit.util.on(document, "itemshown", function (e) {
  const target = e.target;
  const dotNav = document.querySelector(".uk-dotnav");
  const dotNavActiveItem = dotNav.querySelector("li.uk-active");
  if (dotNavActiveItem) {
    dotNavActiveItem.classList.remove(ukActiveClass);
  }
  let index = [...target.parentElement.children].indexOf(target);
  dotNav.querySelector(`li:nth-child(${++index})`).classList.add(ukActiveClass);
});

document.addEventListener("click", function (e) {
  const target = e.target;
  if (target.tagName.toLowerCase() === "a" && target.closest(".uk-dotnav")) {
    e.preventDefault();
    const parentListItem = target.parentElement;
    const index = [...parentListItem.parentElement.children].indexOf(
      parentListItem
    );
    postLightbox.show(index);
  }
});