Minimal SEO-friendly Image Lightbox In Vanilla JavaScript

Preview:

Description:

A minimal image lightbox JavaScript library that uses semantic figure and figcaption tags for better SEO & accessibility.

How to use it:

1. Import the JavaScript lightbox.js and Stylesheet lightbox.css into the document.

<link rel="stylesheet" href="assets/css/lightbox.css" />
<script defer src="assets/js/lightbox.js"></script>

2. Wrap your image into a container with the CSS class of ‘lightbox’ and define your own description in the figcaption.

<div class="lightbox">
  <figure>
    <img src="1.jpg" />
    <figcaption>Image Description</figcaption>
  </figure>
</div>

Changelog:

09/17/2021

• Fixed z-index issue with modal.