Resize Colorbox on window resize

Question

Colorbox seems to be well suited "out of the box" for responsive design. I'm overriding the default dimension settings with percentages, and then setting maximum values so things don't get out of hand on huge screens:

$.colorbox.settings.width = "92%";
$.colorbox.settings.height = "90%";
$.colorbox.settings.maxHeight = 850;
$.colorbox.settings.maxWidth = 1200;

That works. I'm also sizing the cboxTitle element to be exactly the width of the img above it, so that my sometimes lengthy captions are always lined up nicely.

$(document).bind('cbox_complete', function(){
    var photoWidth = $(".cboxPhoto").innerWidth();
    var photoContainer = $("#cboxContent").outerWidth();
    var leftPix = (photoContainer - photoWidth) / 2;    
    $("#cboxTitle").css({'left' : leftPix, 'width' : photoWidth});
});

Which also seems to work. That leaves the scary part: dealing with window resize events. I'm trying the following

$(window).on("resize", function(){
    $.fn.colorbox.resize({
        height: "90%",
        width: "92%"
    });
});

(I'm actually using a custom debouncedresize event instead of the standard jquery resize, in order to throttle the stream of resize events in Webkit, but I'm leaving that part out because it isn't relevant. Also, I'm repeating the same width and height percentage values in the resize options because otherwise no resizing occurs. :( )

This last part isn't working at all. I'll try to break down the problems:

1) When the user loads a colorbox at a standard destop size and then scales the viewport narrower, the height of the cboxPhoto element isn't scaling correctly. The width is shrinking correctly, but the height is staying the same, creating a "squeeze". So I tried adding height:auto to the css for cboxPhoto. That restores the aspect ratio, but now the cboxPhoto element is way too large, and being clipped. I'm getting scrollbars inside the modal when I didn't before. The photo is not at the size that it would be at if I closed the colorbox and reopened it at the new browser viewport width.

2) The css for cboxTitle isn't being recalculated. The colorbox resize function doesn't appear to trigger the cbox_complete event. Shouldn't it?

I'd love to fix these problems, but I also sense that perhaps the easiest way to address this use case given the current state of the plugin is to instead just close and reload the whole colorbox when the window is resized, but come back to the exact same content in the gallery that the user was looking at prior to the resize event. But I'm quite unclear on how to code that. Thanks in advance for any help!

P.S. Everybody, please spare me the argument that it's only designers who resize windows. Sorry, I just don't buy that. People scale up when a stunning photo is on screen, and tablets especially get rotated all the time...

Answer 1

I would prevent from using $.resize in such cases. I consider that CSS Media Queries powers responsive design. So why not to use media queries.

I've never tried colorbox in practice, but I guess that $.colorbox.settings.width = "92%"; inserts an inline CSS for the element.

Remove those settings. Prevent any inline CSS in your colorbox element. Then simply use CSS to give width and height for initial scaling for larger desktops.

And use Media Queries to scale up the modal sizes on window resize.

#colorbox{
   height: 90%;
   width: 92%;
}

@media (max-width: 992px) { 
   #colorbox{
       height: 90%;
       width: 92%;
   }
}

Multiple-queries are also perfectly legal. So, you can set the modal sizes on even smaller sizes.

@media (max-width: 430px) { 
   #colorbox{
       height: 96%;
       width: 98%;
   }
}

You might use px instead of %, but in this case, you colorbox modal width/height would be jumping a little be when moving from one size to another. But you can use CSS's transition property to make the resizing process smoother in this case.