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
Forest waterfall in vanilla JS lightbox
City skyline at night in simple lightbox
Desert dunes in zero dependency image viewer
Ocean cliff view in vanilla JavaScript modal
Starry night sky in simple JS lightbox

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();