mini-lightbox

mini-lightbox

Minimalist image lightbox

Demo

Check out the demo page.

Browser support

As long the CSS3 transitions are supported by your browser, this should work fine. :rocket:

Examples

Simple usage

<img id="myImage" src="myImage.png" alt="Some title">
<script>
    new 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. :smile:

MiniLightbox.customClose = function (self) {
    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 (self) {
    self.box.classList.add("animated", "fadeIn");
    self.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:

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

:cloud: Installation

Check out the dist directory to download the needed files and include them on your page.

If you're using this module in a CommonJS environment, you can install it from npm and require it:

$ npm i --save mini-lightbox

:memo: Documentation

MiniLightbox(options)

Initializes the lightbox according to the options.

Callbacks:

The following methods can be used to modify the default behavior:

• Minilightbox.customOpen (Function): If it's a function, it will be called then the lightbox is opened. If it returns false, the default behavior will be prevented.
• Minilightbox.customClose (Function): If it's a function, it will be called then the lightbox is closed. If it returns false, the default behavior will be prevented.

Params

• Object options: An object containing the following fields:
• selector (String): The image query selector.
• delegation (String): The image container where to handle the delegation.

close(id)

Closes the lightboxes.

Params

• String id: The lightbox id. If not provided, it will close all the opened lightboxes.

open(id)

Opens the lightbox. This is called internally.

Params

• String id: The lightbox id.

:yum: How to contribute

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

:moneybag: Donations

Another way to support the development of my open-source modules is to set up a recurring donation, via Patreon. :rocket:

PayPal donations are appreciated too! Each dollar helps.

Thanks! :heart:

:scroll: License

MIT © Ionică Bizău