147 lines
3.6 KiB
JavaScript
147 lines
3.6 KiB
JavaScript
|
(function( $ ) {
|
||
|
|
$.fn.muImageResize = function( params ) {
|
||
|
|
var _defaultSettings = {
|
||
|
|
width:300,
|
||
|
|
height:300,
|
||
|
|
wrap_fix:true // Let image display like in-line.
|
||
|
|
};
|
||
|
|
var _set = $.extend(_defaultSettings, params);
|
||
|
|
// var isIE7 = $.browser.msie && (7 == ~~ $.browser.version);
|
||
|
|
|
||
|
|
//var anyDynamicSource = $(this).attr("src");
|
||
|
|
//$(this).attr("src",anyDynamicSource+ "?" + new Date().getTime());
|
||
|
|
|
||
|
|
// Just bind load event once per element.
|
||
|
|
return this.one('load', function() {
|
||
|
|
// Remove all attributes and CSS rules.
|
||
|
|
this.removeAttribute( "width" );
|
||
|
|
this.removeAttribute( "height" );
|
||
|
|
this.style.width = this.style.height = "";
|
||
|
|
|
||
|
|
var ow, oh;
|
||
|
|
|
||
|
|
//[workaround] - msie need get width early
|
||
|
|
if (/MSIE/g.test($ua))
|
||
|
|
{
|
||
|
|
// Get original size for calcutation.
|
||
|
|
ow = this.width;
|
||
|
|
oh = this.height;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (_set.wrap_fix) {
|
||
|
|
$(this).wrap(function(){
|
||
|
|
return '<div style="width:'+_set.width+'px; height:'+_set.height+'px; display:inline-block;" />';
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!/MSIE/g.test($ua))
|
||
|
|
{
|
||
|
|
// Get original size for calcutation.
|
||
|
|
ow = this.width;
|
||
|
|
oh = this.height;
|
||
|
|
}
|
||
|
|
|
||
|
|
// if cannot get width or height.
|
||
|
|
if (0==ow || 0==oh){
|
||
|
|
$(this).width(_set.width);
|
||
|
|
$(this).height(_set.height);
|
||
|
|
}else{
|
||
|
|
|
||
|
|
// Merge position settings
|
||
|
|
var sh_margin_type='';
|
||
|
|
|
||
|
|
// if original image's width > height.
|
||
|
|
if (ow > oh) {
|
||
|
|
p = oh / _set.height;
|
||
|
|
oh = _set.height;
|
||
|
|
ow = ow / p;
|
||
|
|
|
||
|
|
// original image width smaller than settings.
|
||
|
|
if (ow < _set.width){
|
||
|
|
// need to resize again,
|
||
|
|
// because new image size range must can cover settings' range, than we can crop it correctly.
|
||
|
|
p = ow / _set.width;
|
||
|
|
ow = _set.width;
|
||
|
|
oh = oh / p;
|
||
|
|
|
||
|
|
// the crop range would be in the center of new image size.
|
||
|
|
sh = (oh-_set.height)/2;
|
||
|
|
t=sh+'px';
|
||
|
|
r=_set.width+'px';
|
||
|
|
b=(_set.height+sh)+'px';
|
||
|
|
l='0px';
|
||
|
|
|
||
|
|
// need to be adjust top position latter.
|
||
|
|
sh_margin_type = 'margin-top';
|
||
|
|
|
||
|
|
// original image width bigger than settings.
|
||
|
|
}else{
|
||
|
|
// new image range can cover settings' range.
|
||
|
|
sh = (ow-_set.width)/2;
|
||
|
|
t='0px';
|
||
|
|
r=(_set.width+sh)+'px';
|
||
|
|
b=_set.height+'px';
|
||
|
|
l=sh+'px';
|
||
|
|
// need to be adjust left position latter.
|
||
|
|
sh_margin_type = 'margin-left';
|
||
|
|
}
|
||
|
|
// ref above, change width to height then do same things.
|
||
|
|
}else{
|
||
|
|
p = ow / _set.width;
|
||
|
|
ow = _set.width;
|
||
|
|
oh = oh / p;
|
||
|
|
|
||
|
|
if (oh < _set.height) {
|
||
|
|
p = oh / _set.height;
|
||
|
|
oh = _set.height;
|
||
|
|
ow = ow / p;
|
||
|
|
|
||
|
|
sh = (ow-_set.width)/2;
|
||
|
|
t='0px';
|
||
|
|
r=(_set.width+sh)+'px';
|
||
|
|
b=_set.height+'px';
|
||
|
|
l=sh+'px';
|
||
|
|
sh_margin_type = 'margin-left';
|
||
|
|
}else{
|
||
|
|
sh = (oh-_set.height)/2;
|
||
|
|
t=sh+'px';
|
||
|
|
r=_set.width+'px';
|
||
|
|
b=(_set.height+sh)+'px';
|
||
|
|
l='0px';
|
||
|
|
sh_margin_type = 'margin-top';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Resize img.
|
||
|
|
$(this).width(ow);
|
||
|
|
$(this).height(oh);
|
||
|
|
|
||
|
|
// Crop img by set clip style.
|
||
|
|
$(this).css('clip','rect('+t+' '+r+' '+b+' '+l+')');
|
||
|
|
|
||
|
|
var osh = 0;
|
||
|
|
if('auto' != $(this).css(sh_margin_type)){
|
||
|
|
osh = parseInt($(this).css(sh_margin_type));
|
||
|
|
}
|
||
|
|
|
||
|
|
if (0 < sh) {sh*=-1;}
|
||
|
|
sh += osh;
|
||
|
|
|
||
|
|
$(this).css(sh_margin_type, sh+'px');
|
||
|
|
// $(this).css('position','absolute');
|
||
|
|
}
|
||
|
|
$(this).fadeIn('slow');
|
||
|
|
})
|
||
|
|
.one( "error", function() {
|
||
|
|
//$(this).hide();
|
||
|
|
})
|
||
|
|
.each(function() {
|
||
|
|
$(this).hide();
|
||
|
|
// Trigger load event (for Gecko and MSIE)
|
||
|
|
if ( this.complete || /MSIE/g.test($ua) ) {
|
||
|
|
$( this ).trigger( "load" ).trigger( "error" );
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
})( jQuery );
|