¿Alguien sabe cómo cambiar el tamaño de jQuery Fancybox durante el tiempo de ejecución?¿Cómo cambias el tamaño de Fancybox en tiempo de ejecución?
Al inicializar el FancyBox que puedo hacer esto:
$("tag").fancybox({ 'frameWidth': 500, 'frameHeight': 700 });
estoy llenando la FancyBox con contenido dinámico y lo quiero para cambiar el tamaño de acuerdo con el contenido.
Si FancyBox era parte de jQuery UI, usted lo haría así:
$("tag").fancybox.option('frameWidth', 500);
Pero ya que no parece proporcionar un procedimiento de este tipo, es necesario establecer directamente la CSS:
$("#fancy_outer").css({'width': '500px', 'height': '500px'});
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).
Por lo tanto, la solución completa sería:
$("#fancy_outer").css({'width': '500px', 'height': '500px'});
$("tag").fancybox.scrollBox();
Si está utilizando la versión 1.3 de FancyBox, existe un método de cambio de tamaño:
$ .fancybox.resize();
Para la versión 2.x of Fancybox lo mismo se puede hacer con:
$ .fancybox.update()
Qué va a cambiar el tamaño de la FancyBox activo basado en el tamaño del contenido en su interior .
Esto solo cambiará el tamaño de la altura, no del ancho. – Hans
¡Gracias! Esto es valioso La mayoría de las veces, para mí, se trata de cambiar el tamaño de la altura (debido a los mensajes de error de formulario) – vdboor
Actualización probada() con fancybox 2.0.6, sin éxito. (el ancho no se actualiza, como anotó Hans) Con fancybox 2.1.5, funciona, tanto el ancho como la altura se cambian de tamaño. – Lez
$ ("# fancybox-wrap"). Ancho (ancho); // o height o lo que sea
$ .fancybox.center();
Oye después de luchar 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 este código es hacer, en primer lugar, calcular la altura del cuerpo, # FancyBox-contenido y # FancyBox-superposición. Luego, compruebe si la altura del cuerpo es menor que la altura de la superposición, si es así, asigne una nueva altura calculada a la superposición. De lo contrario, tome la altura predeterminada del cuerpo
Solo quiero que lo tenga en cuenta.
Después de buscar soluciones usando javascript para ajustar la altura y mi compañero se dio cuenta de algo impresionante.
Compruebe si los elementos que contienen # fancybox-inner tienen ACOLCHADO o MARGEN establecido.
Este es el elemento clave (hijos directos de definición # margen/relleno de FancyBox-interno.
Los elementos secundarios (# fancyfox-interiores> div>.aquí) puede tener relleno, pero no se olvide de ajustar:
$('#element').fancybox({
'onComplete' : function(){
$.fancybox.resize();
}
});
Me acaba de publicar un parche sugerido a FancyBox en su grupo de Google https://groups.google.com/forum/#!topic/fancybox/fuUuBJyTrH8 que añade un método público .fancybox.reshow $(). Esto recalculará el alto y el ancho de la caja de fantasía. Funciona tanto con window.onorientationchange y window.onresize, por ejemplo:
window.onresize = function() {
$.fancybox.reshow();
}
$ .fancybox.resize(); No funcionó para mí, así que me he puesto este código en la página cargada, dentro del marco flotante FancyBox:
$(document).ready(function(){
parent.$("#fancybox-content").height($(document).height());
});
También podría ponerlo en una devolución de llamada:
$("#mydiv").toggle('fast', function(){
parent.$("#fancybox-content").height($(document).height());
});
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 lo llaman en el evento cuando se necesita ... (por ejemplo Uploadify eventos onSelect -.> lista de archivos a largo FancyBox hace tan grande, y calcular la altura de nuevo)
... 'onSelect' : function(event,ID,fileObj){
overlay();
}, ...
Este es la solución de mi:
$("#linkpopup").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'elastic',
'onComplete' : function(){
$.fancybox.resize();
}
});
Tuve problemas para cambiar el tamaño de la fancybox también. La solución es $.fancybox.reposition();
¡Funciona como un encanto!
Encontré una solución a este error después de buscar durante mucho tiempo en Google pero no encontré nada.
Para cambiar el tamaño del área a la anchura y la altura de la página y el centro de ella, hacer 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();
}
});
});
Gracias a todos los que contribuyen a StackOverflow.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 dimensión PHP vars que se le pasaron. Entonces llamados y el atributo en un click-caso, con la función de control y los parámetros FancyBox incrustado dentro ...
<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();
}
});
});
Mi solución era así (por FancyBox 1.3.4):
hallazgo
$.fancybox.resize = function() {
if (overlay.is(':visible')) {
overlay.css('height', $(document).height());
}
$.fancybox.center(true);
};
y sustituirlo por
$.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);
};
Gracias por ahorrar mi tiempo ... +1 – Toretto
En mi caso, yo m 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.
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();
Uso:
parent.jQuery.fancybox.update();
En FancyBox 3 (versión más reciente)
parent.jQuery.fancybox.getInstance().update();
no puede usted acaba de establecer el contenido y llamar a fancybox de nuevo? – rossipedia