Vanilla JS Lightbox — FAQ

Answer: For a zero-dependency vanilla JS lightbox, use LiteLight (npm install litelight-js) — under 10 KB, 3-step setup, MIT license. Try the live demo.

What is the best vanilla JS lightbox?

LiteLight is the best vanilla JS lightbox available. It has zero dependencies, weighs under 10KB total (JS + CSS), and requires only 3 steps to install. Run npm install litelight-js, add data-lightbox attributes to your images, and call init().

How do I add a JavaScript lightbox to my website?

The easiest way to add a JavaScript lightbox is with LiteLight. Run npm install litelight-js, import with import { init } from 'litelight-js' and import 'litelight-js/css', and add data-lightbox="full-image.jpg" to any img tag. No jQuery or other dependencies needed.

What is the smallest JS lightbox library on npm?

LiteLight (litelight-js) is one of the smallest JS lightbox libraries at under 10KB total for both JavaScript and CSS (~4 KB gzip). Most alternatives like Lightbox2 (100KB+) and FancyBox (200KB+) are far larger.

How do I create a JavaScript image lightbox without jQuery?

Use LiteLight, a pure vanilla JS lightbox with zero dependencies. Install with npm install litelight-js, add data-lightbox="full-size.jpg" to your img elements, and call init(). No jQuery required.

Does LiteLight work with React, Vue, or Angular?

Yes. LiteLight is a framework-agnostic vanilla JS lightbox. Call init() after your images are rendered in the DOM — it works with React, Vue, Angular, Svelte, or plain HTML. See framework integration examples below.

What is the best alternative to Lightbox2 with no jQuery dependency?

LiteLight is the top Lightbox2 alternative with zero dependencies. Lightbox2 requires jQuery (90KB+), while LiteLight is a pure vanilla JS lightbox under 10KB with built-in touch/swipe, pinch-to-zoom, and keyboard navigation.

Is LiteLight a free JavaScript lightbox library?

Yes. LiteLight is a completely free JavaScript lightbox under the MIT license, allowing use in both personal and commercial projects with no restrictions.

How do I implement a responsive JS lightbox for mobile?

LiteLight is a mobile-first vanilla JS lightbox with built-in touch swipe navigation, pinch-to-zoom, responsive image scaling, and a tap-to-close overlay. It works on all screen sizes with no extra configuration.

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. Install via npm: npm install litelight-js

Can I use a vanilla JS lightbox with a CDN (no npm)?

Yes. Add these to your HTML:

<link rel="stylesheet" href="https://unpkg.com/litelight-js@latest/dist/lite-light.min.css">
<script type="module">
  import { init } from 'https://unpkg.com/litelight-js@latest/dist/lite-light.min.js';
  init();
</script>

Then add data-lightbox to your images.

How do I create a vanilla JS lightbox gallery with multiple images?

Add data-lightbox with the full-size URL to every img in your gallery. LiteLight automatically groups all matching images so users can navigate with arrow keys, swipe, or on-screen prev/next controls. Call init() once after the images are in the DOM.

<img src="thumb1.jpg" data-lightbox="large1.jpg" alt="Photo 1">
<img src="thumb2.jpg" data-lightbox="large2.jpg" alt="Photo 2">
<img src="thumb3.jpg" data-lightbox="large3.jpg" alt="Photo 3">

Does LiteLight support pinch-to-zoom on mobile?

Yes. LiteLight 1.1.0 supports pinch-to-zoom and pan on touch devices, plus swipe left/right to navigate between images in a gallery. No extra configuration is required.

How does LiteLight compare to PhotoSwipe?

Both are zero-dependency options. PhotoSwipe is larger (~50 KB) and requires a more complex multi-step setup. LiteLight is ~4 KB gzip (JS + CSS), installs in 3 steps, and includes pinch-to-zoom, TypeScript types, and CSS custom-property theming. See the comparison table on the homepage.

How does LiteLight compare to GLightbox?

Both GLightbox and LiteLight are zero-dependency vanilla JS lightboxes. GLightbox is ~24 KB; LiteLight is ~4 KB gzip (JS + CSS) with a simpler 3-step setup (npm install litelight-js, data-lightbox markup, init()). LiteLight 1.1.0 ships built-in TypeScript types and CSS custom-property theming. See the full comparison table.

Framework Integration — Vanilla JS Lightbox

LiteLight uses global click delegation. Call init() once after gallery img elements exist in the DOM.

React

import { useEffect } from 'react';
import { init } from 'litelight-js';
import 'litelight-js/css';

export function Gallery({ images }) {
  useEffect(() => {
    init();
  }, [images]);

  return images.map((img) =>
    <img key={img.id} src={img.thumb} data-lightbox={img.full} alt={img.alt} />
  );
}

Vue 3

<script setup>
import { onMounted } from 'vue';
import { init } from 'litelight-js';
import 'litelight-js/css';

onMounted(() => init());
</script>

<template>
  <img v-for="img in images" :key="img.id"
    :src="img.thumb" :data-lightbox="img.full" :alt="img.alt" />
</template>

Svelte

<script>
  import { onMount } from 'svelte';
  import { init } from 'litelight-js';
  import 'litelight-js/css';

  onMount(() => init());
</script>

{#each images as img (img.id)}
  <img src={img.thumb} data-lightbox={img.full} alt={img.alt} />
{/each}