Fancybox: ¿se está actualizando el tamaño de fancybox con contenido Iframe?

Question

En mi sitio, abro un fancybox que contiene contenido IFRAME. ¿Es posible actualizar el tamaño de la fancybox cuando se hace clic en un enlace dentro de ella?

Por ejemplo, tengo configurado el ancho de 535px inicialmente, cuando se hace clic en un enlace específico, me gustaría que la fancybox cambie el tamaño a 900px de ancho.

¿Alguna idea de cómo puedo lograr esto?

Gracias!

Answer 1

Creo que sólo tengo el mismo problema y en mi caso, fancybox.resize no funcionaba, pero esto funcionó para mí:

$("#lightbox").fancybox({ 
    'hideOnContentClick' : true, 
    'width' : 500, 
    'type' : 'iframe', 
    'padding' : 35, 
    'onComplete' : function() { 
    $('#fancybox-frame').load(function() { // wait for frame to load and then gets it's height 
     $('#fancybox-content').height($(this).contents().find('body').height()+30); 
    }); 
    } 
});

crédito a Ian Hoar a la publicación que aquí: http://www.ianhoar.com/2011/08/25/jquery-and-fancybox-how-to-automatically-set-the-height-of-an-iframe-lightbox/

Answer 2

$('a', $('#youriframeID').contentDocument).bind('click', function() { 
    preventDefault(); 
    $('#yourIframeID').attr('src', $(this).attr('href')); 
    $('#yourIframeID').load(function() { 
     $.fancybox.resize; 
    }); 
}); 

Si se hace clic en una 'a' dentro de su iframe, los eventos predeterminados se bloquearán. En cambio, cambiamos el src de su iframe. Cuando está cargado, # .fancybox.resize cambiará automáticamente el tamaño de la fancybox con respecto al contenido. Esta es una idea, por lo que el código probablemente aún no funcione. Solo para ayudarlo a ponerse en el camino correcto.

Answer 3

para aquellos que vienen aquí usando FancyBox 2:

Este es el código que funcionó para mí

$(".iframe").fancybox({ 
        autoSize: false, 
        autoDimensions: false, 
        width: 630, 
        height: 425, 
        fitToView: false, 
        padding: 0, 
        title: this.title, 
        href: $(this).attr('href'), 
        type: 'iframe' 
       }); 

Answer 4

Esto funciona para mí en FancyBox v2.1.4

$('#myid').fancybox({ 
    closeBtn : false, 
    padding  : 0, 
    preload  : true, 
    onUpdate : function(){ 
     $.fancybox.update(); 
    } 
});