Comment redimensionner Fancybox au moment de l'exécution?

Personne ne sait comment faire pour redimensionner le jQuery, Fancybox au cours de l'exécution?

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

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

Je suis remplissage de la fancybox avec du contenu dynamique et je veux redimensionner en fonction du contenu.

tu ne peux pas définir le contenu et l'appel fancybox à nouveau?

InformationsquelleAutor | 2009-06-15

41

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

$.fancybox.resize();

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

$.fancybox.mise à jour()

Qui va redimensionner l'actif fancybox basé sur la taille du contenu à l'intérieur.
- Cela ne redimensionnement de la hauteur, de ne pas la largeur.
- Merci! C'est précieuses. La plupart du temps pour moi, c'est sur le redimensionnement de la hauteur (en raison de la forme de messages d'erreur)
- Essayé de mise à jour() avec fancybox 2.0.6, sans succès. (la largeur n'est pas mis à jour, comme Hans noté) Avec fancybox 2.1.5, il fonctionne, à la fois la largeur et la hauteur sont redimensionnées.
InformationsquelleAutor Jason Norris
11

Alan solution est incomplète, car la boîte n'est plus centré sur l'écran après la modification de la taille (au moins avec la dernière et jquery fancybox versions).

Donc, la solution complète serait:
```
$("#fancy_outer").css({'width': '500px', 'height': '500px'});
$("tag").fancybox.scrollBox();
```
InformationsquelleAutor dandu
4

$("#fancybox-wrap").largeur(width); //ou la hauteur ou que ce soit

$.fancybox.centre();

InformationsquelleAutor tibalt
4

Hey, après les combats près de deux jours, j'ai réussi à changer la superposition de hauteur. J'espère que cela peut vous ê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');
        }
    }
});
```
Ce que ce code fait est, il faut d'abord calculer la hauteur du corps, de l' #fancybox-contenu et #fancybox-overlay. Ensuite, il vérifie si le corps est d'une hauteur inférieure à la superposition de la hauteur, si oui, alors il attribuer de nouvelles calculée à hauteur de superposition sinon il prendre corps par défaut, la hauteur d'

InformationsquelleAutor Santosh Sonarikar
4

Je veux juste vous faire savoir.

Après la recherche de solutions à l'aide de javascript pour ajuster la hauteur de moi et mon partenaire a réalisé quelque chose de magnifique.

Vérifier si la, contenant les éléments d' #fancybox-intérieure a REMBOURRAGE ou de la MARGE de définir.

C'est l'élément clé (les enfants directs d' #fancybox-intérieure margin/padding définition.

Les enfants des éléments (#fancyfox-intérieur > div > .ici) peut avoir de remplissage, mais n'oubliez pas d'ajuster:
```
 $('#element').fancybox({
    'onComplete' : function(){
        $.fancybox.resize();
    }
}); 
```
InformationsquelleAutor renoirb

J'ai trouvé une solution à ce bug après avoir cherché pendant un long moment dans Google mais ne trouve rien.

Pour redimensionner la zone de la largeur et de la hauteur de la page et centre, ce faire:

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

InformationsquelleAutor Luciano Marinho

3

Si Fancybox faisait partie de jQuery UI, vous auriez du faire comme ceci:
```
$("tag").fancybox.option('frameWidth', 500);
```
Mais comme il ne semble pas fournir une telle méthode, vous devez définir le CSS directement:
```
$("#fancy_outer").css({'width': '500px', 'height': '500px'});
```
InformationsquelleAutor 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 de l'appeler sur des événements lorsque vous en avez besoin... (eg. uploadify onSelect event -> longue liste de fichiers rend fancybox si grande, et l'on calcule la hauteur de nouveau)

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

overlay();

}, ...

InformationsquelleAutor nołname

$.fancybox.resize(); ne fonctionne pas pour moi, donc 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 définir un rappel :

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

InformationsquelleAutor Olivier

1

J'ai du mal avec le redimensionnement fancybox trop.
La Solution est $.fancybox.reposition();

Fonctionne comme un charme!

InformationsquelleAutor meridius

Ma solution était comme cela (pour fancybox 1.3.4):

trouver

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


        $.fancybox.center(true);
    };

et de le remplacer avec

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

Merci pour économiser mon temps.. +1

InformationsquelleAutor byzanth

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

InformationsquelleAutor vimal prakash

0

Je viens de poster une suggestion de patch pour Fancybox sur son Groupe Google https://groups.google.com/forum/#!topic/fancybox/fuUuBJyTrH8 qui ajoute une méthode publique $.fancybox.reshow(). Ce nouveau calcul de la hauteur et la largeur de la fancybox. Il fonctionne à la fois avec fenêtre.onorientationchange et de la fenêtre.onresize, par exemple:
```
window.onresize = function() {
    $.fancybox.reshow();
}
```
InformationsquelleAutor Scott C

C'est la solution de mon formulaire:

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

InformationsquelleAutor Fernando

0

Merci à tous ceux qui contribue à StackOverflow.com. Vous avez tous été des maîtres-nageurs pour moi à plusieurs reprises. Maintenant, j'ai enfin l'occasion de contribuer à quelque chose. Ci-dessous comment j'ai pu venir plus de redimensionnement fancybox au moment de l'exécution quandry:

J'ai affecté le href de l'élément attributs spécifiques à la dimension PHP vars est passé.
Alors appelés et mis à l'attribut dans un clic-event, avec fancybox fonction de contrôle et les paramètres intégrés au sein de...
```
<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();

      }
  });
});
```
InformationsquelleAutor RudyRyu
0

Dans mon cas, j'utilise Fancybox pour afficher une très simple page web qui contient simplement une image. Cette image pourrait varier en taille. Mon problème est que l'image ne comprend pas style="height: NNpx; width: NNpx;". Sans cela, le fancybox autoSize peut donner des résultats inattendus (indiqué dans leurs docs http://fancyapps.com/fancybox/ ).

tl;dr: fournir des attributs width et height pour un redimensionnement automatique fonctionne correctement.

InformationsquelleAutor Tyler Forsythe
0

Sur Fancybox 3 (dernière version)
```
parent.jQuery.fancybox.getInstance().update();
```
Ref: http://fancyapps.com/fancybox/3/docs/#iframe

InformationsquelleAutor l2aelba
-1

Utilisation:
```
parent.jQuery.fancybox.update();
```
InformationsquelleAutor Arjan

Vous devez vous connecter pour publier un commentaire.