一个简单、轻量级、无依赖性的 JavaScript 光盒
Luminous is a simple, lightweight, no-dependencies JavaScript image lightbox.npm install luminous-lightboxbower install luminousdist/Luminous.min.js or dist/Luminous.jsIf you're using the pre-built version of Luminous, it will automatically make window.Luminous and window.LuminousGallery available for your use when included on your page.
If you prefer to use require statements and a build tool like Browserify, there are a couple other things to keep in mind. First, require('luminous-lightbox') gives you an object with Luminous and LuminousGallery keys. You can use it in the following ways:
var Luminous = require('luminous-lightbox').Luminous;
new Luminous(…);
If your project uses ES6, you can do the following instead:
import { Luminous } from 'luminous-lightbox';
new Luminous(…);
Once you've installed Luminous via one of the above methods, you're ready to get started. There are no dependencies, so you can just start making cool stuff. Check out the announcement blog post, or take a peek at our demo. Here's an example of a basic implementation:
new Luminous(document.querySelector("a"));
Luminous supports gallery-style navigation using the LuminousGallery class. It works nearly the same as Luminous, but has a slightly different method of instantiation.
new LuminousGallery(document.querySelectorAll(".gallery-demo"));
Here's an example of using Luminous with a custom configuration. All of the listed options are displayed with their default value.
…
LuminousGallery supports two sets of options arguments. The first set is specific to the gallery itself, and the second specifies the options that get passed to its child Luminous instances.
var galleryOpts = {
// Whether pressing the arrow keys should move to the next/previous slide.
arrowNavigation: true,
// A callback triggered when the image changes that is passed the image HTML element
onChange: ({ imgEl }) => { … },
};
var luminousOpts = {
// These options have the same defaults and potential values as the Luminous class.
};
new LuminousGallery(document.querySelectorAll("a"), galleryOpts, luminousOpts);
By default, Luminous injects an extremely basic set of styles into the page via the injectBaseStyles option. You will almost certainly want to extend these basic styles for a prettier, more usable experience that matches your site. If you need to do something very out of the ordinary, or just prefer to include the default styles in CSS yourself, you can pass injectBaseStyles: false when instantiating a new instance of Luminous. Please note that if you disable the included base styles, you will still need to provide an animation for .lum-lightbox.lum-opening and .lum-lightbox.lum-closing (this can be a "noop" style animation, as seen in the base styles source).
There is also an included basic theme (luminous-basic.css) that may meet your needs, or at least give a good example of how to build out your own custom styles. This can either be included in your site's CSS via @import "node_modules/luminous-lightbox/dist/luminous-basic.css"; or as a linked stylesheet in your HTML.
Additionally, the namespace option can be used as a way to easily apply different themes to specific instances of Luminous.
We support the latest version of Google Chrome (which automatically updates whenever it detects that a new version of the browser is available). We also support the current and previous major releases of desktop Firefox, Internet Explorer, and Safari on a rolling basis. Mobile support is tested on the most recent minor version of the current and previous major release for the default browser on iOS and Android (e.g., iOS 9.2 and 8.4). Each time a new version is released, we begin supporting that version and stop supporting the third most recent version.
Luminous was made by imgix. It's licensed under the BSD 2-Clause license (see the license file for more info). Any contribution is absolutely welcome, but please review the contribution guidelines before getting started.
暂无开放 Issues，或尚未同步最近议题。