关闭所有 featherlight jQuery 个灯箱
Close all featherlight jQuery lightboxes
我有几个 featherlight.js 灯箱 (https://github.com/noelboss/featherlight) 同时打开的情况。我希望当一个关闭时,其余的也都关闭。我在父页面上尝试过这样的事情:
$.extend($.featherlight.defaults, {
openSpeed: 1000,
afterClose: $.featherlight.close()
});
这是行不通的。据我所知,afterClose 在任何灯箱关闭后被调用,所以我认为设置可能会关闭其他灯箱......我真的不擅长 javascript,有人有一些简单的方法来做到这一点吗?
编辑:
我在下面包含了重新创建我的过程的代码片段。我正在使用 Wordpress,所以一些 link 正在使用 PHP 等
包括羽毛灯:
<script src="<?php bloginfo('template_url'); ?>/featherlight/featherlight.min.js" type="text/javascript" charset="utf-8">
</script>
我的每个自定义 wordpress post 类型都在灯箱中打开:
<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>
然后在每个 post 中(在新灯箱的内容中如此有效),有这段代码,它获取下一个 post 的 url 并生成 link 以便下一个 post 可以在灯箱中打开
<?php $next = get_permalink(get_adjacent_post(false,'',true)); ?>
<a href="#" data-featherlight="<?php echo $next; ?>">NEXT</a>
这意味着点了几次next之后有几个windows打开(用户只能看到最新的,直到he/she关闭它,然后他们才能看到前面的等等) ,这就是为什么我希望它们在第一个关闭时全部关闭。
最初我确实尝试在另一个打开之前关闭一个 window,这将是一个更好的解决方案,但对它的潜在工作方式进行了很多努力,我认为这种方式可能更容易!
首先 - 在添加您自己的自定义项时,大多数插件会要求您在调用插件时将其作为 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
我有几个 featherlight.js 灯箱 (https://github.com/noelboss/featherlight) 同时打开的情况。我希望当一个关闭时,其余的也都关闭。我在父页面上尝试过这样的事情:
$.extend($.featherlight.defaults, {
openSpeed: 1000,
afterClose: $.featherlight.close()
});
这是行不通的。据我所知,afterClose 在任何灯箱关闭后被调用,所以我认为设置可能会关闭其他灯箱......我真的不擅长 javascript,有人有一些简单的方法来做到这一点吗?
编辑: 我在下面包含了重新创建我的过程的代码片段。我正在使用 Wordpress,所以一些 link 正在使用 PHP 等
包括羽毛灯:
<script src="<?php bloginfo('template_url'); ?>/featherlight/featherlight.min.js" type="text/javascript" charset="utf-8">
</script>
我的每个自定义 wordpress post 类型都在灯箱中打开:
<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>
然后在每个 post 中(在新灯箱的内容中如此有效),有这段代码,它获取下一个 post 的 url 并生成 link 以便下一个 post 可以在灯箱中打开
<?php $next = get_permalink(get_adjacent_post(false,'',true)); ?>
<a href="#" data-featherlight="<?php echo $next; ?>">NEXT</a>
这意味着点了几次next之后有几个windows打开(用户只能看到最新的,直到he/she关闭它,然后他们才能看到前面的等等) ,这就是为什么我希望它们在第一个关闭时全部关闭。
最初我确实尝试在另一个打开之前关闭一个 window,这将是一个更好的解决方案,但对它的潜在工作方式进行了很多努力,我认为这种方式可能更容易!
首先 - 在添加您自己的自定义项时,大多数插件会要求您在调用插件时将其作为 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