A minimal Medium.com-style lightbox for enlarging media using css transforms, scaling images from their position on a page
No Dependencies
npm
$ npm install minimal-lightboxThere are two primary ways to consume this library:
- data-attributes on elements: they must be present when this library is loaded as it attempts to bind to all elements with
[data-action=zoom]. - It also exposes an interface to programmatically bind to elements:
import minimalLightbox from 'minimal-lightbox';
// pass any selector/element node to the default import
minimalLightbox('.some-selector');
minimalLightbox(someElement);When including this library as an external script tag (instead of with a module system like browserify or webpack) it exposes a global minimalLightbox as the main export. You can use that to programmatically bind elements to be zoomable.
This module is dependent on classes/styles to produce the lightbox effect, so your mileage may vary on certain older browsers.
You'll want to include the styles from the /dist directory as well.
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='../dist/minimal-lightbox.css'>
</head>
<body>
<img src='http://lorempixel.com/1000/400' data-action='zoom'/>
<!-- include the package -->
<script type="text/javascript" src="../dist/minimal-lightbox.js"></script>
</body>
</html>Fork and PR any improvements, bug fixes you find. Feel free to open new issues.
To compile new files in /dist that include your changes, use this:
$ npm run build