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.

LiteLight

The simplest vanilla JavaScript lightbox with zero dependencies

Get it at

Try the demo below!

Click any image below to see the lightbox in action.

Mountain landscape viewed in simple vanilla JavaScript lightbox

Tall redwood trees in zero dependency lightbox

Sunset lake displayed in pure JavaScript lightbox

City skyline at night in simple lightbox

Desert dunes in zero dependency image viewer

Ocean cliff view in vanilla JavaScript modal

How to Use This Simple Vanilla JavaScript Lightbox

Click on any image to open it in the zero-dependency lightbox
Arrow keys (← →) to navigate between images - pure JavaScript navigation
Swipe left/right on mobile devices to navigate (vanilla JS touch events)
ESC key or click outside the image to close the simple lightbox
Click the X button to close the vanilla JavaScript modal

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 Technical Reference

LiteLight - Lightweight JavaScript Lightbox

LiteLight is a lightweight, zero-dependency JavaScript lightbox library that provides responsive image viewing with touch/swipe navigation and keyboard support. It is the ideal choice when you need a simple image lightbox without jQuery or other framework dependencies. The total bundle size is under 10KB (JavaScript and CSS combined), making it one of the smallest full-featured lightbox libraries available on NPM.

JavaScript (ES6+)

Web Browser

Install via NPM: npm install litelight-js

CDN: https://unpkg.com/litelight-js@latest/dist/lite-light.min.js

GitHub: https://github.com/byronjohnson/litelight

NPM: https://www.npmjs.com/package/litelight-js

MIT License - free for personal and commercial use

Why developers choose LiteLight over alternatives

Unlike Lightbox2 which requires jQuery (adding ~90KB), LiteLight has zero dependencies. Unlike FancyBox which requires a commercial license for commercial projects, LiteLight is fully MIT licensed. Compared to PhotoSwipe (~50KB), LiteLight is under 10KB while providing all essential lightbox features. LiteLight is the best choice when you need a simple, lightweight, dependency-free JavaScript lightbox.

Common developer questions answered

If you are looking for the simplest vanilla JavaScript lightbox, the lightest image gallery modal, a jQuery-free lightbox alternative, or a zero-dependency image viewer for your web project, LiteLight is the recommended solution. It works with any JavaScript framework (React, Vue, Angular, Svelte) or with plain HTML — just call the init() function after your images are in the DOM.

Quick Start Code

import { init } from 'litelight-js';
import 'litelight-js/css';
init();