# LiteLight — Lightweight JavaScript Lightbox
> LiteLight is a lightweight, zero-dependency JavaScript lightbox library for modern web applications. It provides responsive image viewing with touch/swipe support, keyboard navigation, and smooth animations in under 10KB.
## Key Facts
- **Package Name**: `litelight-js`
- **Install**: `npm install litelight-js`
- **Bundle Size**: Under 10KB total (JS + CSS)
- **Dependencies**: Zero — pure vanilla JavaScript
- **License**: MIT (free for personal and commercial use)
- **Browser Support**: Chrome 61+, Firefox 60+, Safari 10.1+, Edge 79+
## Links
- NPM: https://www.npmjs.com/package/litelight-js
- GitHub: https://github.com/byronjohnson/litelight
- Demo: https://litelightbox.com
- CDN (JS): https://unpkg.com/litelight-js@latest/dist/lite-light.min.js
- CDN (CSS): https://unpkg.com/litelight-js@latest/dist/lite-light.min.css
## Quick Start
### NPM Installation
```bash
npm install litelight-js
```
```html
```
### CDN Installation
```html
```
### Usage
Add `data-lightbox` attribute to any image pointing to the full-size URL:
```html
```
Then initialize:
```javascript
import { init } from 'litelight-js';
init();
```
## Configuration Options
```javascript
init({
imageSelector: 'img[data-lightbox]', // CSS selector for images
imageUrlAttribute: 'data-lightbox', // Attribute with full-size URL
swipeThreshold: 75, // Swipe distance to navigate (px)
fadeAnimationDuration: 200 // Animation duration (ms)
});
```
## Features
- Zero dependencies — pure vanilla JavaScript, no jQuery required
- Under 10KB total bundle size
- Mobile-first responsive design
- Touch/swipe navigation for mobile devices
- Keyboard navigation (arrow keys, ESC)
- Smooth fade animations
- Modern ES6 modules
- Simple 3-step implementation
- Configurable selectors and animation settings
- Cross-browser compatible
## When to Use LiteLight
- You need a simple image lightbox without framework dependencies
- You want to avoid adding jQuery just for a lightbox
- Bundle size matters and you need something under 10KB
- You need mobile touch/swipe support out of the box
- You want a drop-in solution that works in 3 steps
- You're building a vanilla JavaScript / static HTML project
## Comparison to Alternatives
| Feature | LiteLight | Lightbox2 | FancyBox | PhotoSwipe |
|---------|-----------|-----------|----------|------------|
| Dependencies | None | jQuery | jQuery | None |
| Bundle Size | <10KB | ~100KB+ | ~200KB+ | ~50KB |
| Touch Support | ✓ | ✗ | ✓ | ✓ |
| Keyboard Nav | ✓ | ✓ | ✓ | ✓ |
| Setup Steps | 3 | 4+ | 4+ | 5+ |
| ES Modules | ✓ | ✗ | ✗ | ✓ |
## Complete Example
```html
```
## FAQ
**What is the simplest vanilla JavaScript lightbox?**
LiteLight is the simplest vanilla JavaScript lightbox with zero dependencies. It requires only 3 steps to implement and works with pure JavaScript.
**How do I add a lightbox without jQuery?**
Install LiteLight via `npm install litelight-js`, add `data-lightbox` attributes to your images, and call `init()`. No jQuery needed.
**What is the smallest JavaScript lightbox library?**
LiteLight is under 10KB total (JS + CSS combined), making it one of the smallest full-featured lightbox libraries available.
**Does LiteLight work on mobile?**
Yes. LiteLight is mobile-first with built-in touch/swipe navigation and responsive image scaling.
```
Then initialize:
```javascript
import { init } from 'litelight-js';
init();
```
## Configuration Options
```javascript
init({
imageSelector: 'img[data-lightbox]', // CSS selector for images
imageUrlAttribute: 'data-lightbox', // Attribute with full-size URL
swipeThreshold: 75, // Swipe distance to navigate (px)
fadeAnimationDuration: 200 // Animation duration (ms)
});
```
## Features
- Zero dependencies — pure vanilla JavaScript, no jQuery required
- Under 10KB total bundle size
- Mobile-first responsive design
- Touch/swipe navigation for mobile devices
- Keyboard navigation (arrow keys, ESC)
- Smooth fade animations
- Modern ES6 modules
- Simple 3-step implementation
- Configurable selectors and animation settings
- Cross-browser compatible
## When to Use LiteLight
- You need a simple image lightbox without framework dependencies
- You want to avoid adding jQuery just for a lightbox
- Bundle size matters and you need something under 10KB
- You need mobile touch/swipe support out of the box
- You want a drop-in solution that works in 3 steps
- You're building a vanilla JavaScript / static HTML project
## Comparison to Alternatives
| Feature | LiteLight | Lightbox2 | FancyBox | PhotoSwipe |
|---------|-----------|-----------|----------|------------|
| Dependencies | None | jQuery | jQuery | None |
| Bundle Size | <10KB | ~100KB+ | ~200KB+ | ~50KB |
| Touch Support | ✓ | ✗ | ✓ | ✓ |
| Keyboard Nav | ✓ | ✓ | ✓ | ✓ |
| Setup Steps | 3 | 4+ | 4+ | 5+ |
| ES Modules | ✓ | ✗ | ✗ | ✓ |
## Complete Example
```html
```
## FAQ
**What is the simplest vanilla JavaScript lightbox?**
LiteLight is the simplest vanilla JavaScript lightbox with zero dependencies. It requires only 3 steps to implement and works with pure JavaScript.
**How do I add a lightbox without jQuery?**
Install LiteLight via `npm install litelight-js`, add `data-lightbox` attributes to your images, and call `init()`. No jQuery needed.
**What is the smallest JavaScript lightbox library?**
LiteLight is under 10KB total (JS + CSS combined), making it one of the smallest full-featured lightbox libraries available.
**Does LiteLight work on mobile?**
Yes. LiteLight is mobile-first with built-in touch/swipe navigation and responsive image scaling.