Colorbox maxWidth, maxHeight not working

Question

I have problems to set colorbox using only the available viewport. As soon as I set the maxHeight or maxWidth attribute, no images will be displayed. The colorbox opens, but stays at the "spinning wheel".

function showImage(e) {
  $.colorbox({href:$(e.currentTarget).attr("src")}); } 

jQuery(document).ready(function () {
  $('.popout').on("click", showImage);
  $('.popout').colorbox({rel:'popout', maxWidth:'95%', maxHeight:'95%'}); });

<img class="popout" src="my.jpg" alt="" width="500" height="373" />

so, what's wrong with my code ? Or do i need to set other attributes as well to get maxWidth/height working ?

Answer 1

Sounds like you are causing an JS error (check your browser's development console).

However, your approach has problems. Try this instead:

jQuery(document).ready(function () {
    $('.popout').colorbox({rel:'popout', maxWidth:'95%', maxHeight:'95%', href:function(){
        return this.src;
    }});
});

<img class="popout" src="my.jpg" alt="" width="500" height="373" />

Answer 2

While I know this is an old question. I just wish to add an answer for reference purposes that I have found useful, with this question.

In order to set a maxWidth or maxHeight on the colorbox one should also define the width and height first. The maxWidth and maxHeight should only be set as limit to how big the image should load.

For mobile viewports I generally set my function as follows, which ensures the colorbox never loads an image larger than 800px for larger screens. Smaller screens show the colorbox in a 90% width.

Code example below only using the width and maxWidth attributes:

$(document).ready(function(){
    $(".popout").colorbox({rel:'popout', width:"90%", maxWidth:"800px"});
});

I hope this helps anyone still stumbling on this question.