jquery - 如果图像更宽与更高，如何使用 Galleria jQuery 插件使 image_crop 有所不同？

Question

本质上，我想根据图库中每个图像的尺寸更改图像裁剪的变量。如果图像的高度大于宽度，我想切换到高度裁剪，否则保持宽度裁剪。到目前为止，我正在使用 Galleria 插件，我有以下代码：

if ($(image).width() > $(image).height()){  
var upordown = "width"
} else {        
var upordown = "height"
}

变量在这里，是 Galleria 选项列表的一部分：

 image_crop : upordown,

任何帮助，将不胜感激。

Answer 1

您是否正在寻找一种始终将图像放入容器内而不进行裁剪的方法？尝试将image_crop（或imageCrop在最新版本中）设置为false.

编辑：loadfinish您可以根据图像尺寸即时收听事件并设置选项。您需要致电refreshImage以应用更改。

$('#galleria').galleria({
    extend: function() {
        var gallery = this,
            landscape;
        this.bind('loadfinish', function(e) {
            landscape = e.imageTarget.width >= e.imageTarget.height 
                ? 'width' : 'height';
            gallery.setOptions( 'imageCrop', landscape ).refreshImage();
        });
    }
});

Answer 2

以大卫的例子为例，我觉得这是最好的选择。这并不是真的很顺利，但它有助于解决 Lee Tindell 所说的问题。

this.bind('image', function(e) {
    var imageW = e.imageTarget.width;
    var imageH = e.imageTarget.height;

    if (imageH > imageW) {
        landscape = 'height';
    } else if (imageH < imageW) {
        landscape = true;
    }

    this.setOptions({ imageCrop: landscape }).refreshImage();
});