Question

我只使用可用的视口来设置colorbox有问题。一旦我设置了maxHeight或maxWidth属性，就不会显示任何图像。彩盒打开，但停留在＆＃34;旋转轮＆＃34;。

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

那么，我的代码有什么问题？或者我是否也需要设置其他属性以使maxWidth / height工作？

Answer 1

听起来你导致了JS错误（请查看浏览器的开发控制台）。

但是，您的方法存在问题。试试这个：

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

虽然我知道这是一个老问题。我只想添加一个答案以供参考，我发现这个问题非常有用。

要在颜色框上设置maxWidth或maxHeight，还应首先定义宽度和高度。 maxWidth和maxHeight只应设置为图像加载大小的限制。

对于移动视口，我通常按如下方式设置我的功能，这可确保彩色框永远不会为大屏幕加载大于800像素的图像。较小的屏幕显示90％宽度的彩色盒。

下面的代码示例仅使用width和maxWidth属性：

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

我希望这有助于任何人仍然绊倒这个问题。

Colorbox maxWidth，maxHeight不工作

2 个答案: