Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

mini-lightbox

Package Overview
Dependencies
Maintainers
1
Versions
19
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

mini-lightbox

Minimalist image lightbox

  • 3.0.0
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

mini-lightbox

Patreon PayPal AMA Version Downloads Get help on Codementor

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);
    // 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:

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

Keywords

FAQs

Package last updated on 19 Dec 2016

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc