Manual Fancybox 2 Position

Question

I can not for a lifetime to understand me, how can I move the Fancybox 2 to use left: 47px; and top: 147px

I am reading the source code and not hacking it; I see no way to redefine positioning.

Setting autoCenter to false only stops auto-centering after the first time.

Using jQuery to change CSS or providing a custom wrapper for applying CSS also does not work, since Fancybox always adds inline CSS that overwrites all my attempts.

Is there any way to tell Fancybox to stop positioning and use my absolute positioning?

Answer 1

You can override inline CSS with the !important modifier.

If using Fancybox, the following will override the location of JavaScript:

 .fancybox-wrap { top: 147px !important; left: 47px !important; } 

Answer 2

I solved this problem by manually adding a new css class to beforeShow-Handler. I used fancybox2.

CSS

 .fancybox-wrap22 { top: 22% !important; } 

JS:

 $(".open_fancybox").click(function() { $.fancybox.open('<h1>lorem ipsum</h1>', { beforeShow : function() { $('.fancybox-wrap').addClass('fancybox-wrap22'); } }); return false; }); 

Answer 3

I found this solution for fancybox2. You can override the default _getPosition method to prevent one or more dimensions from changing.

 // Disable vertical repositioning var orig = $.fancybox._getPosition; $.extend($.fancybox, { _getPosition: function(onlyAbsolute) { var rez = orig(onlyAbsolute); delete rez.top; return rez; } }); 

Answer 4

Can't you change css like that? Obviously changing the margin property to "top" and "left"

 $("a.fancybox1").fancybox({ 'hideOnContentClick': false, 'onComplete' : function() { $("#fancybox-wrap").css('margin', 'auto'); } }); 

Answer 5

I think you cannot change css this way because the fancybox core constantly edits the style # fancybox-wrap property. Therefore, you should add a new class, as in my example. Otherwise, you will not see visuell changes.

Answer 6

I have a similar problem - I want to manually place the fancybox, but it automatically keeps centering.

I decided to disable the center function:

 $.fancybox.center = function(){}; 

Answer 7

Lucas Teixeira was right! It worked for me. Disable the center function first, then use the onComplete event to set the inline css as you like.

  <script> jQuery(document).ready(function () { //turn off center function $.fancybox.center = function () { }; //use onComplete event to modify inline css $("#ModalPopup").fancybox({ 'modal': true, 'onComplete': function () { $("#fancybox-wrap").css({ 'left': '250px', 'top': '150px' }); } }); }); </script>