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, just to understand, but I will switch if there doesn't seem to be a solution. There is also setting overflow:hidden, as noted in one of the answers, but I'm wondering if I can't just resize the box, instead of cutting off my images.

I am using fancybox 1.3.4 with the patch as described in this stackoverflow article.

All the files I'm using (css, js, images) that come with the fancybox zip, are in the asset pipeline, and are unchanged, other than changing the image paths in the css file in order to use the images properly in rails' asset pipeline, using the rails image-url helper. I can post the css, but I do not believe it will be helpful (I could be wrong). I'm using the jQuery that comes with rails 4.

DOCTYPE is html.

My application.js file looks like:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery.easing-1.3.pack
//= require jquery.fancybox-1.3.4

$(document).ready(function(){
  $("a.image-gallery").fancybox({
    'width': 640,
    'height':480,
    'autoScale':true,
    'autoDimensions':false
  });
});

However, the images I've put into my lightbox gallery are overflowing off of the right side of the lightbox. You can see what I am talking about on firefox 25, here. Click on one of the first two images to see this problem.

For reference, my images are 640x480 pngs.

What steps can I take to rectify this problem?

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

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!
            }           
        }
    });
});

Answer 3

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 4

I had this same issue..

put this in your stylesheet.

.fancybox-inner img{

max-width: 100%;

}