Позиция FancyBox 2 вручную

я не могу за жизнь мне понять, как я могу изменить FancyBox 2 использовать left: 47px; и top: 147pxПозиция FancyBox 2 вручную

Я прочитал исходный код, и без взлома, я не вижу способ переопределить позиционирование.

Установка autoCenter на ложную остановку автоцентрирования после сначала раз она это делает.

Использование jQuery для изменения CSS или предоставления пользовательской оболочки для применения CSS тоже не работает, поскольку Fancybox всегда добавляет встроенный CSS, который перезаписывает все мои попытки.

Есть ли способ сказать Fancybox прекратить позиционирование и использовать мое абсолютное позиционирование?

источник

2012-03-29 bafromca

Возможно, вы можете сделать это с помощью плохо документированной опции 'helpers:'. Я бы опубликовал его в качестве ответа, если бы смог найти точный код. – Sparky

Я ничего не нахожу. Я не думаю, что вы хотите сделать, это вариант без редактирования исходного кода плагина. Если вы собираетесь это сделать, вы можете просто добавить свои дополнительные параметры позиционирования, чтобы по крайней мере плагин оставался масштабируемым. – Sparky

Можно использовать стили override inline CSS с использованием модификатора !important.

Для случая использования FancyBox следующее переопределяет позиционирование JavaScript:

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

источник

2012-03-29 19:53:40 leepowers

Это перезаписывается встроенным CSS, который Fancybox 2 вводит с помощью css() jQuery. – bafromca

Это странно - '!important' должен переопределять любой встроенный стиль, включая стили, заданные с помощью 'css()' - см. здесь: http://jsfiddle.net/YKhEG/ - возможно, '# fancybox-wrap' - неправильный селектор? – leepowers

Вот что это такое: это .fancybox-wrap. Вы правы, это все, что мне нужно. Спасибо! – bafromca

Не можете вы изменить CSS, как так? Очевидно, изменив свойство маржи на «сверху» и «левые»

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

источник

2012-03-29 20:41:09 gerl

Я решил эту проблему, добавив вручную новый CSS-класс в beforeShow-обработчике. Я использовал fancybox2.

CSS:

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

ЯШ:

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

источник

2012-06-11 14:31:26

Я думаю, вы не можете изменить CSS таким образом, вызвать ядро FancyBox редактирует свойство стиля # FancyBox плёнку все время. Поэтому вы должны добавить новый класс, как в моем примере. В противном случае вы не увидите изменений visuell.

источник

2012-10-02 12:20:02

У меня есть аналогичная проблема - я хочу вручную разместить fancybox, но он автоматически сохраняет центрифугирование.

Я решил его отключить функции центра:

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

источник

2013-02-24 04:11:54

Я нашел это решение для fancybox2. Вы можете переопределить метод _getPosition по умолчанию, чтобы предотвратить изменение одного или нескольких измерений.

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

источник

2014-11-30 22:19:19 TractorCow

Это приятное решение. Как бы вы получили это, чтобы позиционировать fancybox над верхней частью триггерного элемента и слегка смещаться вправо на 20 пикселей? И что означает 'onlyAbsolute' в вашем примере кода? –

Lucas Teixeira был прав! Это сработало для меня. Сначала отключите функцию центра, затем используйте событие onComplete, чтобы установить встроенный css по своему усмотрению.

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

источник

2016-03-01 17:14:15

Позиция FancyBox 2 вручную

ответ

Смежные вопросы