perfundo

a pure CSS lightbox (https://perfundo.oberlehner.net).

Usage

As an npm module

To use perfundo in your Sass project, it is recommended to use the node-sass-magic-importer node-sass importer so it is possible to easily load perfundo directly from your node_modules directory. Make sure you checkout the usage section on how to use the node-sass-magic-importer.

Install perfundo:

npm install perfundo --save

Also install node-sass-magic-importer

npm install node-sass-magic-importer --save-dev

Now you can import perfundo into your Sass file:

@import '~perfundo';
// OR
@import '~perfundo/with-icons';

// Without node-sass-magic-importer installed
@import 'node_modules/perfundo/scss/index.scss';
// OR
@import 'node_modules/perfundo/scss/with-icons.scss';

There are variables to control certain aspects of the Lightbox:

$perfundo-background-color: rgba(#000, 0.9);
$perfundo-color: #fff;
$perfundo-control-use-icons: false;
$perfundo-html-padding: 2em;
$perfundo-html-max-width: 42em;
$perfundo-html-background-color: #fff;

If you want to use the JavaScript enhancements, load the perfundo module into your JavaScript file:

// Load the module.
const perfundo = require('perfundo');
// Initialize a perfundo Lightbox.
perfundo('.perfundo', {
  // This are the default options.
  disableHistory: false,
  swipe: true,
  keyboard: true,
  classNames: {
    link: `js-perfundo-link`,
    overlay: `js-perfundo-overlay`,
    close: `js-perfundo-close`,
    prev: `js-perfundo-prev`,
    next: `js-perfundo-next`,
    active: `is-active`
  }
});

Standalone (without npm)

Download https://github.com/maoberlehner/perfundo/archive/4.0.3.zip. Add the files to your HTML file like in the following example:

<!-- Put this inside the <head> section of your HTML. -->
<link rel="stylesheet" href="https://github.com/maoberlehner/perfundo/blob/master/perfundo.min.css">

<!-- Put this before the closing </body> tag (optionally!). -->
<script src="https://github.com/maoberlehner/perfundo/raw/master/perfundo.min.js"></script>
<script>
  perfundo('.perfundo');
</script>

BrowserStack

perfundo is using BrowserStack to automatically test it's functionality in the following Browsers: Internet Explorer 10+, Edge 14+, Firefox 54+, Chrome 59+, Opera 46+ and Safari 9+.

About

Author

Markus Oberlehner
Website: https://markus.oberlehner.net
Twitter: https://twitter.com/MaOberlehner
PayPal.me: https://paypal.me/maoberlehner

License

MIT

maoberlehner / perfundo

readme