Featherlight是一个非常轻量级的jQuery灯箱插件。它'；它简单而灵活，易于使用。Featherlight具有最小的css，并且不使用内联样式，所有内容都以名称分隔，它'；s完
Posted
tags:
中文标题：Featherlight是一个非常轻量级的jQuery灯箱插件。它'；它简单而灵活，易于使用。Featherlight具有最小的css，并且不使用内联样式，所有内容都以名称分隔，它'；s完 原文标题：Featherlight is a very lightweight jQuery lightbox plugin. It's simple yet flexible and easy to use. Featherlight has minimal css and uses no inline styles, everything is name-spaced, it's completely customizable via config object and offers image 项目评级：Star:2100 Fork:303 下载地址：https://github.com/noelboss/featherlight 详情介绍Featurelight-超薄jQuery灯箱
Featherlight是一个非常轻量级的jQuery灯箱插件。有关更多信息和演示，请访问官方网站。
»下载当前版本1.7.14
在这里，您可以找到所有更改的列表，还可以下载旧版本或包括所有最新bling在内的master。
安装
所有的样式都是使用CSS完成的，所以你会想在脑海中包含Featherlight CSS。
<link href="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.css" type="text/css" rel="stylesheet" />
请注意，Featherlight使用非常不具体的CSS选择器来帮助您覆盖各个方面。这反过来意味着，如果你不遵循模块化的方法来编写CSS（你应该这样做！这太棒了！），并且有许多全局和特定的定义（读ID之类的——你不应该这样做），这些定义可能会破坏Featherlight的风格。
Featherlight需要jQuery 1.7.0或更高版本（常规版本，而不是纤薄版本）。建议在关闭</body>标记之前在页面底部包含javascript。
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
用法
默认情况下，羽光灯使用“数据羽光灯”属性作用于所有元素。具有此属性的元素会触发灯箱。属性的值充当作为lightbox打开的元素的选择器。
<a href="#" data-featherlight="#mylightbox">Open element in lightbox</a>
<div id="mylightbox">This div will be opened in a lightbox</div>
羽毛灯很聪明。”data featherlight还可以包含指向图像、ajax url甚至DOM代码的链接：
<a href="#" data-featherlight="myimage.png">Open image in lightbox</a>
<a href="#" data-featherlight="myhtml.html .selector">Open ajax content in lightbox</a>
<a href="#" data-featherlight="<p>Fancy DOM Lightbox!</p>">Open some DOM in lightbox</a>
它还可以使用href以及“image”和“ajax”关键字的链接（也可以通过image: 'photo.jpg'或type: 'image'等配置选项手动设置）：
<a href="myimage.png" data-featherlight="image">Open image in lightbox</a>
<a href="myhtml.html .selector" data-featherlight="ajax">Open ajax content in lightbox</a>
<a href="#" data-featherlight-ajax="myhtml.html .selector">Open ajax content in lightbox</a>
<a href="#" data-featherlight="myhtml.html .selector" data-featherlight-type="ajax">Open ajax content in lightbox</a>
默认情况下，Featurelight在文档就绪时初始化所有匹配$.featherlight.autoBind的元素。如果要防止这种情况发生，请在DOM准备就绪之前将$.featherlight.autoBind设置为false。
绑定羽毛灯
您可以使用以下代码将Featurelight事件绑定到任何元素上：
$('.myElement').featherlight($content, configuration);
然后，它将在该元素上查找targetAttr（默认情况下为“数据羽灯”），并使用其值查找当您单击该元素时将作为灯箱打开的内容。
$content–jQuery对象或字符串：您可以手动传递要在灯箱中打开的jQuery对象或者字符串（请参阅内容过滤器）。可选择的
configuration–对象：用于配置插件某些方面的对象。请参阅配置。可选择的
Featherlight的手动调用
在不希望元素充当触发器的情况下，可以手动调用Featurelight。例如，您可以在ajax回调中使用它来显示响应数据。
$.featherlight($content, configuration);
$content–jQuery对象或字符串：您可以手动传递要在灯箱中打开的jQuery对象或者字符串（请参阅内容过滤器）。可选择的
configuration–对象：用于配置插件某些方面的对象。请参阅配置。可选择的
配置
Featherlight提供了一系列配置选项，使其非常灵活。
当调用featherlight时，可以传递这些选项。
或者，它们可以被指定为触发灯箱的元素上的属性；
例如，<a data-featherlight-close-on-esc="false" ...>与
通过closeOnEsc: false。
您也可以直接修改$.featherlight.defaults，它保存了所有默认值：
================================================
namespace – String: 'featherlight'
所有绑定到元素的函数都有名称空间。这也用于为背景、内容包装和关闭的所有CSS类加前缀，但是
================================================
targetAttr – String: 'data-featherlight'
属性，指向将在灯箱中打开的目标元素或内容。
================================================
variant – String: null
传递您自己的CSS类，根据您的需要调整灯箱的样式。
================================================
resetCss – Boolean: false
将其设置为true可删除所有默认css并从头开始设计。
================================================
openTrigger & closeTrigger – String: 'click'
用于打开或关闭灯箱的事件。关闭事件绑定到关闭按钮和灯箱背景（如果启用）。
如果直接调用$.flowlight，则没有任何效果。
================================================
filter - String: null
在jQuery集上调用featherlight时，以类似于$(...).on('click', filter, eventHandler)的方式筛选事件的选择器。
选择器和已筛选元素的属性都会被考虑在内。
在下面的示例中，第一个链接将发出ajax请求，而第二个链接将显示文本“second”。
<div data-featherlight data-featherlight-filter="a"
data-featherlight-type="ajax">
<a href="first">Hello</a>
<a href="second" data-featherlight-type="text">World</a>
</div>
================================================
root - String: 'body'
这个选择器指定了应该附加羽灯的位置。
================================================
openSpeed & closeSpeed – Integer or String: 250
定义打开和关闭动画的速度。允许的值是jQuery动画持续时间。避免使用0，因为这会导致时间逆转和世界末日！（好吧，开玩笑，只是关闭回调不会被触发，未使用的ghost DOM会在周围徘徊，但仍然如此。）
================================================
closeOnClick – 'background', 'anywhere' or false
如果设置了关闭事件，则关闭事件也仅绑定到后台或任何位置
================================================
closeOnEsc – Boolean: true
如果为true，则按ESC键时灯箱关闭
================================================
closeIcon – String: '✕';
哦，命名。。。
================================================
loading – String: '';
内容加载时初始显示。在加载内容时，灯箱也有一个类“.flowlight-loading”。这样可以很容易地指定“正在加载…”消息或微调器。
================================================
persist - Boolean or 'shared': false;
如果设置，则内容将持续存在，并在再次打开时再次显示。
如果多个按钮需要保持相同的内容，请使用特殊值“shared”。
内容过滤器jquery（用于.some-class或#some-id等链接）将克隆给定内容，前提是该内容未持久化。否则，它将被移动到灯箱中。
================================================
otherClose - String: null
虽然羽灯生成的关闭图标将具有类“羽灯关闭”，但您可以为对话框中具有相同效果的其他按钮指定替代选择器，例如“a:contains（'Cancel'）”。
================================================
background – DOM String: null
您可以提供包装DOM。这有点棘手，而且只适用于高级用户。建议学习插件代码。但您需要提供一个具有“namespace-internal”类的元素：lightbox的内容将替换此元素。建议您修改beforeOpen或afterOpen上的灯箱，而不是提供此选项。
================================================
beforeOpen, beforeClose – Function: null
在执行open或close方法之前调用。此函数可以返回false以防止打开或
执行后关闭方法。this是一个对象，包含触发DOM元素（如果存在）和相关的Featurelight对象。
// example
beforeOpen: function(event)
console.log(this); // this contains all related elements
return false; // prevent lightbox from opening
================================================
beforeContent, afterContent – Function: null
在加载内容之前和之后调用。对于ajax调用或图像，可能会有很大的延迟，对于内联内容，这两个调用将一个接一个地发生。接收事件对象。this是一个目标
t，并包含触发DOM元素（如果存在）和相关的Featurelight对象。
================================================
afterOpen, afterClose – Function: null
在执行open或close方法后调用–如果before-或open函数返回false，则不调用它！接收事件对象。this是一个对象，包含触发DOM元素（如果存在）和相关的Featurelight对象。
// example
afterOpen: function(event)
console.log(this); // this contains all related elements
alert(this.$content.hasClass('true')); // alert class of content
================================================
onKeyUp, onResize – Function: null
函数接收事件对象。this是一个对象，包含触发DOM元素（如果存在）和相关的Featurelight对象。
================================================
type – String: null
type对象允许您手动设置灯箱的类型。将值设置为“image”、“ajax”或任何内容过滤器。否则，targetAttr的值将用于确定灯箱的类型。例子：
$('.image-lightbox').featherlight(type: 'image');
方法
$.featherlight实际上是一个新的轻量级对象的构造函数。修改$.featherlight.prototype以更改默认属性，或者使用传递给构造函数的configuration对象来覆盖特定新实例的属性。
可以使用或更改这些方法，但不能保证API保持不变；询问您是否有特殊需求。
var current = $.featherlight.current();
current.close();
// do something else
current.open(); // reopen it
有关更多详细信息，请查看源代码。
全球化
$.featherlight具有以下全局值：
autoBind: '[data-featherlight]' /* Will automatically bind elements matching this selector. Clear or set before onReady */
current: function() /* returns the currently opened featherlight, or undefined */
close: function() /* closes the currently opened featherlight (if any) */
内容过滤器
有多种方法可以指定要羽化的内容。Featherlight使用一组启发式方法来确定类型，例如，以.gif结尾的数据将被假设为图像。以下内容相当：
<a href="#" data-featherlight="photo.gif">See in a lightbox</a>
<a href="photo.gif" data-featherlight>See in a lightbox</a>
<a id="#example" href="#">See in a lightbox</a>
<script>$('#example').featherlight('photo.gif');</script>
如果启发式方法不起作用，您可以指定要使用的contentFilter：
<a href="photo_without_extension" data-featherlight="image">See in a lightbox</a>
<a id="force_as_image" href="photo_without_extension">See in a lightbox</a>
<script>
$('#force_as_image').featherlight('image');
// Equivalent:
$('#force_as_image').featherlight(type: image: true);
</script>
<a id="force_as_image2" href="#">See in a lightbox</a>
<script>$('#force_as_image2').featherlight('photo_without_extension', type:image: true);</script>
您可以添加自己的启发式方法，例如：
$.featherlight.contentFilters.feed =
regex: /^feed:/,
process: function(url) /* deal with url */ return $('Loading...');
;
$.featherlight.defaults.contentFilters.unshift('feed');
通过这种方式，可能会出现以下情况：
<a href="feed://some_url" data-featherlight>See the feed in a lightbox</a>
需要显式指定内容筛选器“text”，它没有附加启发式：
<a href="Hello, world" data-featherlight="text">Example</a>
示例
使用链接标签打开灯箱
<a href="#targetElement" class="fl">Open</a>
<div id="targetElement">Lightbox</div>
$('a.fl').featherlight(
targetAttr: 'href'
);
使用羽毛灯打开图像
使用链接并将数据羽灯属性指向包含链接的所需属性。。。
<a href="myimage.jpg" data-featherlight="image">Open Image</a>
…或直接提供链接作为数据羽灯属性：
<a href="#" data-featherlight="myimage.jpg">Open Image</a>
打开带有ajax内容的灯箱
将Featurelight与ajax一起使用，使用“ajax”关键字或提供url。它甚至支持在响应文档中选择元素。
<a href="url.html .jQuery-Selector" data-featherlight="ajax">Open Ajax Content</a>
或者可以直接将链接提供为羽光属性：
<；a href=“#”data featherlight=“url.html.jQuery选择器”&
gt；打开Ajax内容</a>；
用iframe打开灯箱
Featherlight生成一个带有“iframe”关键字和给定URL的iframe。
iframe的默认大小非常小（300 x 150）。
<a href="http://www.example.com" data-featherlight="iframe">Open example.com in an iframe</a>
选项：
您可以使用以下iframe属性：
allow, allowfullscreen, frameborder, height, longdesc, marginheight, marginwidth, mozallowfullscreen, name, referrerpolicy, sandbox, scrolling, src, srcdoc, style, webkitallowfullscreen, width
例如，要设置高度和宽度，可以使用
data-featherlight-iframe-height="640" data-featherlight-iframe-width="480"
或者设置一些css样式：
data-featherlight-iframe-style="border:none"
您还可以使用JavaScript设置iframe属性iframeWidth、iframeMinWidth等：
$.featherlight(iframe: 'editor.html', iframeMaxWidth: '80%', iframeWidth: 500,
iframeHeight: 300);
使用Featherlight打开YouTube视频
Featherlight生成一个包含嵌入视频的iframe。
显示可点击的缩略图，打开固定大小为640 x 480的视频并自动开始播放：
<a href="http://www.youtube.com/embed/f0BzD1zCye0?rel=0&autoplay=1" data-featherlight="iframe" data-featherlight-iframe-width="640" data-featherlight-iframe-height="480" data-featherlight-iframe-frameborder="0" data-featherlight-iframe-allow="autoplay; encrypted-media" data-featherlight-iframe-allowfullscreen="true"> <img src="http://img.youtube.com/vi/f0BzD1zCye0/0.jpg" alt="" /> </a>
在灯箱中打开视频的文本链接，该灯箱被拉伸到视口的85%高度和宽度：
<a href="http://www.youtube.com/embed/f0BzD1zCye0?rel=0&autoplay=1" data-featherlight="iframe" data-featherlight-iframe-frameborder="0" data-featherlight-iframe-allow="autoplay; encrypted-media" data-featherlight-iframe-allowfullscreen="true" data-featherlight-iframe-style="display:block;border:none;height:85vh;width:85vw;">My video</a>
一个链接，用于在填充了100%窗口的灯箱中打开视频：
注意：“关闭”图标不可见，因此此示例不便于用户使用。
<a href="http://www.youtube.com/embed/f0BzD1zCye0?rel=0&autoplay=1" data-featherlight="iframe" data-featherlight-iframe-frameborder="0" data-featherlight-iframe-allow="autoplay; encrypted-media" data-featherlight-iframe-allowfullscreen="true" data-featherlight-iframe-style="position:fixed;background:#000;border:none;top:0;right:0;bottom:0;left:0;width:100%;height:100%;">My video</a>
IE8背景透明度
如果您希望IE8中的背景是半透明的，请在rgba背景之前使用data:image：
＜code＞背景：url（数据：image/png；base64，iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAKQWlDQ1BJ0MgUHJvZmlsZQAASA2dlndUU9kWh8+9N73QEiIgJfQaegkg0jtIFQRRiUmAUAKGhCZ2RAVGFBEpVmRUwAFHhyJjRRQLg4Ji1wnyEFDGwVFEReXdjGsJ7601896a/cdZ39nnt9fZZ+9917oAUPyCBMJ0WAGANKFFO7rwVwSE8vE9wIYEAE OWAHA4WZmBEf4RU/L09mZmoSMaz9u4ugGS72yy/UCZz1v9/kSI3QyQGAApF1TY8fiYX5QKUU7PFGTL/BMr0lSkyhjEyFqEJoqwi48SvbPan5iu7yZiXJuShGln0Gbw0noy7UN6aJeGjjAShXJgl4GejfAdlvVRJmgDl9yjT0/icTAAwFJlfzOcmoWyJMkUUGe6J8gIACJTEObxyDov5OWieAHimZ+SKBIlJYqYR15hp5jIZvrxs1P5YjErlMNN4Yh4TM/0tAyOMBeAr2+WRQElWW2ZaJHtrRzt7VnWmj5v9nfHn5T/T3IevtV8Sbsz55BjJ5Z32zsrC+9FgD2JFqbHbO+lVUAtG0GQOXhrE/vIAdyBQC0 3pzzHoZsXpLE4gwnC4vs7GxzAZ9rLivoN/ufgm/Kv4Y595nL7vtWO6YXP4EjSRUzZUzXlpqems0TMzAwOl89k/fcQ/+PAOWnNycMsnJ/AF/GF6VR6JQJhIlou4U8gViQLmQKhH/V4X8YNicHGX6daxRodV8AfYU5ULhJB8hvPQBDIwMkbj96An3rWxAxCsi+vGitka9zjzJ6/uf6Hwtcim7hTEEiU+b2DI9kciWiLBmj34RswQISkAd0oAo0gS4wAixgDRyAM3AD3iAAhIBIEAOWAy5IAmlABLJBPtgACkEx2AF2g2pwANSBetAEToI2cAZcBFfADXALDIBHQAqGwUswAd6BaQiC8BAVokGqkBakD5lC1mAbWgh5Q0FQOBQDxUOJkBCSQPnQgYKoOqoUNQPf QjdBq6CF2D+qAH0CA0Bv0BfYQRmALTYQ3YALaA2bA7HAhHwsvgRHgVnAXwNvhSrgWPg63whfhG/AALIVfwpMIQMgIA9FGWAgb8URCkFgkAREha5IpAKpRZqQDqQbuY1IkXHkAwaHoWGYGBbGGeOHWyzhYlZh1mJKMNWY5hWTBfmNmYQM4H5gqVi1bGmWCesP3YJNhGbjS3EVmCPYFuwl7ED2GHsOxwOx8AZ4hxwfrgYXDJuNa4Etw/XjLuA68MN4SbxeLwq3hTvgg/Bc/BifCG+Cn8cfx7fjx/GvyQCVoEa4PIZYgJGwkVBAaCOcI/YQRwjRRgahPdCKGEHneXGIpsY7YQbxJHCZOkxRJhiQXUiQpmbSBVElq0mPSa9IZPJPJ OmRHchhZQF5PriSfIF8lD5I/UJQoJhRPShxFQtlOOUq5QHlAeUOlUg2obRYqpi6nVpPvUR9Sn0vR5Mzl/OX48mtk6uRa5Xrl3slT5TXl3eXy6fJ18hf0r+pvy4AlHBQMFTgaOwVqFG4bTCPYVJRZqilWKIYppiiWKD4jXFUSW8koGStxJPqUDpsNIlpSEaQtLED K4tE20Otpl2jAdRzek+9OT6cX0H+i99AllJWVb5SjHOU5bPKUgbCMD4M1IZpYyTjLuMj/M05rnP48/bNq9pXv+8KZX5Km4qfJUilWaVAZWPqkxVb9UU1Z2qbapP1DBqJmphatlq+9Uuq43Pp893ns+dXzT/5PyH6rC6iXq4+mr1w+o96pMamhq+GhkaVRqX NMY1GZpumsma5ZrnNMe0aFoLtQRa5VntV4wlZnuzFRmJbOLOaGtru2nLdE+pN2rPa1jqLNYZ6NOs84TXZIuWzdBt1y3U3dCT0svWC9fr1HvoT5Rn62fpL9Hv1t/ysDQINpgi0GbwaihiqG/YZ5ho+FjI6qRq9Eqo1qjO8Y4Y7ZxivE+41smsImdSZJJjclNU9jU3lRgus+0zwxr5mgmNKs1u8eisNxZWaxG1qA5wzzIfKN5m/krCz2LWIudFt0WXyztFMt6ywfWSlZBVhttOw+sPaxJprXWN9x4Zq4
2Ozzqbd5rWtqS3fdr/tfTuaXbDdFrtO8/2DvYi+yb7MQc9h3iHvQ732HR2KLuEfdUR6+jhuM7xjOMHJ3nsdNJp9+dWc4pzg3owsMF/AX1C0YctFx4bgccpEuZC6MX3hwodRV25XjWuv6zE3Xjed2xG3E3dg92f24+ysPSw+RR4vHlKeT5xrPC16Il69XkVevt5L3Yu9q76c+Oj6JPo0+E752vqt9L/hh/QL9dvrd89fw5/rX+08EOASCgKpargbfYHPgsyCRIFdQTDwQHBu4IfL9JfJFzUFgJC/EN2hTwJNQxdFfpzGC4sNKwm7Hm4VXh+eHcELWJFREPEu0iPyNLIR4uNFksWd0bJR8VF1UdNRXtFl0VLl1gsWbPkRoxajCCmPRYfGxV7JHZyqffS3UuH4+ziCuPuLjNclrPs2nK15anLz66QX8FZcSoeGx8d3xD/iRPCqeVMrvRfuXflBNeTu4f7kufGK+eN8V34ZfyRBJeEsoTRRJfEXYljSa5JFUnjAk9BteB1sl/ygeSplJCUoykzqdGpzWmEtPi000IlYYqwK10zPSe9L8M0ozBDuspp1e5VE6JA0ZFMKHNZZruYjv5M9UiMJJslg1kLs2qy3mdHZZ/KUCWR5vTkmu Ruyx3J88n7fjVmNXd1Z752/ob8wTXuaw6thdauXNu5nddwbrh9b7rj20gbUjZ8MtGy41lG99uit7UUaBRsL5gaLPv5sZCuUJR4b0tzlsObMVsFWzt3WazrWrbryJe0fViy+KK4k8l3JLr31l9V/ndzPaE7b2l9qX7d+B2CHfc3em681iZYlle2dCu4F2t5czyovK3u1fsvlZhW3FgD2mPZI+0MqiyvUqvakfVp+qk6oEaj5rmvep7t+2d2sfb17/fbX/TAY0DxQc+HhQcvH/I91BrrUFtxWHc4azDz+ui6rq/Z39ff0tTSPGRz0eFR6Hwo911TvU1zeoN5Q2wo2SxrHjccdv/eD1Q3sTq+lQM6O5+AQ4ITnx4sf4H++eDDzZeYp9qukn/Z/2ttBailqh1tzWibakNml7THvf6YDTnR3OHS0/m/989Iz2mZqzymdLz5HOFZybOZ93fvJCxoXxi4kXhzpXdD66OTSna6wrt7LgZevXvG5cqnbvfv8VZerZ645XTt9nX297Yb9jdYeu56WX+x+aem172296XCz/ZbjrY6+BX3n+l37L972un3ljv+dGwOLBvruLr57/17cPel93v3RB6kPXj/Mejj9aP1j7OOiJwpPKp6qP6391fjXZqm99Oyg12DPs4hnj4a4Qy//lfmvT8MFz6nPK0a0RupHrUfPjPmM3Xqx9MXwy4yX0+OFvyn+tveV0auffnfnff7vWdiycTwa9HrmT9K3qi+OfrW9m3nZOjk03dp76anit6rvj/2gf2h+2P0x5Hp 7E/4T5WfjT93fAn88ngmbWbm3/eE8/syOll+AAACXBIWXMAAAsTAAALEwEAmpwYAAADpmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS40LjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cm RmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICB4bWxuczp4bXA9Imh0DHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiagICAgIHhtbG5zOnRpZmY 9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIgogICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWyvMS4wLyI+CIAgICAgIDx4bXA6TW9kaWZ5RGF0ZT4yMDEzLTExLTA2VDIyOjExOjgxPC94bXA6TW9kaWZ5GF0ZT4KICAgICAgPHhtcDpDcmVhdG9yVG9vbD5QaXhlbG1hdG9yDMuMDwveG1wOkNyZWF0b3JUb29PgogICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aWuPgogICAg ICA8dGlm ZjpDb21wcmVzc2lvbj41PC90awZmOk NvbXByZXNzaW9uPgogICAgICAgica8dGlmZjpSZXNvbHV0aW9uVW5pdD4xPC90aWZmOlJlc29sdXRpb25Vbml0PgogICAg ICAgICA8dGlmzjpZumVzb2x1dGlvbj43MjwvdGlmzjZzb2x1dGlvbj4KICAgICAgPHRpZmY6WFJlc29sdXRpb24+NzI8L3RpZmY 6WFJlc 29sdXRPB24+CIAgICAgIDxleGlmOlBpeGVsWERPWVuc2lvbj4xMDwvZXhpZjpQaXhlbFhEaW1lbnNpb24+CIAg ICAgIDaxeGlmOkNvbG9yU3BhY2U+MTwvZXHPZjpDb2xvclNwYWNlPgogICAgICAg ICAg8ZXhpZjQaXhlb FlEaW1lbn npb224+MTA8 L2V4aWY6UGl4ZWxZRGltZW5zaW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkrgPgo8L3g6eG1wbWV0YT4KbQS91AAAAB1JREFUGBljZGBgOA7EBAETQRvQBaMK8YYU0cEDAE1HANt9zybzAAAAAElFTkSuQmCC）；
背景：rgba（0,0,0,0.8）；
羽毛灯画廊
你需要使用一个扩展（featherlight.gallery.js）。由于featherlight是为了尽可能小而简单地创建的，所以它选择了一些功能，并允许你通过使用扩展添加额外的功能。featherlight.gallery.js是一个小的扩展，可以将一组链接变成一个库。
画廊安装
只需在常规的羽化文件后面包含扩展名CSS和JavaScript文件，如下所示：
<link href="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.css" type="text/css" rel="stylesheet" />
<link href="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.gallery.min.css" type="text/css" rel="stylesheet" />
在正文底部添加JavaScript：
看看这里的例子：带羽毛灯的画廊
画廊配置
该库还具有一系列配置选项和以下默认值：
它还覆盖其autoBind全局选项：
纯HTML示例：
JavaScript中的示例（假设页面中有gallery类的a标签）：
图库响应previous和next的自定义事件，导航到上一个和下一个图像。
它将在触摸设备上使用滑动事件，而不是导航按钮，假设还安装了一个受支持的滑动库。
如果当前幻灯片是第一张和/或最后一张，则设置类别'featherlight-first-slide'和'featherlight-last-slide'。
画廊安装
只需在常规的羽化文件后面包含扩展名CSS和JavaScript文件，如下所示：
<；链接href=“//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/flowlight.min.css“type=”text/css“rel=”stylesheet“/>；
<；链接href=“//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/flowlight.gallery.min.css“type=”text/css“rel=”stylesheet“/>；
<；script src=“//code.jquery.com/jquery最新.js”></脚本>；
<；脚本src=“//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/flowlight.min.js“type=”text/javascrip
t“charset=”utf-8“>；<；/script>；
<；脚本src=“//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/flowlight.gallery.min.js“type=”text/javascript“charset=”utf-8“>；<；/script>；
移动设备上的多媒体资料
要支持移动/平板电脑和所有触摸设备，您需要包含一个受支持的滑动库。例如，要使用swipe_detect库，请将其包含在标题中：
支持
问题
对于问题，请使用Stack Overflow，并确保使用featherlight.js标记。请提供一个例子，例如从这个jsfiddle开始
报告错误和问题
如果你认为你发现了一个bug，请在Github上打开一个问题，并提供一个从这个jsfiddle开始的例子。
拉取请求
欢迎拉取请求（可以在Stack Overflow上找到好的提示）
要运行测试，您可以在浏览器中打开test/featherlight.html或test/featherlight_gallery.html。
或者，在grunt test的情况下从控制台运行它们；您需要第一次运行npm install。
来自 figcaption 的 Featherlight Lightbox 字幕