Basic Responsive jQuery Image Lightbox Plugin - Litebox

File Size: 821 KB
Views Total: 1138
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Basic Responsive jQuery Image Lightbox Plugin - Litebox

Litebox is a basic, lightweight, responsive jQuery lightbox plugin used to overlay images on top of the current webpage.

How to use it:

1. Load the jQuery litebox plugin at the bottom of your webpage but after jQuery library.

<script src="//"></script>
<script src="js/jquery.litebox.1.0.js"></script>

2. Create a link with the data-litebox="litebox" attribute and use href attribute to specify the image source you wish to display in the lightbox.

<a data-litebox="litebox" href="1.jpg">Click me</a>

3. Call the function to enable the lightbox plugin.


4. The required CSS styles for the lightbox plugin.

[data-overlay="litebox"] {
 position: fixed;
 background-color: rgba(0,0,0, 0.8);
 text-align: center;

5. Add a subtle transition effect to the lightbox.


// animation speed
speed: 500,

// animation type
animation: 'swing'


This awesome jQuery plugin is developed by kevinrodrigues. For more Advanced Usages, please check the demo page or visit the official website.