web-dev-qa-db-fra.com

Comment redimensionnez-vous Fancybox au moment de l'exécution?

Est-ce que quelqu'un sait comment redimensionner la Fancybox jQuery pendant l'exécution?

Lors de l'initialisation de la fancybox, je peux le faire: 

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

Je remplis la fancybox de contenu dynamique et je souhaite la redimensionner en fonction du contenu.

jqueryresizefancybox
25
Swiftaxe

Si vous utilisez la version 1.3 de Fancybox, il existe une méthode de redimensionnement:

$ .fancybox.resize ();

Pour la version 2.x de Fancybox , la même chose serait faite avec:

$ .fancybox.update ()

Ce qui redimensionnera la boîte active en fonction de la taille du contenu qu'elle contient.

41
Jason Norris

La solution d'Alan est incomplète car la boîte n'est plus centrée sur l'écran après modification de la taille (du moins avec les dernières versions de jquery et fancybox).

La solution complète serait donc:

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

Je veux juste vous en faire prendre conscience.

Après avoir cherché des solutions utilisant javascript pour régler la hauteur, mon partenaire et moi avons réalisé quelque chose d'étonnant.

Vérifiez si les éléments contenant de # fancybox-inner ont PADDING ou MARGIN.

C'est l'élément clé (enfants directs de la définition de # fancybox-inner margin/padding.

Les éléments enfants (# fancyfox-inner> div> .here) peuvent avoir un rembourrage, mais n'oubliez pas de régler:

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

J'ai trouvé une solution à ce bogue après l'avoir cherché longtemps dans Google sans rien trouver.

Pour redimensionner la boîte à la largeur et à la hauteur de la page et la centrer, procédez comme suit:

$("#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();
        }
    });
});
4
Luciano Marinho

$ ("# fancybox-wrap"). width (width); // ou hauteur ou autre

$ .fancybox.center ();

4
tibalt

Hé après presque deux jours de combat, j’ai réussi à changer la hauteur de la superposition. J'espère que cela peut être 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');
        }
    }
});

En faisant ce code, il calcule d’abord la hauteur du corps, # fancybox-content et # fancybox-overlay. Ensuite, il vérifie si la hauteur du corps est inférieure à la hauteur de la superposition. Si oui, il affecte une nouvelle hauteur calculée à la superposition, sinon il prend la hauteur du corps par défaut

4
Santosh Sonarikar

Si Fancybox faisait partie de jQuery UI, procédez comme suit:

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

Mais comme cela ne semble pas fournir une telle méthode, vous devez définir directement le CSS:

$("#fancy_outer").css({'width': '500px', 'height': '500px'});
3
Alan Plum
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();

}

et appelez-le à un événement quand vous avez besoin ...

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

overlay();

}, ...
2
nołname

Ma solution était comme ça (pour fancybox 1.3.4): 

trouver 

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


        $.fancybox.center(true);
    };

et remplacer par

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

$ .fancybox.resize (); n'a pas fonctionné pour moi, alors j'ai mis ce code dans la page chargée, à l'intérieur de la fancybox iframe:

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

Vous pouvez également le définir dans un rappel: 

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

Cette méthode fonctionne pour moi. :)

$(".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();
1
vimal prakash

J'ai également eu du mal à redimensionner Fancybox. La solution est $.fancybox.reposition();

Fonctionne comme un charme!

1
meridius

Voici la solution de mon:

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

Je viens de publier un correctif suggéré pour Fancybox sur son groupe Google https://groups.google.com/forum/#!topic/fancybox/fuUuBJyTrH8 qui ajoute une méthode publique $ .fancybox.reshow (). Cela recalculera la hauteur et la largeur de la boîte fantaisie. Cela fonctionne à la fois avec window.onorientationchange et window.onresize, par exemple:

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

Dans mon cas, j'utilise Fancybox pour afficher une page Web très simple qui ne contient qu'une image. Cette image peut varier en taille. Mon problème était que l'image n'incluait pas style="height: NNpx; width: NNpx;". Sans cela, la fancybox autoSize peut donner des résultats inattendus (indiqués dans leur documentation http://fancyapps.com/fancybox/ ).

tl; dr: fournit les attributs de largeur et de hauteur pour que autoSize fonctionne correctement.

0
Tyler Forsythe

Sur Fancybox 3 (version la plus récente)

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

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

0
l2aelba

Merci à tous ceux qui contribuent à StackOverflow.com. Vous m'avez tous sauvé la vie plusieurs fois. Maintenant, je peux enfin apporter quelque chose. Voici comment j'ai pu surmonter le redimensionnement de FancyBox au moment de l'exécution:

J'ai attribué les attributs spécifiques à l'élément href avec la dimension PHP vars qui lui ont été transférés . Puis appelé et défini l'attribut dans un événement clic, avec la fonction de contrôle fancybox et les paramètres intégrés dans ...

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

      }
  });
});
0
RudyRyu