Jquery - Fancybox - Background Page Shift Issue

jquery css fancybox
Charlene Yount Runge picture Charlene Yount Runge · Sep 27, 2012 · Viewed 14k times · Source

Fancybox is loading well and everything opens as I want it to, but the issue occurs in the background-- it's visible (and disturbing) that my entire page shifts exactly 8 pixels to the right when the box loads and returns to normal position on box closing.

I can't link to the site as it's on a dev server behind our company firewall.

I'm using the following scripts: Fancybox, Quform, and Jquery Banner Rotator. The fancybox call is occurring inside the rotator. I haven't modified any widths/heights of the original jquery fancybox CSS.

I have the body width set to 100% and margin set to auto, and internal divs with a min-width of 1138px and margin set to auto.

Does anyone know where I should look to fix the issue?

Answer

Victor picture Victor · Feb 13, 2013

I had a very similar situation recently with Fancybox v2. My initial page had content below the fold and therefore had a scrollbar (perhaps the OP did as well, it's not clear). Firing the Fancybox link caused the same shift in page body and clearing the scrollbar; closing the Fancybox image shifted the body back and re-enabled the scrollbar.

The adjustments to .fancybox-lock did not work for me but what did was including the following option when instantiating my Fancybox object:

helpers: { 
    overlay: { 
        locked: false 
    } 
}

The only caveat is this does not lock your Fancybox to the center of the page if you had scrolling, i.e. the page with Fancybox view is entirely scrollable. For me, it was the lesser of two evils.

Related questions

Loading inline content using FancyBox

Well, I'm simply writing this post to hopefully help others that might come across the same issue. The examples on the vendor website are a little vague and I had assumed the following scenario. You have a link with a …

Read More
Fancybox full width

I'm new to coding and I'm trying to have every fancybox ONLY in my homepage full width and responsive (eg) but non of these options have done the job (fitToView, autoSize or aspectRatio). jQuery jQuery(document).ready(function() { jQuery( "#site-logo" ).…

Read More
How to replace default controls with custom buttons in Fancybox 2.1.5?

In Fancybox 2.1.5 I want to replace the default controls with my custom buttons (new preloader + close/next/prev buttons on sprite). I'm not sure how to adjust the css code properly. I tried to modify the CSS as follows, but …

Read More