9

我在仅使用可用视口设置颜色框时遇到问题。一旦我设置了 maxHeight 或 maxWidth 属性，就不会显示任何图像。颜色框打开，但停留在“纺车”上。

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 正常工作？

4

2 回答 2

16

听起来您正在导致 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" />
于 2012-10-29T06:14:54.100 回答
2

虽然我知道这是一个老问题。我只想为这个问题添加一个我认为有用的参考答案。

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

对于移动视口，我通常将我的函数设置如下，以确保颜色框永远不会为更大的屏幕加载大于 800 像素的图像。较小的屏幕以 90% 的宽度显示颜色框。

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

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

我希望这可以帮助任何仍然在这个问题上绊倒的人。

于 2018-05-30T07:58:11.550 回答