Fancybox 为某些图像设置高度和宽度属性答案

【问题标题】：Fancybox set height and width attributes for some imageFancybox 为某些图像设置高度和宽度属性
【发布时间】：2016-10-28 03:34:03
【问题描述】：

我正在使用fancybox，我想为某些图像设置宽度和高度。可以这样做吗？

所有建议都很好，提前感谢

【问题讨论】：

using fancybox set height and width的可能重复
这不是重复的，另一个问题是关于将fancybox与iframe类型一起使用，而这个问题是关于图像类型的。 iframe 类型的解决方案对我不起作用。

标签： jquery fancybox

【解决方案1】：

当尝试在fancybox 中为“图像”类型设置宽度和高度时，这对我有用：

jQuery(".fancybox").fancybox({
arrows : true,
autoSize: false,
fitToView: false,
afterLoad: function(){
    this.width = 960;
    this.height = 540;
    }  
}
});

您可以将 960 和 540 更改为您需要的任何值，或者您也可以在函数中进行 javascript 计算。如果要为某个图像运行代码，可以检查当前元素的 ID 或其他属性。例如，如果这是您的 html：

<div class="photo-block fancybox" id="image1" data-fancybox-group="group" href="/image.jpg" title="Image description to show">
<div class="photo-block-img"><img src="/image.jpg"/></div>
<div class="photo-block-text">Some text that shows in here</div></div><div class="photo-block fancybox" id="image2" data-fancybox-group="group" href="/image.jpg" title="Image description to show">
<div class="photo-block-img"><img src="/image.jpg"/></div>
<div class="photo-block-text">Some text that shows in here</div>

然后您可以执行以下操作，仅在 afterLoad 函数中将其应用于 ID“image2”：

if($(this.element).attr('id') == 'image2'){
    this.width=960;
    this.height=540;
}

正如我在“iframe”类型的答案中看到的那样，我必须使用“afterLoad”而不是“beforeLoad”。 beforeLoad 对图像类型没有任何影响，但 afterLoad 起作用了。

【讨论】：