New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

new feature : make a responsive colorbox #158

Open
vincent3569 opened this Issue Feb 16, 2012 · 45 comments

Comments

Projects
None yet
@vincent3569

vincent3569 commented Feb 16, 2012

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

This comment has been minimized.

camilonova commented Apr 20, 2012

Any updates on this request?

@danwood

This comment has been minimized.

danwood commented Jun 29, 2012

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

This comment has been minimized.

vincent3569 commented Aug 29, 2012

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

This comment has been minimized.

Owner

jackmoore commented Aug 29, 2012

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

This comment has been minimized.

vincent3569 commented Aug 30, 2012

hi
thanks for your help !

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

@jackmoore

This comment has been minimized.

Owner

jackmoore commented Aug 30, 2012

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

This comment has been minimized.

vincent3569 commented Aug 30, 2012

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 comment has been minimized.

Owner

jackmoore commented Aug 30, 2012

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

This comment has been minimized.

vincent3569 commented Aug 30, 2012

hi
this code now fixed works fine.
thanks for all

@zuick

This comment has been minimized.

zuick commented Sep 20, 2012

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

This comment has been minimized.

danny-englander commented Sep 20, 2012

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

This comment has been minimized.

devspree commented Sep 25, 2012

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

This comment has been minimized.

rskuipers commented Feb 21, 2013

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

This comment has been minimized.

insis321 commented Mar 6, 2013

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

This comment has been minimized.

rpkoller commented Mar 6, 2013

thanks rick works like a charm!

@codycraven

This comment has been minimized.

codycraven commented Mar 7, 2013

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

This comment has been minimized.

Dampas commented Apr 3, 2013

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

This comment has been minimized.

Owner

jackmoore commented Apr 4, 2013

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

This comment has been minimized.

nightbook commented Apr 25, 2013

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

This comment has been minimized.

izend commented May 4, 2013

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

This comment has been minimized.

carasmo commented Jun 2, 2013

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

@rskuipers

This comment has been minimized.

rskuipers commented Jun 3, 2013

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

@legrandkay

This comment has been minimized.

legrandkay commented Aug 19, 2013

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

This comment has been minimized.

shabith commented Oct 25, 2013

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

This comment has been minimized.

batesy87 commented Dec 5, 2013

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

This comment has been minimized.

adamalexander commented Dec 30, 2013

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

This comment has been minimized.

onfire60 commented Jan 31, 2014

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();
};
  1. 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

This comment has been minimized.

leanda commented Feb 11, 2014

Hey onfire60

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

Thanks

@leanda

This comment has been minimized.

leanda commented Feb 11, 2014

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

This comment has been minimized.

vincent3569 commented Feb 13, 2014

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

This comment has been minimized.

njwgh commented Mar 4, 2014

@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

This comment has been minimized.

brauliobo commented Mar 6, 2014

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

@aik099

This comment has been minimized.

aik099 commented Mar 7, 2014

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

This comment has been minimized.

vincent3569 commented Apr 27, 2014

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

This comment has been minimized.

ulygun commented May 6, 2014

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

This comment has been minimized.

ktrusak commented Jul 20, 2014

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

This comment has been minimized.

aik099 commented Jul 20, 2014

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

This comment has been minimized.

ktrusak commented Jul 20, 2014

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

This comment has been minimized.

alfaguru commented Oct 7, 2014

@SimonSteinberger

This comment has been minimized.

SimonSteinberger commented Oct 16, 2014

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

@SimonSteinberger

This comment has been minimized.

SimonSteinberger commented Oct 16, 2014

@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

This comment has been minimized.

alfaguru commented Oct 17, 2014

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

ivantcholakov added a commit to ivantcholakov/colorbox that referenced this issue Oct 14, 2015

@francisngo

This comment has been minimized.

francisngo commented May 25, 2016

@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

This comment has been minimized.

njwgh commented May 26, 2016

@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

This comment has been minimized.

thinkawitch commented Oct 26, 2017

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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment