使用 FancyBox 3 获取图像高度答案

【问题标题】：Getting Image Height with FancyBox 3使用 FancyBox 3 获取图像高度
【发布时间】：2017-12-04 20:30:58
【问题描述】：

我在使用要进入fancybox 的图像高度在fancybox 中创建If/then 时遇到问题。

setBigImage : function ( slide ) {
var self = this;
var $img = $('<img />');

slide.$image = $img
.one('error', function() {

self.setError( slide );

})
.one('load', function() {

slide.width  = this.naturalWidth;
slide.height = this.naturalHeight;

.addClass( 'fancybox-image ' )
.attr('src', slide.src)
.appendTo( slide.$content );

本质上，我希望在 .addClass 调用之前添加一个 if/then 来检查图像的高度是否大于 500 像素。我试过用：

if ( slide.Width > 500)
and if ( this.NaturalHeight > 500)

都没有用。我在 p 标签中尝试了 slide.Width 和 this.NaturalHeight 来查看它们输出的文本。不幸的是，他们创建了图像的第二个实例。获取图像高度的最佳方法是什么？

感谢您的耐心和帮助。

【问题讨论】：

标签： javascript jquery css fancybox fancybox-3

【解决方案1】：

首先，让我们澄清一下这个误解——“不幸的是，他们创建了图像的第二个实例”。当使用一些基本的灯箱脚本时，用户会在单击缩略图后立即看到带有加载图标的黑色叠加层，然后图像就会弹出。但是当实际图像仍在加载时，fancybox 会显示缩略图（第一张图像）。然后真实图像（第二张图像）逐渐出现在第一个图像上，用户很可能不会看到或注意到加载指示器。

你的问题的答案也很简单，替换就行了

if ( slide.Width > 500)

与

if ( slide.width > 500)

顺便说一句，fancybox 的下一个版本将允许根据图像大小进行更多自定义，请参阅这些演示 - https://codepen.io/anon/pen/mqQLVm?editors=1010 和 https://codepen.io/anon/pen/yPQjbw?editors=1010

【讨论】：