Resize colorbox to fit width of screen

Question

I'm using a colorbox to open when the user first visits the page (using cookies). The box contains a 520x520 image. My css is as follows:

#hunger-count{
padding: 5px;
overflow: hidden;
}

#hunger-count img{
width: 100%;
height: auto;
}

Function call:

if (visited == null) {
        $.cookie('visited', 'yes'); 
        $.colorbox.settings.height = 560;
        $.colorbox.settings.width = 520;
        $.colorbox({html:"<div>...</div>"});
}

I want those to be the maxWidth & maxHeight, and set a width to be about 80% of the screen. The problem here is that depending on what height percentage I set, the image skews funny on different devices. I have a Huawei android phone, and when I set a good height and width ratio on my phone, it looks funny on an iPhone, and vice versa. Setting an 80% width and an auto height came up with the same result.

Any suggestions as to how I can do this?

score 2 · Answer 1 · answered Oct 26 '12 at 15:15

2

Why you don't use:

$.colorbox({html:"<div>...</div>", width: '100%' });

to fit screen?

answered Oct 26 '12 at 15:15

webdeveloper

17,174
3
48
47

1

When I set only a width, the colorbox adjusts to that width and sets the height to 10px. Setting the height to auto doesn't work either. The client ultimately decided that they didn't want the pop up to appear on mobile devices, so I just ended up putting a mobile detect condition on the whole thing. But if anyone finds a solution to this problem I'd be interested to find out! Otherwise I'd probably suggest to find some sort of responsive lightbox instead. – user1380540 Oct 26 '12 at 19:05

score 0 · Answer 2 · edited Apr 23 '14 at 11:52

0

You can set colorbox parametters

innerWidth:'80%', innerHeight:'80%'

If you are using colorbox as an iframe.

edited Apr 23 '14 at 11:52

Rahil Wazir

10,007
11
42
64

answered Apr 23 '14 at 11:25

John Max

432
8
23

score 0 · Answer 3 · edited May 23 '17 at 12:27

I've developed a little thing that worked for me to keep my iFrame at the 16/9 ratio for colorbox videos. I took a function from Find the exact height and width of the viewport in a cross-browser way (no Prototype/jQuery) to get the viewport dimensions and use them to calculate my colorbox dimensions. I chose to only do this calculation on page load and not on page resize. If you do not want it to go larger than 520px wide then maybe have a case where if the viewport is wider than 520, do 520 width, if it is smaller than 520, do 80% of the viewport width and then make the height the same. Check out a code example below:

function getViewport() {
    var viewPortWidth;
    var viewPortHeight;
    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
    if (typeof window.innerWidth != 'undefined') {
      viewPortWidth = window.innerWidth,
      viewPortHeight = window.innerHeight
    }
    // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
    else if (typeof document.documentElement != 'undefined'
    && typeof document.documentElement.clientWidth !=
    'undefined' && document.documentElement.clientWidth != 0) {
        viewPortWidth = document.documentElement.clientWidth,
        viewPortHeight = document.documentElement.clientHeight
    }
    // older versions of IE
    else {
        viewPortWidth = document.getElementsByTagName('body')[0].clientWidth,
        viewPortHeight = document.getElementsByTagName('body')[0].clientHeight
    }
    return [viewPortWidth, viewPortHeight];
}    
var viewPortDim = getViewport();
var viewPortWidth = viewPortDim[0];
var viewPortHeight = viewPortDim[1];

//colorbox init
var colorboxWidth = 520;
if (viewPortWidth < 520) {
    colorboxWidth = viewPortWidth * 0.8;
}
//now initialize colorbox in your square ratio (your image is 520x520)
$('a.lightboxVid').colorbox({
    iframe: true, 
    innerWidth: colorboxWidth, 
    innerHeight: colorboxWidth
});

Resize colorbox to fit width of screen

3 Answers3