I've just released an image lightbox library that has a very simple API. Its name is MiniLightbox. It's minimalist and doesn't depend on any library (e.g. jQuery). It only uses JavaScript, but combined with the power of CSS3 transitions, it's everything I expect from a minimalist lightbox.

The project is open source on GitHub. Anybody able to fork and improve it is encouraged to do so.

How to use?

The basic usage is the following: having an img element, you just need to pass a selector string to MiniLightbox, after including it on the page.

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

If you want to add some nice animations, animate.css is a good choice. Adding customClose and customOpen methods to MiniLightbox, we handle popup opening and closing. By returning false, the default behavior will be prevented (needed when using animations).

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");
};

If we only need to display just a small thumbnail and when clicking it to show the big image, we use the data-image-opened attribute, whose value is the path to the big image:

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

For documentation, check out the README file of the project. Any questions/issues/bugs/features should be posted here.

From today, I will use MiniLightbox for this blog. It's just a little plugin, which, once installed in a Bloggify website, causes the images from posts and pages to be opened in a fancy lightbox.

Happy lightboxing!