https://github.com/bigcoke233/libra
♎️ A lightweight, focused, vanilla JavaScript lightbox library.
https://github.com/bigcoke233/libra
javascript javascript-library lightbox lightbox-image lightbox-plugin vanila-javascript vanilajs vanilla-js
Last synced: 2 months ago
JSON representation
♎️ A lightweight, focused, vanilla JavaScript lightbox library.
- Host: GitHub
- URL: https://github.com/bigcoke233/libra
- Owner: BigCoke233
- License: mit
- Created: 2025-09-15T02:10:31.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2025-09-18T11:07:39.000Z (3 months ago)
- Last Synced: 2025-09-18T12:51:01.217Z (3 months ago)
- Topics: javascript, javascript-library, lightbox, lightbox-image, lightbox-plugin, vanila-javascript, vanilajs, vanilla-js
- Language: JavaScript
- Homepage:
- Size: 40.7 MB
- Stars: 0
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ♎️ Libra.js
A lightweight, focused, vanilla JavaScript image lightbox library, only ✨**3~4KB** after minified.
_*GIF might appear slower than actual._
## Usage
Grab [libra.min.js](https://github.com/BigCoke233/libra/blob/master/dist/libra.min.js) and put it in your project.
Then import it as a module:
```html
import LightBox from '/dist/libra.min.js';
new LightBox();
```
Make sure your images all have their `data-libra` attribute, or any other selector you may specify in configuration.
```html
```
Also, include [libra.css](https://github.com/BigCoke233/libra/blob/master/src/libra.css).
```html
```
## Configuration
You can configure Libra.js by passing an object to the constructor. The defaults are:
```js
new LightBox({
selector: "[data-libra]", // Selector for images to be lightboxed
margin: 50, // Margin around the lightbox
offset: { x: 0, y: 0 }, // Offset for the lightbox position
transitionDuration: 200, // Animation duration in milliseconds
imageCursor: "zoom-in", // Cursor style for hoverable images
});
```
### Z-index Configuration
Z-index values are managed through CSS classes for better maintainability:
- `.libra-overlay.libra-visible`: z-index 900 (overlay when visible)
- `.libra-overlay.libra-hidden`: z-index -100 (overlay when hidden)
- `.libra-shadow`: z-index 1000 (shadow image)
You can customize these values by overriding the CSS classes in your own stylesheet.
## Development
```
npm install
npm run build
```
## Philosophy
### Why I made Libra.js
I've been using [Fancybox](https://fancyapps.com/fancybox/) on my blog for a long time. While it is an excellent library, it also includes lots of features I don't need, which can slow down performance and increase the bundle size. After searching available alternatives, I found most of them either not well maintained or just as heavy. So I developed Libra.js for my own use, and I hope you find it useful, too!
### Things I won't do with Libra.js
- I won't support IE or older browsers. Please use a modern browser and make sure it's up to date.
- I won't add too many features or configurations for customization. You just click on an image and see the zoomed-in and centered version. That's all.
### Why it's called Libra.js
It's a light-box plugin that focuses on simplicity, so I called it "libo" at first, which is a combination of the first 2 letters of "light" and "box". Then I realized that "libo" sounds a lot like "libra", which is a zodiac sign. I decided to keep the name "libra" because it's a more recognizable and memorable name.
## License
MIT