Minimal SEO-friendly Image Lightbox In Vanilla JavaScript

Category: Javascript , Modal & Popup | January 9, 2023
Author:khimsh
Views Total:135 views
Official Page:Go to website
Last Update:January 9, 2023
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:

01/09/2024

  • Code optimized

09/17/2021

  • Fixed z-index issue with modal.

You Might Be Interested In:


Leave a Reply