1

I have a situation where several featherlight.js lightboxes (https://github.com/noelboss/featherlight) are open at the same time. I want that when one is closed, the rest are all closed as well. I tried something like this on the parent page:

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

which doesn't work. From what I could gather afterClose is called after any lightbox is closed so I thought that setting might close the others... I'm really not good with javascript, does anyone have some simple way to do this?

Edit: I've included snippets of code that recreates my process below. I'm working with Wordpress so some of the links are using PHP etc.

Include featherlight:

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

Each one of my custom wordpress post types is opened in a lightbox:

<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>

Then inside each post (so effectively in the new lightbox's content), there is this code, which gets the url of the next post and makes a link so that the next post can be opened in a lightbox

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

This means that after clicking next a few times there are several windows open (the user can only see the latest one until he/she closes it, then they can see the one before etc), which is why I wanted them all to close when the first one is closed.

Initially I did try and close a window before another opened which would be a nicer solution but struggled a lot with how that would potentially work, and I thought this way might be easier!

Tom F
  • 443
  • 1
  • 4
  • 16
  • Can you post example code here or on jsfiddle? I'd guess that you need to make a selection in your afterClose statement. if they all have the same class, you maybe could do afterClose: function(){ $('.boxes').close(); } – TJBlackman Dec 26 '17 at 16:41
  • @TJBlackman What example code would you like to see? Happy to post some. I tried using that function but there was a console error saying that the close function didn't exist. I then tried the same but with afterClose: function(){ $('.boxes').featherlight.close(); } which removed the error but still no luck in terms of closing the boxes. Of course I made sure all the boxes had the class .boxes so that wasn't the issue. – Tom F Dec 26 '17 at 17:01

1 Answers1

3

First of all - when adding in your own customizations, most plugins ask you to include tham as a options objects when you call the plugin. This way you're customizing you single instance of the code, but you're not affecting the source code, which could affect other instances of the plugin on the same page.

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

Secondly, in your afterClose property, you're calling the function immediately. That's what the () does in javascript. What the plugin is looking for is a function to call when this code is suppose to run. So just don't include the ()

You can write out an anonymous function:

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

Or, you can define / declare a named function to be called:

var closeAll = function closeAll(){ $.featherlight.close(); }
// then list it
afterClose: closeAll
TJBlackman
  • 1,895
  • 3
  • 20
  • 46
  • Yes I have my options set in the way you've described, and they're working because the openSpeed setting is working fine. But with the anonymous afterClose function ( afterClose: function(){ $.featherlight.close(); } ) the other windows are still not closing when one gets closed. – Tom F Dec 26 '17 at 22:08
  • Ok, you need to post code examples then. Can you make a jsFiddle and post it or a code snippet on stackoverflow? I'm trying to create an example, but i can't get more than one pop-up at a time, so im not sure how you're using the plugin. – TJBlackman Dec 26 '17 at 22:31
  • I've added a lot more detail to the initial post, hopefully it all makes sense now. Really appreciate you helping me out! – Tom F Dec 26 '17 at 23:13
  • That one only closes the current pop-up. This one closes them all, although it's a tiny bit hacky... https://jsfiddle.net/79o2bg7b/1/ – TJBlackman Dec 26 '17 at 23:52
  • Hacky is fine for my purposes! Works great, thanks you so much – Tom F Dec 27 '17 at 00:54
  • small question: when i use the close function and then try to reopen my div again? => it seems that the close command kind of vanished my div's content. how do i prevent it from doing so? and being able to multiple open / close the same div? – Kosem Apr 24 '18 at 16:00
  • I recommend opening a new questions and possibly even creating a JS fiddle so we can see what youre code looks like. This fiddle answers the questions and does not remove any content from the DOM. https://jsfiddle.net/79o2bg7b/1/ – TJBlackman Apr 24 '18 at 21:21