CODEWITHSUNDEEP
jqueryscrollfancybox
Björn
Björn

Reputation: 13207

fancybox - how to scroll page when fancybox is focused

go to: http://fancybox.net/ open any example (on bottom page)

when the mouse is hovered over the content inside the fancybox, the browser main window can´t be scrolled. when the mouse is anywhere else it works. i dont want this behavior. how would you fix this?

the page under the fancybox modal doenst scroll, when the mousecursor is inside the fancyboxmodal.

Upvotes: 2

Views: 9371

Answers (8)

Vilas Kumkar
Vilas Kumkar

Reputation: 1400

for fancyBox - jQuery Plugin version: 2.1.5

'afterShow': function () {
    $(".fancybox-wrap").unbind('mousewheel.fb');
},

'onComplete' dosen't work!!!

Upvotes: 0

Ethan Kawkji
Ethan Kawkji

Reputation: 227

Add the following to the plugin options:

helpers:  {
    overlay: {
      locked: false
    }
}

Thanks to pheonix for pointing this at https://stackoverflow.com/a/14880963/1655981

Upvotes: 0

Luis Amor
Luis Amor

Reputation: 167

In the fancybox options, you can do:

onComplete: function(){
  $("#fancybox-wrap").unbind('mousewheel.fb');
}

and then you can do mouse scroll in any box with overflow

Upvotes: 2

dipo
dipo

Reputation: 33

If you don't need ability to scroll images in gallery with mousewheel, then good solution is to add $('#fancybox-wrap').unbind('mousewheel.fb'); just after .fancybox() initialization as mentioned by vbulant

Upvotes: 2

vbulant
vbulant

Reputation: 152

Well, the simplest solution is to add $('#fancybox-wrap').unbind('mousewheel.fb'); just after .fancybox() initialization.

Upvotes: 7

JFK
JFK

Reputation: 41143

Marcel,

Don't get complicated. You don't have to mess with the fancybox js file at all. The function mentioned above has a purpose.

The reason the page behaves the way you described, is because it has loaded the jQuery mousewheel plugin, which is used to navigate through galleries inside fancybox using the mouse wheel.

If you don't load the mousewheel plugin (included with the download of fancybox), then you could scroll the parent page regardless you hover inside the content of fancybox or not. Of course, if you have galleries, then you have to use the arrows to navigate through them.

Upvotes: 1

ori
ori

Reputation: 7847

Indeed the bit of code Rob mentioned is the culprit. But instead of changing fancybox itself you can do something like this:

$('#fancybox-outer').mousewheel(function(event, delta) { 
  event.stopPropagation();
  $('#fancybox-wrap').trigger('mousewheel.fb', delta);
});

This would catch the wheel event on #fancybox-outer, and prevent the event from bubbling up to #fancybox-wrap.

So the default behaviour of scrolling will take place, but you can also trigger the blocked mousewheel event handler manually like I did.

Upvotes: 6

Rob W
Rob W

Reputation: 349042

Look in the source code of Fancybox, and replace the code marked by if ($.fn.mousewheel) {...} with the following (The fullly modified code can be found here). 

    if ($.fn.mousewheel) {
        wrap.bind('mousewheel.fb', function(e, delta) {
            if (!busy && $(e.target).get(0).clientHeight == 0 || $(e.target).get(0).scrollHeight === $(e.target).get(0).clientHeight) {
                // Remove the next line too, if you want weird movements
                // at the image gallery example...
                e.preventDefault();
                $.fancybox[ delta > 0 ? 'prev' : 'next']();
            }
        });
    }

The creators of Fancybox disabled scrolling on Fancybox elements, without adding an option to customise this. Hence you have to manually edit the code.

Upvotes: 3

Related Questions