Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/maoberlehner/perfundo
a pure CSS lightbox (now with JavaScript).
https://github.com/maoberlehner/perfundo
Last synced: 17 days ago
JSON representation
a pure CSS lightbox (now with JavaScript).
- Host: GitHub
- URL: https://github.com/maoberlehner/perfundo
- Owner: maoberlehner
- License: mit
- Created: 2014-12-05T15:59:24.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2018-05-04T14:52:03.000Z (over 6 years ago)
- Last Synced: 2024-10-11T15:14:14.817Z (about 1 month ago)
- Language: JavaScript
- Homepage: https://perfundo.oberlehner.net
- Size: 2.46 MB
- Stars: 186
- Watchers: 7
- Forks: 9
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# perfundo
[![Build Status](https://travis-ci.org/maoberlehner/perfundo.svg?branch=master)](https://travis-ci.org/maoberlehner/perfundo)
[![Coverage Status](https://coveralls.io/repos/github/maoberlehner/perfundo/badge.svg?branch=master)](https://coveralls.io/github/maoberlehner/perfundo?branch=master)
[![GitHub stars](https://img.shields.io/github/stars/maoberlehner/perfundo.svg?style=social&label=Star)](https://github.com/maoberlehner/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](https://github.com/maoberlehner/node-sass-magic-importer/tree/master/packages/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](https://github.com/maoberlehner/node-sass-magic-importer/tree/master/packages/node-sass-magic-importer#usage) on how to use the [node-sass-magic-importer](https://github.com/maoberlehner/node-sass-magic-importer/tree/master/packages/node-sass-magic-importer).Install perfundo:
```bash
npm install perfundo --save
```Also install [node-sass-magic-importer](https://github.com/maoberlehner/node-sass-magic-importer/tree/master/packages/node-sass-magic-importer)
```bash
npm install node-sass-magic-importer --save-dev
```Now you can import perfundo into your Sass file:
```scss
@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:
```scss
$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:
```js
// 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:```html
perfundo('.perfundo');
```
## BrowserStack
perfundo is using [BrowserStack](https://www.browserstack.com) to automatically test it's functionality in the following Browsers: Internet Explorer 10+, Edge 14+, Firefox 54+, Chrome 59+, Opera 46+ and Safari 9+.[![BrowserStack](https://perfundo.oberlehner.net/img/browserstack.png)](https://www.browserstack.com)
## About
### Author
Markus Oberlehner
Website: https://markus.oberlehner.net
Twitter: https://twitter.com/MaOberlehner
PayPal.me: https://paypal.me/maoberlehner### License
MIT