new feature : make a responsive colorbox

[vincent3569]

thank you very much for Colorbox, very well designed and very useful.

Colorbox seems not to be "responsive" on mobile device:
I wish that Colorbox automatically adjusts itself to the size and orientation of the screen / mobile device : if I change the orientation of the screen / mobile device (ie if I rotate my mobile to adjust horizontal and vertival pictures to the screen size, I wish that Colorbor automatically adjusts itself to the new size / orientation of the screen).
for now, Colorbox only automatically adjusts itself on load of a new picture (in a slideshow for exemple).

colorbox can do that (maybe with a callback function in a workaround) ?
otherwise it would be a great improvement in your plugin (fancybox does it now :http://fancyapps.com/fancybox/)

[camilonova]

Any updates on this request?

[danwood]

This would be very nice. I was trying to see if I could hack at it bit by putting in a binding to orientationchange, but I don't understand how the publicMethod.resize function gets called, which is I think what I want to happen.

I tried this, and it seemed to work right for switching from portrait to landscape, but NOT back the other way. In fact, my image kept getting bigger. Yikes!

I put this right the binding of "resize." + prefix. (I guess resizing the window currently only repositions the image, does not shrink or enlarge it. But for changing orientation we need to resize the image!

               var oc_timer;
               $window.bind('orientationchange', function () {
                            clearTimeout(oc_timer);
                            oc_timer = setTimeout(function () {
                                                  publicMethod.resize;
                                                  }, 500);
                            });

[vincent3569]

Hi,

I still have not found a solution to auto resizing colorbox when changing orientation of the mobile device.

Does anyone know if it's possible to get ColorBox to auto-resize based on orientation change (maybe with a callback function in a workaround)?

Thanks in advance to any help.

[jackmoore]

Here is a temporary fix that might work for you:

window.addEventListener("orientationchange", function() {
    if($('#cboxOverlay').is(':visible'){
        $.colorbox.load(true);
    }
}, false);

I'll should be handled a little cleaner on the plugin side, so I'll be sure that future updates have this feature.

[vincent3569]

hi
thanks for your help !

can you explain how to install and use this fix on my web site ?

[jackmoore]

You just put it in a script block, and add it to your document. colorbox and jQuery have to be defined first.

<script src='jquery.js'></script>
<script src='jquery.colorbox.js'></script>
<script>
window.addEventListener("orientationchange", function() {
    if($('#cboxOverlay').is(':visible')){
        $.colorbox.load(true);
    }
}, false);
</script>

[vincent3569]

maybe, I do something wrong, but it seems to not work for me.

you can visit this site : http://test.vincentbourganel.fr/20120623-randonnee-vercors/
on mobile phone (android), when there is orientation change during slideshow, there is no reload and autoresize.
of course, it works on next picture, but not on one picture (when slideshow is paused for example).

[jackmoore]

This is my fault because I left out a ) in my original example code, which is now fixed, but check your javascript console next time. It would have told you of the error and line number.

[vincent3569]

hi
this code now fixed works fine.
thanks for all

[zuick]

Hi, may be it would be useful. Try this function to initialize colorbox

function init_responsive_colorbox( element_id, image_width ){
if( jQuery(window).width() > image_width ){
jQuery( element_id ).colorbox();
}else{
jQuery( element_id ).colorbox( {width:'90%'} );
}
}

[danny-englander]

I am really interested in this but looking at all the various code above, I am not getting the big picture. I am not sure if I need to patch the Colorbox script or add additional code. I tried various incarnations of all the code above but cannot get anything to make my Colorbox responsive. Would it possible to add a "responsive" dev branch to the repo? Thanks.

[devspree]

Hello,

Thanks for the great info posted here.

This worked for me:

...

<script src="/colorbox/jquery.colorbox.js"></script>

     <script>
    $(window).resize(function () {

        if($('#cboxOverlay').is(':visible')){
                $.colorbox.load(true);
        }

    });


        $(document).ready(function(){

            $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});

        });
    </script>

Seems like reloading colorbox on resize will do the job so that now it is working fine when resizing on both desktop and my android.

[rskuipers]

It's better to put a resizeTimer with it so it doesn't load a million times when making your window smaller:

var resizeTimer;
$(window).resize(function(){
    if (resizeTimer) clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
        if ($('#cboxOverlay').is(':visible')) {
            $.colorbox.load(true);
        }
    }, 300)
});

[insis321]

I normally disable Colorbox on mobile devices. I rather view the original image. Here is a simple solution:
http://www.templatestock.net/disable-colorbox-on-mobile-devices-tablets/

[rpkoller]

thanks rick works like a charm!

[codycraven]

When initializing colorbox you can set a maxWidth and maxHeight property:

$(SELECTOR).colorbox({maxWidth:'95%', maxHeight:'95%'});

Using a percentage will keep the dimensions "responsive".

This should be coupled with RickKuipers's resize handler for full responsive support.

[Dampas]

OK... I don't know what I am doing wrong. I have used

var resizeTimer;
$(window).resize(function(){
if (resizeTimer) clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
if ($('#cboxOverlay').is(':visible')) {
$.colorbox.load(true);
}
}, 300)
});

and even this code without timer, but I always get error "$.colorbox.load is not a function"?!

[jackmoore]

I stopped making load a publicly accessible function in a previous release because I forgot anyone was using it. Just use this previous version: https://github.com/jackmoore/colorbox/tree/1.4.4

Working on a larger update that won't be out for a little while, but hope to resolve this issue there so that these workarounds are no longer needed.

[nightbook]

Thanks Jack and Rick, that snippet and reverting to 1.4.4. worked wonderfully. Looking forward to your larger update jack. All the best, love your utility.
Cheers

[izend]

An idea is to compute the size of the video when the page is loaded:

<script type="text/javascript">
$(document).ready(function() {
    var ytch=30, bw=25, w=640, h=360, maxw=$(window).innerWidth()-2*bw;
    if (maxw < w) {
        h=Math.floor(h*maxw/w);
        w=maxw;
    }
    $('.yt').colorbox({iframe:true, opacity: 0.8, transition: 'none', innerWidth:w, innerHeight:h+ytch});
});
</script>

w and h are the width and the height of the video.
bw is the width of the frame around the video.
ytch is the height of the control bar at the bottom of the video which is added by the YouTube player.

The code doesn't resize the frame when the display is rotated or resized dynamically.

Here is an example: http://www.qrmii.com. Click on an image in the gallery.

[carasmo]

With latest version of colorbox, colorbox.load is not a function. What is a function to get the resize to work? Thanks!

[rskuipers]

@carasmo This was answered a couple comments back: #158 (comment)

[legrandkay]

I got this code from stackoverflow. Its done wonders for me.

    /* Colorbox resize function */
var resizeTimer;
function resizeColorBox()
{
    if (resizeTimer) clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
            if (jQuery('#cboxOverlay').is(':visible')) {
                    jQuery.colorbox.load(true);
            }
    }, 300)
}

// Resize Colorbox when resizing window or changing mobile device orientation
jQuery(window).resize(resizeColorBox);
window.addEventListener("orientationchange", resizeColorBox, false);

[shabith]

Ok so like @jackmoore told us we won't be able to use 'load' method. So what I did was change it 'resize' method instead and pass the width and height in percentage.

/* Colorbox resize function */
var resizeTimer;
function resizeColorBox()
{
    if (resizeTimer) clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
            if (jQuery('#cboxOverlay').is(':visible')) {
                    jQuery.colorbox.resize({width:'90%', height:'90%'}); 
            }
    }, 300)
}

// Resize Colorbox when resizing window or changing mobile device orientation
jQuery(window).resize(resizeColorBox);
window.addEventListener("orientationchange", resizeColorBox, false);

[batesy87]

The above method works for me, however it appears that the colorbox.resize() function does not resize the image element.

I am using colorbox with scalePhotos : true and after the resize my images are clipped

[adamalexander]

Hey Guys this worked for me...

$(".iframe").colorbox({iframe:true, width:"100%", height:"800px"});
$(".iframe").colorbox({maxWidth:'700px', maxHeight:'800px'});

the SECOND line is what i added to the code, right below the first line which was already there.

The only issue is the clipping of images.... that's not cool....

[onfire60]

I have created a fix for this based on the previous comments. It involves loading and using the unminified version of colorbox and add some simple code.

1. In jQuery.colorbox.js add a new reload method (line 877 right above the load function add this):

publicMethod.reload = function () {
  load();
};

2. Then in your custom jquery scripts add this and call the new reload method

jQuery(window).resize(function(){
  // Resize Colorbox when resizing window or changing mobile device orientation
  resizeColorBox();
  window.addEventListener("orientationchange", resizeColorBox, false);
});

var resizeTimer;
function resizeColorBox() {
  if (resizeTimer) {
    clearTimeout(resizeTimer);
  }
  resizeTimer = setTimeout(function() {
    if (jQuery('#cboxOverlay').is(':visible')) {
      jQuery.colorbox.reload();
    }
  }, 300);
}

With all this done you should be able to use the maxWidth and maxHeight properties and have the colorbox re-size responsively. And it scales the images to on re-size!

Keep in mide this is a hack and if you update colorbox files to a newer version you will have to re-apply this fix. But lets hope that there is a good non hack fix for this in the next version.

Of course you could re-minify the code in jQuery.colorbox.js if you want at http://jscompress.com/ if you are concerned about file size.

Hope this helps

[leanda]

Hey onfire60

Do you mind me asking where you added the maxWidth and maxHeight properties?

Thanks

[leanda]

Ignore my last post, I used the following:

jQuery.colorbox.settings.maxWidth  = '95%';
jQuery.colorbox.settings.maxHeight = '95%';

jQuery(window).resize(function(){
 // Resize Colorbox when resizing window or changing mobile device orientation
 resizeColorBox();
 window.addEventListener("orientationchange", resizeColorBox, false);
 });

var resizeTimer;
function resizeColorBox() {
if (resizeTimer) {
clearTimeout(resizeTimer);
}
  resizeTimer = setTimeout(function() {
    if (jQuery('#cboxOverlay').is(':visible')) {
      jQuery.colorbox.reload();
     }
    }, 300);
  }

[vincent3569]

if jackmore read this...
at least, is it possible to integrate the public reload() function in colorbox core code (as describe here : #158 (comment)).
it allows to re-use maxWidth and maxHeight set in colorbox parameters.
it's really easy to do and really easy to use with resizeColorbox as described above.

another way is to merge pull request #64, to support maxWidth and maxHeight in public resize() function.

[njwgh]

@onfire60 Thanks for your code it works well
However I've found that it fails if you have transition set to 'none'. It's fine for fade or elastic
If transition is set to 'none' then the resize fails on smartphone flip vertical to horizontal and also fails in PC browsers if you click the 'maximise' button to make the browser fullscreen (and same when you hit the 'restore' button to set browser size to what it was)
The image actually becomes completely unviewable.

I'm not so worried about the PC browser maximise, but the smartphone flip is a real deal-breaker.
Any one else have the same problem with transistion set to 'none'?

[brauliobo]

shouldn't colorbox automatically detect that it is on a mobile device and if so resize to full screen?

[aik099]

The Colorbox wasn't created with responsive out of box concept in mind I'm afraid. But I guess @jackmoore is working hard to make it more mobile device friendly.

For example the Reveal modal (see http://foundation.zurb.com/docs/components/reveal.html) from Foundation framework is responsive out of the box. But it's maybe the only thing it does best.

On the other hand the Colorbox is feature rich modal window script, which with added support for responsiveness will surely be the leader.

[vincent3569]

Hi
Still no news from this ticket and relevant pull request?
even if colorbox is not reponsive out-of-the-box, it would solve the problem effectively.
It would realy a nice improvement of colorbox, expected by many users...

[ulygun]

Thanks a lot onfire60 and leanda, your solutions worked for me.

I want to customize more of colorbox elements. I'm trying to put the title above the content box (like in prettyphoto) so it can be readable in small screens, and i did it (editing CSS), but when i resize the browser window and the box resizes the title disappears sometimes, and only reappear when i reload the page. Any solutions for this one?

[ktrusak]

Thanks @leanda and @onfire60 for the solutions, works well. The one issue I am running into is that the values I had for current and title are dropped when reload() fires. Plus the next and previous buttons go missing. Any ideas why this may be happening?

[aik099]

I guess the colorbox looses it's configuration and only current image is remembered. Through configuration it's been able to get prev/next buttons and it's title.

[ktrusak]

appendHTML(); fixed some of it

publicMethod.reload = function () {
  load();
  appendHTML();
};

The strange thing is that the above works fine as long as all your content is inside the #cboxContent div. Everything outside doesn't get brought back in after the reload(). Ideas are welcome here.

[alfaguru]

In case anyone is looking for @insis321's solution, it can be found here: https://web.archive.org/web/20140711073257/http://www.templatestock.net/disable-colorbox-on-mobile-devices-tablets/

[SimonSteinberger]

@alfaguru: That is absolutely no solution to the discussed problem. Actually, it's hardly related to this topic.

[SimonSteinberger]

@jackmoore
Would it be possible to include maxWidth and maxHeight as options for the public resize method? That would give a lot of flexibility and we could use it to make CB responsive with help of the window.resize callback.

[alfaguru]

@SimonSteinberger my only concern was for those like me, coming to this thread and wondering what he had posted.

[francisngo]

@leanda and @onfire60 solution works like a charm. Thanks guys! The problem I am having now is that the image does not automatically resize when you go from portrait to landscape (and vise versa). For example, if you have an image in portrait and then go into landscape (vise versa), the image does not resize but the next image will. Is there a way to resize the current image when you go from portrait to landscape (or vise versa)?

[njwgh]

@francisngo
I didn't use the same method as @onfire60, but with what I used I found that portrait to landscape resize didn't work if I had the transition is set to 'none'.
My workaround was to add this in the init function
onComplete: function(){ $("#colorbox").resize({ width: $('.cboxPhoto').width() }) },

[thinkawitch]

The solution with publicMethod.reload() do not work for me with version 1.6.4
I made

publicMethod.reloadCurrent = function() {
    index = getIndex(0);
    launch($related[index]);
};

and

function resizeColorBox()  {
      if (resizeTimer) clearTimeout(resizeTimer);
      resizeTimer = setTimeout(function() {
        if ($('#cboxOverlay').is(':visible')) {
	    $.colorbox.reloadCurrent();
        }
      }, 300);
}

[nakaracuka]

You may just edit CSS file. It really works:

        #cboxLoadedContent{margin-bottom:28px; width: 95vw; height: 90vh;}
	#cboxPhoto{height: 90vh; max-height:100vh; width: auto; max-width: 100vw; margin: auto; border: 0; display: block;}


@media screen and (max-width: 800px) {
    #cboxTopLeft{width:5px; height:1px; background:url(images/controls.png) -100px 0 no-repeat;}
    #cboxTopRight{width:5px; height:1px; background:url(images/controls.png) -129px 0 no-repeat;}
    #cboxBottomLeft{width:5px; height:10px; background:url(images/controls.png) -100px -29px no-repeat;}
    #cboxBottomRight{width:5px; height:10px; background:url(images/controls.png) -129px -29px no-repeat;}
    #cboxMiddleLeft{width:1px; background:url(images/controls.png) left top repeat-y;}
    #cboxMiddleRight{width:1px; background:url(images/controls.png) right top repeat-y;}
    #cboxTopCenter{height:1px; background:url(images/border.png) 0 0 repeat-x;}
    #cboxBottomCenter{height:10px; background:url(images/border.png) 0 -29px repeat-x;}
    #cboxLoadedContent{margin-top:5px; width: 100vw; height: 90vh;}
    #cboxPhoto{height: 95vh; max-height:100vh; width: 100vw; max-width: 100vw; margin: auto; border: 0; display: block;}
}