Come si ridimensiona Fancybox in fase di runtime?

Question

Qualcuno sa come ridimensionare jQuery Fancybox durante il runtime?

Quando si inizializza il fancybox posso fare questo:

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

sto riempiendo la fancybox con contenuti dinamici e lo voglio per ridimensionare in base al contenuto.

Answer 1

Se Fancybox faceva parte di jQuery UI, lo faresti in questo modo:

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

Ma in quanto non sembra fornire un tale metodo, è necessario impostare direttamente il CSS:

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

Answer 2

La soluzione di Alan è incompleta perché la casella non è più centrata sullo schermo dopo aver modificato la dimensione (almeno con le ultime versioni di jquery e fancybox).

Quindi, la soluzione completa sarebbe:

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

Answer 3

Se si utilizza la versione 1.3 di Fancybox, v'è un metodo di ridimensionamento:

$ .fancybox.resize();

Per la versione 2.x of Fancybox lo stesso sarebbe stato fatto con:

$ .fancybox.update()

Quale sarà ridimensionare la fancybox attiva in base alla dimensione del contenuto al suo interno .

Answer 4

$ ("# fancybox-wrap"). Width (larghezza); // o altezza o altro

$ .fancybox.center();

Answer 5

E dopo aver combattuto per quasi due giorni, sono riuscito a modificare l'altezza di sovrapposizione. Spero che questo può essere utile:

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

cosa questo codice facendo è, in primo luogo calcolare l'altezza del corpo, # fancybox-content e # fancybox-overlay. Quindi controlla se l'altezza del corpo è inferiore all'altezza della sovrapposizione, se sì allora assegna la nuova altezza calcolata alla sovrapposizione altrimenti prende l'altezza predefinita del corpo

Answer 6

Voglio solo farti prendere coscienza.

Dopo aver cercato soluzioni utilizzando javascript per regolare l'altezza, io e il mio partner abbiamo realizzato qualcosa di straordinario.

Verificare se gli elementi di contenimento di # fancybox-inner hanno IMPOSTAZIONI o IMPOSTAZIONI MARGINE.

Questo è l'elemento chiave (i figli diretti di # fancybox-interiore definizione margine/padding.

Gli elementi per bambini (# fancyfox-interni> div>.qui) possono avere imbottitura, ma non dimenticate di regolare:

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

Answer 7

Ho appena pubblicato una patch suggerito di Fancybox sul suo gruppo Google https://groups.google.com/forum/#!topic/fancybox/fuUuBJyTrH8 che aggiunge un metodo pubblico $ .fancybox.reshow(). Questo ricalcola l'altezza e la larghezza della fancybox. Funziona sia con window.onorientationchange e window.onresize, ad esempio:

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

Answer 8

$ .fancybox.resize(); Non ha funzionato per me, così ho messo questo codice nella pagina caricata, dentro l'iframe fancybox:

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

Si potrebbe anche metterlo in una richiamata:

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

} 

e lo chiamano il caso quando si ha bisogno ... (ad esempio uploadify evento onSelect -.> lunga lista di file rende fancybox così grande, e calcoliamo di nuovo altezza)

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

overlay(); 

}, ... 

Answer 10

Questo è la soluzione il mio:

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

Answer 11

Ho faticato anche con il ridimensionamento di fancybox. La soluzione è $.fancybox.reposition();

Funziona come un fascino!

Answer 12

Ho trovato una soluzione a questo errore dopo averlo cercato a lungo in Google ma non trovando nulla.

Per ridimensionare la casella per la larghezza e l'altezza della pagina e al centro di esso, fare questo:

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

Grazie a tutti coloro che contribuiscono a StackOverflow.com. Tutti voi mi avete salvato la vita molte volte. Ora, finalmente posso dare il mio contributo. Di seguito è come sono stato in grado di venire il ridimensionamento fancybox in runtime quandry:

Ho assegnato gli attributi specifici dell'elemento href con le varselle di dimensione PHP passati ad esso. poi chiamato e impostare l'attributo in un click-evento, con la funzione di controllo fancybox e parametri incorporati all'interno ...

<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

La mia soluzione era così (per fancybox 1.3.4):

find

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


     $.fancybox.center(true); 
    }; 

e sostituirlo 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 15

Nel mio caso, io' m utilizzando Fancybox per visualizzare una pagina Web molto semplice che contiene solo un'immagine. Questa immagine potrebbe variare in dimensioni. Il mio problema era che l'immagine non includeva style="height: NNpx; width: NNpx;". In caso contrario, la funzione autoSize di fancybox potrebbe fornire risultati imprevisti (indicati nei documenti http://fancyapps.com/fancybox/).

tl; dr: fornisce gli attributi di larghezza e altezza per il corretto funzionamento di AutoSize.

Answer 16

Questo metodo funziona per me.:)

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

Usa:

parent.jQuery.fancybox.update(); 

Answer 18

Su Fancybox 3 (nuova versione)

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

Rif:http://fancyapps.com/fancybox/3/docs/#iframe