【Javascript】JavaScriptとCSSをしようしたライトボックスPerfundo

Javascript

October 7, 2017

TAGS:
CSS
Javascript
Lightbox
Responsive

PerfundoはJavaScriptとCSSをしようしたライトボックス

Usage

// 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: 'perfundo__link',
    overlay: 'perfundo__overlay',
    content: 'perfundo__content',
    close: 'perfundo__close',
    prev: 'perfundo__prev',
    next: 'perfundo__next',
    untarget: 'perfundo__untarget',
    active: 'is-active'
  }
});

Standalone (without npm)

<!-- Put this inside the <head> section of your HTML. -->
<link rel="stylesheet" href="perfundo.min.css">

<!-- Put this before the closing </body> tag (optionally!). -->
<script src="perfundo.min.js"></script>
<script>
  perfundo('.perfundo');
</script>

MIT

Demo/Download