Fancybox - Image is overflowing off right side of lightbox

Question

Looks like this question has been asked before, here, but the asker solved his own question by switching to prettyPhoto. I\'d prefer to figure out why this is happening, jus

Answer 1

In your style.css file you have the famous box-sizing css rule

* {
    -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
      -o-box-sizing: border-box;
     -ms-box-sizing: border-box;
         box-sizing: border-box;
}

which seems to be messing the (old version of) fancybox layout : DEMO

The workaround is to revert box-sizing to content-box for fancybox elements only so apply this css rule after your general box-sizing declaration :

#fancybox-wrap, #fancybox-wrap *{
    -moz-box-sizing: content-box;
 -webkit-box-sizing: content-box;
      -o-box-sizing: content-box;
     -ms-box-sizing: content-box;
         box-sizing: content-box;
}

DEMO fixed

NOTE : This only apply to fancybox v1.3.x and lower. Fancybox v2.x doesn't have this issue.

Answer 2

The selected answer didn't completely fix the problem in my case, but indeed served as a starting point. I ended up with the following rules:

#fancybox-wrap, #fancybox-outter, #fancybox-content {
    -moz-box-sizing: content-box;
 -webkit-box-sizing: content-box;
      -o-box-sizing: content-box;
     -ms-box-sizing: content-box;
         box-sizing: content-box;
}
#fancybox-content > div {
  margin-top:    -20px;
  margin-bottom: -20px;
}

Reverting box-sizing for all elements inside #fancybox-wrap would break Bootstrap3 layout, so I did the reverting a little more selective.

And, for some reason, there was a blank space between both the top and bottom borders and the content, which was fixed with the margin rules. I don't know if it applies to all scenarios.

Answer 3

I had this same issue..

put this in your stylesheet.

.fancybox-inner img{

max-width: 100%;

}

Answer 4

fix body margin right for FancyBox 2 and Bootstrap 3

    $(function(){   
    $("a.zoom").fancybox({
        beforeShow  : function() {
            document.onmousewheel=document.onwheel=function(){ 
                return false;
            };
            document.addEventListener("MozMousePixelScroll",function(){return false},false);
            document.onkeydown=function(e) {
                if (e.keyCode>=33&&e.keyCode<=40) return false;
            }
        },
        afterClose  : function(){
            document.onmousewheel=document.onwheel=function(){ 
                return true;
            };
            document.addEventListener("MozMousePixelScroll",function(){return true},true);
            document.onkeydown=function(e) {
                if (e.keyCode>=33&&e.keyCode<=40) return true;
            }
        },      
        prevEffect  : 'none',   // this is not important 
        nextEffect  : 'none',   // this is not important 
        helpers : {
            title   : {
                type: 'over'    // this is not important
            },
            thumbs  : {
                width   : 80,   // this is not important 
                height  : 80    // this is not important 
            },
            overlay : {
                locked : false  // !this is important!
            }           
        }
    });
});