开发者

How can I make image_crop with the Galleria jQuery plugin different if the image is wider vs taller?

Essentially I want to change a variable for image crop depending on the dimensions of each image in the gallery. If an image's height is greater than the width I want to switch to the height crop, else keep the width crop. I am using the Galleria plugin so far I have this code:

if 开发者_开发技巧($(image).width() > $(image).height()){  
var upordown = "width"
} else {        
var upordown = "height"
}

An the variable is here and is part of the list of options for Galleria:

 image_crop : upordown,

Any help would be appreciated.


Are you looking for a way to always fit the image inside the container, without cropping? Try to set image_crop (or imageCrop in the latest version) to false.

Edit: you can listen to the loadfinish event and set options according to the image dimensions on the fly. You need to call refreshImage to apply the changes.

$('#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();
        });
    }
});


taking from David's example I feel like this is the best option. It's not really really smooth but it helps with the issue that Lee Tindell was talking about.

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();
});
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜