mini-lightbox
Minimalist image lightbox
Demo
Check out the demo page.
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 () {
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);
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:
new MiniLightbox({
selector: ".content img"
, 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