Jquery - Fancybox - Problème de changement de page de fond

Fancybox est en cours de chargement bien et tout s'ouvre comme je le veux, mais le problème se produit dans le contexte, il est visible (et inquiétant) que l'ensemble de ma page quarts exactement 8 pixels vers la droite lorsque la boîte de charges et retourne à la position normale sur la case de fermeture.

Je ne peux pas le lien vers le site sur un serveur de dev derrière notre société de pare-feu.

Je suis en utilisant les scripts suivants: Fancybox, Quform, et Jquery Banner Rotator. La fancybox appel est en cours à l'intérieur de la coiffe. Je n'ai pas modifié les largeurs/hauteurs de l'original jquery fancybox CSS.

J'ai le corps largeur à 100% et la marge est définie sur automatique, et interne divs avec un min-width de 1138px et de la marge définie sur auto.

Personne ne sait où je devrais regarder pour résoudre le problème?

source d'informationauteur Charlene Yount Runge

  1. 24

    J'ai eu une situation similaire récemment avec Fancybox v2. Ma première page avait contenu ci-dessous le pli et avait donc une barre de défilement (peut-être que l'OP n'ainsi, il n'est pas clair). La cuisson de la Fancybox lien a causé la maj de la page de corps et de compensation de la barre de défilement; la fermeture de la Fancybox image déplacé le corps en arrière et re-activé la barre de défilement.

    Les ajustements à .fancybox-lock n'a pas fonctionné pour moi, mais ce n'était, y compris les options suivantes lors de l'instanciation de ma Fancybox objet:

    helpers: { 
    overlay: { 
        locked: false 
    } 
}

    Le seul inconvénient est de ce fait pas de verrouiller votre Fancybox au centre de la page, si vous avez eu le défilement, c'est à dire la page avec Fancybox point de vue est totalement déplacé. Pour moi, c'était le moindre de deux maux.

  2. 7

    J'ai eu le même problème récemment. Trouver .fancybox-lock dans la fancybox CSS, et à le modifier:

    .fancybox-lock {
    overflow: hidden;
    margin: 0 !important;
    }

    Le tour est joué! 😀

  3. 4

    Vous pouvez désactiver la fonction de verrouillage:

    $(".fancybox").fancybox({
    helpers : {
        overlay : {
            locked : false
        }
    }
});

    A fonctionné pour moi.

  4. 2

    C'est un problème connu, ici, vous pouvez en savoir plus: des questions, fancyapps @ GitHub

    Je suis en utilisant fancybox2 (version 2.1.5).
    J'ai résolu le problème en modifiant légèrement les 'jquery.fancybox.css'-fichier:

    Trouver la "Superposition helper'-section (qui commence à la ligne 165) et le changement de deux règles:

    .fancybox-lock {
/*  overflow: hidden !important;*/
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    width: auto;
}

    et la deuxième règle:

    .fancybox-lock .fancybox-overlay {
/*  overflow: auto;
    overflow-y: scroll;*/
    overflow: hidden !important;
}

    Cela fonctionne assez fine (à mon humble avis), même si la page est en défilant derrière la superposition.

    Au moins dérangeantes décalage de droit " -effet est supprimé.

    J'ai découvert plus tard que les éléments qui ont été placés avec "right: 0;" ont été décalée vers la gauche par la largeur de la barre de défilement verticale.

    C'est parce que d'une marge de droite est définie par la fancybox.js-code en ajoutant un style de nœud à l'intérieur de la tête de l'élément.

    Pour résoudre le problème viens de modifier une seule ligne de code à l'intérieur de la jquery.fancybox.js fichier ou le jquery.fancybox-2.1.5-pack.js fichier, en fonction de ce que vous êtes en utilisant.

    en ligne en 2017 de l'déballé version:

    $("<style type='text/css'>.fancybox-margin{margin-right:" + (w2 - w1) + "px;}</style>").appendTo("head");

//change it to

$("<style type='text/css'>.fancybox-margin{margin-right: 0;}</style>").appendTo("head");

//perhaps comment out the complete line, I haven't testet it though

    ou dans le .pack de fichier (ligne 46, près de fin de ligne (EOL):

    /* [much more code before] */ f("<style type='text/css'>.fancybox-margin{margin-right:"+(d-a)+"px;}</style>").appendTo("head")})})(window,document,jQuery);

//change it to:

/* [much more code before] */ f("<style type='text/css'>.fancybox-margin{margin-right:0;}</style>").appendTo("head")})})(window,document,jQuery);

//or try to remove the "f().appendTo()"-part completely (untested)
  5. 1

    J'ai résolu en ajoutant "margin-right: auto !important" de mon élément de corps 🙂 C'est sur les règles Fancyboxes propre margin-right: 0.

  6. 0

    Dans la version 2.1.3, commentez les lignes 1802-1807 (ci-dessous) jquery.fancybox.js.

    if (!this.overlay) {

this.margin = D.height() > W.height() || $('body').css('overflow-y') === 'scroll' ? $('body').css('margin-right') : false;

this.el     = document.all && !document.querySelector ? $('html') : $('body');

this.create(opts);

}
  7. 0

    J'ai utilisé fancybox v. 2.1.4 avec un fixe, centré à l'arrière-plan image du corps, et forçant la barre de défilement verticale pour montrer toujours.

    body{
  background: url('../img/sfondo.jpg') fixed center top;
  overflow-y: scroll;
}

    Malgré le fait d'avoir forcé l'affichage de la barre de défilement, j'ai eu l'image de fond d'écran problème de décalage avec firefox sur mac (chrome et safari ont été ok depuis lion barres de défilement ne pas prendre de l'espace à l'intérieur de la page) et ie,ff,chrome sur windows.

    Alors j'ai remarqué que si je régler manuellement la x-offset au lieu de le monde centre sur la propriété background le problème a disparudonc je l'ai réussi avec un peu de jquery dans le HEAD de la page:

    <script>
    function centerTheBackground(){
        var pageWidth = $(window).width();
        var imageWidth = 1920; //set here the width of the background image
        var xOffset = (imageWidth/2) - (pageWidth/2);
        jQuery('body').css('background-position', '-' + xOffset + "px top");
    }


    jQuery(function($){
        centerTheBackground();
    });


    $(window).resize(function() {
        centerTheBackground(); //re-center the background image during window resizing
    });             
</script>
  8. 0

    Ce fait pour moi...

    .fancybox-lock {
        overflow: hidden !important;
        padding-right: 17px;
}

.fancybox-lock body {
    overflow: hidden !important;
}
  9. 0

    Vous êtes confrontés à ce problème pour la barre de défilement! il suffit simplement de suivre la barre de défilement de la largeur et de l'utilisation que la largeur comme".fancybox-lock's 'margin-right'.
    par exemple,

    .fancybox-lock{
       margin-right: [your calculated width] !important;
 }

    Cela permettra de résoudre votre problème pour vous, car moi aussi j'ai eu ce problème une fois.

  10. 0

    Si votre problème est résolu éléments de sauter quand Fancybox s'ouvre, simple d'ajouter un padding-right: 17px de ces éléments dans votre CSS, contenues dans le .fancybox-lock classe.

  11. 0

    Eh bien j'ai commenté la ligne suivante dans fancybox CSS

    /*.fancybox-lock {
    overflow: hidden;
}
*/

    Et il a commencé à fonctionner sur:

    • fancyBox - Plugin jQuery
    • version: 2.1.4 (Thu, 10 Jan 2013)
  12. 0

    Je suis en utilisant fantaisie zone 3 et a eu le même problème parce que mon principal wrapper position absolue.

    assurez-vous que vous wrapper n'est pas, et il devrait fonctionner correctement.