Minimal SEO-friendly Image Lightbox In Vanilla JavaScript

Category: Javascript , Modal & Popup | September 17, 2021
Author:khimsh
Views Total:456 views
Official Page:Go to website
Last Update:September 17, 2021
License:MIT

Preview:

Minimal SEO-friendly Image Lightbox In Vanilla JavaScript

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.

You Might Be Interested In:


Leave a Reply