microlite is an über-small image lightbox that leaves a microscopic footprint. It was originally built by @danklammer. This repo (for packaging) will maintain feature parity with that original repo.

• Purpose
• Installation
• Usage
• Features
• Demo

microlite is a JavaScript lightbox with zero dependencies. It has no extras, no icons, no options and no bloat, but looks nice and is easy to use. If you want special behavior, extra options or flexible features, you'll need to consider another lightbox library (or fork this one and edit it yourself!).

microlite only modifies and animates composite (transform and opacity) CSS properties, giving you buttery smooth 60 FPS transitions. And it uses CSS multiple backgrounds to load in the high-res version on top of the low-res, making the experience fast and seamless. Plus, including it in your app is as easy as importing and setting an onclick={}.

NPM:

npm install microlite --save

Other package managers:

Coming soon

React: Using microlite is easy: simply add the microlite function to the onclick event on an <a> tag, with the thumbnail inside it. Just make sure you pass it the event reference, like this:

/* Import microlite */
import microLite from 'microlite';

class YourLightboxImage extends React.Component {

  render() {
    return (
      <a href='[full-image.jpg]'  onClick={(e) => microLite(e)}>
        <img src='[thumbnail-image.jpg]' />
      </a>
    );
  }
}

...You can also use it without Babel/ES6 syntax, of course:

return (
  <a href='[full-image.jpg]'  onClick={function(e) { microLite(e) }}>
    <img src='[thumbnail-image.jpg]' />
  </a>
);

See this example for reference

Other platforms:

Coming soon

• Prevents wheel-scrolling
• Closes on escape key keypress
• Removes listeners when closed, keeping your window events clean

Try it out