Как вы изменяете размер Fancybox во время выполнения?

Question

Кто-нибудь знает, как изменить размер jQuery Fancybox во время выполнения?

При инициализации fancybox я могу сделать это:

$("tag").fancybox({ 'frameWidth': 500, 'frameHeight': 700 });

Я заполняю fancybox динамическим контентом и хочу изменить его размер в соответствии с контентом.

Answer 1

Если вы используете версию 1.3 Fancybox, существует метод изменения размера:

.

$ fancybox.resize ();

Для версии 2.x Fancybox то же самое будет сделано с:

$. Fancybox.update ()

Что изменит размер активного fancybox в зависимости от размера содержимого внутри него.

Answer 2

Решение Алана неполное, потому что окно больше не центрируется на экране после изменения размера (по крайней мере, в последних версиях jquery и fancybox).

Итак, полное решение будет:

$("#fancy_outer").css({'width': '500px', 'height': '500px'});
$("tag").fancybox.scrollBox();

Answer 3

Я нашел одно решение этой ошибки после долгого поиска в Google, но ничего не нашел.

Чтобы изменить размер поля по ширине и высоте страницы и отцентрировать его, сделайте следующее:

$("#click-to-open").click(function(){

    var url = "url-loader.php";
    $.fancybox({
        'autoScale'           : false,
        'href' : url,
        'padding'             : 0,
        'type' : 'iframe',
        'titleShow' : false,
        'transitionIn'        : 'elastic',
        'transitionOut'       : 'elastic',
        'onComplete' : function(){
            $('#fancybox-content').removeAttr('style').css({ 'height' : $(window).height()-100, 'margin' : '0 auto', 'width' : $(window).width()-150 });
            $('#fancybox-wrap').removeAttr('style').css({ 'height' : $(window).height()-100, 'margin' : '0 auto', 'width' : $(window).width()-150 }).show();
            $.fancybox.resize();
            $.fancybox.center();
        }
    });
});

Answer 4

Я просто хочу, чтобы вы знали об этом.

После поиска решений с использованием javascript для регулировки высоты я и мой партнер осознали что-то потрясающее.

Проверьте, есть ли в элементах # fancybox-inner элементы PADDING или MARGIN.

Это ключевой элемент (прямые дочерние элементы определения # fancybox-inner margin / padding.

Дочерние элементы (# fancyfox-inner> div> .here) могут иметь отступы, но не забудьте настроить:

 $('#element').fancybox({
    'onComplete' : function(){
        $.fancybox.resize();
    }
}); 

Answer 5

Эй, после двухдневного боя, мне удалось изменить высоту оверлея. Надеюсь, что это может быть полезно:

$('#register-link a').fancybox({
    onComplete: function(){
        body_height = $('body').height();
        fancybox_content_height = $('#fancybox-content').height();
        fancybox_overlay_height = fancybox_content_height + 350;
        if(body_height < fancybox_overlay_height ) {
            $('#fancybox-overlay').css('height', fancybox_overlay_height+'px');
        }
    }
});

Что этот код делает, он сначала вычисляет высоту тела, # fancybox-content и # fancybox-overlay. Затем он проверяет, меньше ли высота тела, чем высота наложения, если да, тогда он назначает новую вычисленную высоту наложению, иначе он принимает высоту тела по умолчанию

Answer 6

$ ( "# FancyBox-обертка") ширина (ширина). // или высота или что-то еще

.

$ fancybox.center ();

Answer 7

Если бы Fancybox был частью jQuery UI, вы бы сделали это так:

$("tag").fancybox.option('frameWidth', 500);

Но так как он не предоставляет такой метод, вам нужно установить CSS напрямую:

$("#fancy_outer").css({'width': '500px', 'height': '500px'});

Answer 8

function overlay(){
   var outerH = $('#fancybox-outer').height();
   var bodyH  = $(window).height();
   var addH   = 300; //add some bottom margin

   if(outerH>bodyH){
    var newH = outerH + addH;
   }else{
    var newH = bodyH + addH;
   }

   $('#fancybox-overlay').height(newH+'px');

   $.fancybox.center();

}

и вызывать его по событию, когда вам нужно ... (например, событие uploadify onSelect -> длинный список файлов делает fancybox таким большим, и мы снова вычисляем высоту)

... 'onSelect' : function(event,ID,fileObj){

overlay();

}, ...

Answer 9

Этот метод работает для меня. :)

$(".fancybox-wrap.fancybox-desktop.fancybox-type-iframe.fancybox-opened").css({"height": heightToAdjust});
$(".fancybox-inner").css({"height": heightToAdjust});
if ($.fancybox.isOpened) {
   if ($.fancybox.current) {
      $.fancybox.current.height = heightToAdjust;
   }
}
$.fancybox.reposition();

Answer 10

Мое решение было таким (для fancybox 1.3.4):

найти

$.fancybox.resize = function() {
        if (overlay.is(':visible')) {
            overlay.css('height', $(document).height());
        }


        $.fancybox.center(true);
    };

и заменить на

$.fancybox.resize = function() {
    if (overlay.is(':visible')) {
        overlay.css('height', $(document).height());
    }

    view = _get_viewport();
    var updated_width = view[0];
    if (updated_width > selectedOpts.width) { updated_width = selectedOpts.width; }

    $("#fancybox-wrap, #fancybox-content").css("width", updated_width);        

    $.fancybox.center(true);
};