关闭所有的featherlight jQuery灯箱

问题描述 投票:0回答:1

我有一个情况,几个featherlight.js灯箱(https://github.com/noelboss/featherlight)同时打开。我希望当一个人关闭时,其他人也都关闭了。我在父页面上尝试过类似的内容:

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

这不起作用。从我可以收集的内容关闭任何灯箱关闭之后调用关闭所以我认为该设置可能会关闭其他...我真的不善于使用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>

这意味着在点击下几次之后有几个窗口打开(用户只能看到最新的窗口,直到他/她关闭它,然后他们可以看到之前的那个等),这就是为什么我希望它们全部关闭时第一个是关闭的。

最初我确实尝试在另一个窗口打开之前关闭一个窗口,这将是一个更好的解决方案,但很多可能工作的方式很困难,我认为这样可能更容易!

javascript jquery featherlight.js
1个回答
1
投票

首先 - 当您添加自己的自定义项时,大多数插件会要求您在调用插件时将tham包含为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
© www.soinside.com 2019 - 2024. All rights reserved.