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();
});
精彩评论