CODEWITHSUNDEEP
jqueryhtmlfancyboxfancybox-2
Chuck Norris
Chuck Norris

Reputation: 1125

Fancybox2 unwanted fancybox-margin class added

I've a loader overlay showing when I click on an ajax fancybox. But there is always a fancybox class added to it.

Here is the fiddle.

<div class="loading hide">Loading&#8230;</div>
<a class="fancybox fancybox.ajax" href="http://fancyapps.com/fancybox/demo/1_b.jpg">
    click me
</a>

$('.fancybox').fancybox({
    beforeLoad: function () {
        $('.loading').removeClass('hide');
    },
    beforeShow: function () {
        $('.loading').addClass('hide');
    }
});

When you click on the link, show source on the result, there is a fancybox-margin added.

This class is only added when the .loading element has the position:fixed

Is there a way I can tell fancybox to not add this class?

Upvotes: 1

Views: 1104

Answers (3)

JFK
JFK

Reputation: 41143

You don't need to hack the original fancybox js file. If you do so, you will have to do it again the day you update a new version.

Just add to you custom fancybox initialization script the option

helpers: {
    overlay: {
        locked: false
    }
}

and the class fancybox-margin won't be added

Upvotes: 2

StudioTime
StudioTime

Reputation: 23989

You can look at the Fancybox code and comment out the following:

if (this.margin !== false) {
  $('*').filter(function(){
    return ($(this).css('position') === 'fixed' && !$(this).hasClass("fancybox-overlay") && !$(this).hasClass("fancybox-wrap") );
  }).addClass('fancybox-margin');

  this.el.addClass('fancybox-margin');
}

But beware dragons - I have no idea what effect this will have on the placement of the popup.

You'd probably be better having a look at the css file and playing with inspector to see what this does though first.

Upvotes: 0

Krzysiek
Krzysiek

Reputation: 2495

Only by modifying source. Remove these lines (1833-1835):

                $('*').filter(function(){
                    return ($(this).css('position') === 'fixed' && !$(this).hasClass("fancybox-overlay") && !$(this).hasClass("fancybox-wrap") );
                }).addClass('fancybox-margin');

Upvotes: 1

Related Questions