mini-lightbox

Minimalist image lightbox

Demo

Check out the demo page.

Examples

Simple usage

<img id="myImage" src="myImage.png" alt="Some title">
<script>
MiniLightbox("#myImage");
</script>

Advanced usage

If you need more stuff (e.g. animations etc), you need to create custom handlers (customClose and customOpen handlers). Works like a charm with animate.css library. 😄

MiniLightbox.customClose = function () {
var self = this;
self.img.classList.add("animated", "fadeOutDown");
setTimeout(function () {
self.box.classList.add("animated", "fadeOut");
setTimeout(function () {
self.box.classList.remove("animated", "fadeOut");
self.img.classList.remove("animated", "fadeOutDown");
self.box.style.display = "none";
}, 500);
}, 500);
// prevent default library behavior
return false;
};

MiniLightbox.customOpen = function () {
this.box.classList.add("animated", "fadeIn");
this.img.classList.add("animated", "fadeInUp");
};

Using data-image-opened attribute

If data-image-opened attribute is provided in img element, it will be used for the path of the image when the popup is opened.

<img id="myImage" data-image-opened="./big.png" src="small.png" alt="Some title">

Delegation

If images are added dynamically, you need to use delegation:

MiniLightbox({
"selector": ".content img"
// or the common parent where the images are appended
, delegation: "html"
});

How to contribute

Have an idea? Found a bug? See how to contribute.

License

MIT © Ionică Bizău