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" />