Scroll to close doesn't work like in Medium

[elron]

Hey,
I tried to open the demo in chrome + edge but whenever I scroll when there's a picture open, it doesn't close it.
Notice how in Medium's site you can scroll up or down, and it will close it after like 500ms, but it doesn't work in Fluidbox.
I've seen this comment but its not identical to how Medium fluidbox behaves. See, in Medium you can scroll up to 60 pixels down/up but nothing happens. only when you cross that 60 pixels, it fires the close event.

Will this be fixed?
Other than that its really awesome!!
I appreciate your work!
Elron

[terrymun]

The comment you have linked is a good place to start: you can always modify it to suit your needs (in this case, an exact Medium replica in terms of UX). Fluidbox is not meant to be a verbatim copy of Medium's lightbox component, but more of a study of it. It is extremely minimal and stripped down, but powerful in the sense that it emits a lot of events that you can use as hooks for calling custom methods.

So, this is not a bug per se that has to be fixed ;)

[elron]

I see :) thanks for your detailed answer!
Is the plugin extendable? for example, if I want to add another JS with that event feature without breaking or changing your original code - is that possible? (having the fluidbox-main.js file and the fluidbox-extension.js)

[terrymun]

The plugin does not allow you to register custom events, but you can feel free to create a fork and merge in the master branch whenever it is updated.

Speaking of your original question, a slightly modification to the code snippet you linked should work (I have not tested it tho):

// Initialise Fluidbox
$('a').fluidbox();

// Listen to scroll
// Note: You might want to throttle the callback, e.g.:
// - Use jQuery throttle/debounce plugin
// - Use underscore/lodash _.throttle
var scrollPosition;
$(window).scroll(function() {
    var currentScrollPosition = $(window).scrollTop();
    
    // If has scrolled beyond plus/minus 60 pixels
    if (Math.abs(currentScrollPosition - scrollPosition) > 60)
    	$('a').fluidbox('close');

    // Update global scroll position store
    scrollPosition = currentScrollPosition;
});

[elron]

oh thats genius! thanks.
Haven't tested it yet but it looks neat.