LiteLight

A lightweight, beautiful, responsive lightbox for images

Get it at

Example of LiteLight

Mountain landscape
Tall redwood trees
Sunset lake
Forest waterfall
City skyline at night
Desert dunes
Ocean cliff view
Starry night sky

How to Use LiteLight

  • Click on any image to open it in the lightbox
  • Arrow keys (← →) to navigate between images
  • Swipe left/right on mobile devices to navigate
  • ESC key or click outside the image to close
  • Click the X button to close the lightbox

Implementation

1. Include the CSS and JavaScript files in your HTML:

<link rel="stylesheet" href="lite-light.min.css">
<script type="module">
  import { init } from 'lite-light.min.js';
  init();
</script>

2. 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">

3. That's it! Click any image to see the lightbox in action.