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

Question

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.

Answer 1

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

Answer 2

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