javascript - 关闭所有 featherlight jQuery 灯箱

Question

我有几个 featherlight.js 灯箱 ( https://github.com/noelboss/featherlight ) 同时打开的情况。我希望当一个关闭时，其余的也都关闭。我在父页面上尝试过这样的事情:

$.extend($.featherlight.defaults, {
    openSpeed: 1000,
    afterClose: $.featherlight.close()
});

这是行不通的。根据我收集到的信息，afterClose 在任何灯箱关闭后被调用，所以我认为设置可能会关闭其他灯箱......我真的不擅长 javascript，有没有人有一些简单的方法来做到这一点？

编辑: 我在下面包含了重新创建我的过程的代码片段。我正在使用 Wordpress，所以一些链接使用的是 PHP 等。

包括羽毛灯:

<script src="<?php bloginfo('template_url'); ?>/featherlight/featherlight.min.js" type="text/javascript" charset="utf-8">
</script>

我的每个自定义 wordpress 帖子类型都在灯箱中打开:

<div class="grid2By1" style="background-image: url('<?php the_post_thumbnail_url(); ?>');">
  <a href="#" data-featherlight="<?php the_permalink(); ?>">
    <p><?php the_title() ;?></p>
  </a>
</div>

然后在每篇文章中(在新灯箱的内容中如此有效)，有这段代码，它获取下一篇文章的 url 并创建一个链接，以便可以在灯箱中打开下一篇文章

<?php $next = get_permalink(get_adjacent_post(false,'',true)); ?>
<a href="#" data-featherlight="<?php echo $next; ?>">NEXT</a>

这意味着在点击下一步之后有几个窗口打开(用户只能看到最新的，直到他/她关闭它，然后他们才能看到之前的那个等等)，这就是为什么我想要它们在第一个关闭时关闭。

最初我确实尝试过在打开另一个窗口之前关闭一个窗口，这将是一个更好的解决方案，但我对它的潜在工作方式进行了很多努力，我认为这种方式可能更容易!

Answer 1

首先 - 当添加您自己的定制时，大多数插件会要求您在调用插件时将它们作为 options 对象包含在内。通过这种方式，您可以自定义代码的单个实例，但不会影响源代码，源代码可能会影响同一页面上插件的其他实例。

var options = {
    afterClose: some_code,
    propertyTwo: some_value,
    propertyThree: etc_etc
}
$('some_selector').featherlightGallery(options);

其次，在您的 afterClose 属性中，您将立即调用该函数。这就是 () 在 javascript 中所做的。插件正在寻找的是一个函数，当该代码应该运行时调用。所以不要包含 ()

你可以写出一个匿名函数:

afterClose: function(){ $.featherlight.close(); }

或者，您可以定义/声明要调用的命名函数:

var closeAll = function closeAll(){ $.featherlight.close(); }
// then list it
afterClose: closeAll