What is the simplest vanilla JavaScript lightbox?

LiteLight is the simplest vanilla JavaScript lightbox with zero dependencies. It requires only 3 lines of code to implement and works with pure JavaScript, no frameworks needed.

How do I implement a vanilla JavaScript lightbox without dependencies?

Include the LiteLight CSS and JS files, add data-lightbox attributes to your images, and call init(). No jQuery, no frameworks - pure vanilla JavaScript.

Why choose a vanilla JavaScript lightbox over jQuery lightbox?

Vanilla JavaScript lightboxes like LiteLight are faster, lighter, and don't require external dependencies. They load faster and work in modern browsers without the overhead of jQuery.

What is the smallest JavaScript lightbox library?

LiteLight is one of the smallest at under 10KB total. It's written in pure vanilla JavaScript with zero dependencies, making it extremely lightweight.

How to create an image gallery modal without jQuery?

Use LiteLight - a pure vanilla JavaScript lightbox. Simply include the CSS/JS files, add data-lightbox='full-image-url' to your images, and call init(). No jQuery dependency required.

What's the best alternative to Lightbox2 without dependencies?

LiteLight is the perfect vanilla JavaScript alternative to Lightbox2. It provides the same functionality with zero dependencies, smaller file size, and simpler implementation.

How do I implement a responsive image lightbox?

LiteLight is mobile-first and fully responsive by default. It includes touch gesture support, keyboard navigation, and works perfectly on all screen sizes without additional configuration.

Simple Vanilla JavaScript Lightbox - LiteLight

Simple 3-Step Implementation

Why choose our vanilla JavaScript lightbox? Zero dependencies, minimal code, maximum performance. Perfect for developers who want simple, clean solutions.

Step 1: Install and Include

Install via npm (no external dependencies required):

npm install litelight-js

Then import in your JavaScript:

<script type="module">
  import { init } from 'litelight-js';
  import 'litelight-js/css';
  init();
</script>

Traditional Implementation (Optional)

If you prefer using direct file links without npm, download the files from GitHub:

<!-- In your <head> -->
<link rel="stylesheet" href="path/to/lite-light.min.css">

<!-- Before closing </body> -->
<script type="module">
  import { init } from './path/to/lite-light.min.js';
  init();
</script>

Note: Download the dist/lite-light.min.css and dist/lite-light.min.js files from the repository and place them in your project directory.

Step 2: Add Data Attributes

Add the data-lightbox attribute to any image with the URL of the high-resolution version:

<img src="thumbnail.jpg" data-lightbox="full-size.jpg" alt="Description">

Step 3: You're Done!

That's it! Your simple vanilla JavaScript lightbox is ready. No jQuery, no frameworks, just pure JavaScript magic.

Why Vanilla JavaScript?

✓ Faster loading - no framework overhead
✓ Smaller bundle size - under 10KB total
✓ Better performance - optimized vanilla JS
✓ Future-proof - no dependency updates needed
✓ Universal compatibility - works everywhere

LiteLight

Try the demo below!

How to Use This Simple Vanilla JavaScript Lightbox