jquery - close - fancybox video

¿Cómo cambias el tamaño de Fancybox en tiempo de ejecución?

Question

¿Alguien sabe cómo cambiar el tamaño de jQuery Fancybox durante el tiempo de ejecución?

Al inicializar Fancybox, puedo hacer esto:

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

Estoy llenando la fancybox con contenido dinámico y quiero que cambie el tamaño de acuerdo con el contenido.

Answer 1

Este método funciona para mí. :)

$(".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 2

Si Fancybox formaba parte de la interfaz de usuario de jQuery, lo harías así:

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

Pero como no parece proporcionar dicho método, debe establecer el CSS directamente:

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

Answer 3

La solución de Alan está incompleta porque la caja ya no está centrada en la pantalla después de modificar el tamaño (al menos con las últimas versiones de jquery y fancybox).

Entonces, la solución completa sería:

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

Answer 4

$ ("# fancybox-wrap"). ancho (ancho); // o altura o lo que sea

$ .fancybox.center ();

Answer 5

Oye, después de pelear casi dos días, logré cambiar la altura de la superposición. Espero que esto puede ser útil :

$(''#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'');
        }
    }
});

Lo que hace este código es primero calcular la altura del cuerpo, # fancybox-content y # fancybox-overlay. Luego, verifica si la altura del cuerpo es menor que la altura de la superposición, si es así, asigna una nueva altura calculada para superponer, de lo contrario, toma la altura del cuerpo por defecto.

Answer 6

Solo quiero que lo sepas.

Después de buscar soluciones usando javascript para ajustar la altura y mi compañero se dio cuenta de algo impresionante.

Comprueba si los elementos que contienen # fancybox-inner tienen PADDING o MARGIN.

Este es el elemento clave (hijos directos de # fancybox-inner margin / padding definition.

Los elementos secundarios (# fancyfox-inner> div> .here) pueden tener relleno, pero no olvides ajustar:

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

Answer 7

Acabo de publicar un parche sugerido en Fancybox en su grupo de Google https://groups.google.com/forum/#!topic/fancybox/fuUuBJyTrH8 que agrega un método público $ .fancybox.reshow (). Esto recalculará el alto y el ancho de la caja de fantasía. Funciona con window.onorientationchange y window.onresize, por ejemplo:

window.onresize = function() {
    $.fancybox.reshow();
}

Answer 8

$ .fancybox.resize (); no funcionó para mí, así que puse este código en la página cargada, dentro del iframe de fancybox:

$(document).ready(function(){
    parent.$("#fancybox-content").height($(document).height());
});

También puede configurarlo en una devolución de llamada:

$("#mydiv").toggle(''fast'', function(){
    parent.$("#fancybox-content").height($(document).height());
});

Answer 9

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();

}

y llámalo al evento cuando lo necesites ... (ej .: uploadify onSelect event -> long file list hace que fancybox sea tan grande, y calculamos altura nuevamente)

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

overlay();

}, ...

Answer 10

Tuve problemas para redimensionar Fancybox también. La solución es $.fancybox.reposition();

¡Funciona de maravilla!

Answer 11

Si está utilizando la versión 1.3 de Fancybox, hay un método de cambio de tamaño:

$ .fancybox.resize ();

Para la versión 2.x de Fancybox, lo mismo se haría con:

$ .fancybox.update ()

Lo cual redimensionará la fancybox activa según el tamaño del contenido que contiene.

Answer 12

Esta es la solución de mi:

$("#linkpopup").fancybox({
    ''titlePosition''     : ''inside'',
    ''transitionIn''      : ''none'',
    ''transitionOut''     : ''elastic'',
    ''onComplete'' : function(){
        $.fancybox.resize();
    }
});

Answer 13

Gracias a todos los que contribuyen a .com. Todos ustedes me han salvado la vida muchas veces. Ahora, finalmente puedo contribuir algo. A continuación se muestra cómo pude superar el tamaño de Fancybox en tiempo de ejecución quandry:

Asigné los atributos específicos del elemento href con la dimensión PHP vars que se le pasó. Luego se llamó y se estableció el atributo en un evento de clic, con la función de control de fancybox y los parámetros incrustados en ...

<a href="ASSET_ABSOLUTE PATH" class="asset" data-fancybox-type="iframe" assetW="$assetW" 
assetH="$assetH">LINK</a>

$(".asset").click(function(){

    var assetW = $(this).attr(''assetW'');

    //to display inter-activities..
    $(".asset").fancybox({

    width       : assetW,
    fitToView   : false,
    autoSize    : true,
    closeClick  : false,
    openEffect  : ''none'',
    closeEffect : ''none'',
       ''onComplete'' : function(){
         $.fancybox.resize();

      }
  });
});

Answer 14

Encontré una solución a este error después de buscarla durante mucho tiempo en Google pero no encontré nada.

Para cambiar el tamaño del cuadro al ancho y alto de la página y centrarlo, haga esto:

$("#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 15

Mi solución fue así (para fancybox 1.3.4):

encontrar

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


        $.fancybox.center(true);
    };

y reemplazar con

$.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);
};

Answer 16

En mi caso, estoy usando Fancybox para mostrar una página web muy simple que solo contiene una imagen. Esta imagen puede variar en tamaño. Mi problema era que la imagen no incluía style="height: NNpx; width: NNpx;" . Sin eso, la fancybox autoSize puede dar resultados inesperados (establecidos en sus documentos http://fancyapps.com/fancybox/ ).

tl; dr: proporciona atributos de ancho y alto para que AutoSize funcione correctamente.

Answer 17

Utilizar:

parent.jQuery.fancybox.update();

Answer 18

En Fancybox 3 (la última versión)

parent.jQuery.fancybox.getInstance().update();

Ref: http://fancyapps.com/freebox/3/docs/#iframe