
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
mini-lightbox
Advanced tools
Minimalist image lightbox
Check out the demo page.
As long the CSS3 transitions are supported by your browser, this should work fine. :rocket:
<img id="myImage" src="myImage.png" alt="Some title">
<script>
new MiniLightbox("#myImage");
</script>
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:
function waitForAnimationEnd(element, callback) {
var animationEnd = "animationend";
var handleAnimationEnd = function(event) {
// remove listner
event.target.removeEventListener(animationEnd, handleAnimationEnd);
// fire callback
return callback(event);
};
element.addEventListener(animationEnd, handleAnimationEnd);
}
MiniLightbox.customClose = function(self) {
self.img.classList.add("animated", "fadeOutDown");
waitForAnimationEnd(self.img, function() {
self.box.classList.add("animated", "fadeOut");
});
waitForAnimationEnd(self.box, function() {
self.box.classList.remove("animated", "fadeOut", "fadeIn");
self.img.classList.remove("animated", "fadeOutDown");
self.box.style.display = "none";
});
return false;
};
MiniLightbox.customOpen = function(self) {
if (self.el.parentElement.tagName === "A") {
return false;
}
self.box.classList.add("animated", "fadeIn");
self.img.classList.add("animated", "fadeInUp");
};
data-image-opened
attributeIf 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">
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"
});
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 using npm
or yarn
and require
it:
# Using npm
npm install --save mini-lightbox
# Using yarn
yarn add mini-lightbox
There are few ways to get help:
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.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.
id
: The lightbox id. If not provided, it will close all the opened lightboxes.open(id)
Opens the lightbox. This is called internally.
id
: The lightbox id.Have an idea? Found a bug? See how to contribute.
I open-source almost everything I can, and I try to reply to everyone needing help using these projects. Obviously, this takes time. You can integrate and use these projects in your applications for free! You can even change the source code and redistribute (even resell it).
However, if you get some profit from this or just want to encourage me to continue creating stuff, there are few ways you can do it:
Starring and sharing the projects you like :rocket:
—I love books! I will remember you after years if you buy me one. :grin: :book:
—You can make one-time donations via PayPal. I'll probably buy a
coffee tea. :tea:
—Set up a recurring monthly donation and you will get interesting news about what I'm doing (things that I don't share with everyone).
Bitcoin—You can send me bitcoins at this address (or scanning the code below): 1P9BRsmazNQcuyTxEqveUsnf5CERdq35V6
Thanks! :heart:
If you are using this library in one of your projects, add it in this list. :sparkles:
bloggify-lightbox
FAQs
Minimalist image lightbox
The npm package mini-lightbox receives a total of 106 weekly downloads. As such, mini-lightbox popularity was classified as not popular.
We found that mini-lightbox demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.