asiaH1/assets/javascripts/plugin/jquery.lite.image.resize.js

144 lines
4.2 KiB
JavaScript

/* ===================================================
* jquery-lite-image-resize v.1.1
* https://github.com/RayChang/jquery-lite-image-resize
* ===================================================
* How to use ?
*
* HTML element closest to the image to add class "resizeimg".
*
* Example:
* <div class="resizeimg">
* <img src="images url" />
* </div>
*
* Or you can use:
* $('your class').rsImg();
*
* Note : HTML structure must be a structure like the example above.
*
*/
!function ($) {
"use strict";
var ResizeImg = function(element) {
var _oldW = [],
_timer = 0,
$self = this;
$self.element = element;
$self.element.data('exists', true);
$self.element.css({
'position': 'relative',
'overflow': 'hidden',
});
$self.element.each(function(index, el) {
_oldW.push($(el).innerWidth());
$self.resize($(el), $(el).find('img').eq(0));
});
function windowResize() {
clearTimeout(_timer);
_timer = setTimeout(function() {
$self.element.each(function(i, el) {
if(_oldW[i] != $(this).innerWidth()) {
_oldW[i] = $(this).innerWidth();
$self.resize($(el), $(el).find('img').eq(0));
}
});
}, 500);
}
window.onresize = windowResize;
}
ResizeImg.prototype.resize = function(element, img) {
var _imgW, _imgH, _imgScale,
_elW = element.innerWidth(),
_elH = element.innerHeight(),
_elScale = _elW/_elH,
$image = document.createElement("img");
img.removeAttr('style');
$image.src = img.attr('src');
$image.onload = function() {
_imgW = $image.width,
_imgH = $image.height,
_imgScale = _imgW/_imgH;
if(_imgScale < 1) {
if(_elScale < 1) {
if(_elScale > _imgScale) {
img.css(scale().landscape);
} else {
img.css(scale().portrait);
};
} else {
img.css(scale().landscape);
};
};
if(_imgScale > 1) {
if(_elScale > 1) {
if(_elScale > _imgScale) {
img.css(scale().landscape);
} else {
img.css(scale().portrait);
};
} else {
img.css(scale().portrait);
};
};
if(_imgScale == 1) {
if(_elScale < 1) {
img.css(scale().portrait);
} else if(_elScale > 1) {
img.css(scale().landscape);
} else {
img.css(scale().center);
};
};
img.fadeTo(500, 1);
}
function scale() {
return {
portrait: {
'position': 'absolute',
'height': '100%',
'width': 'auto',
'max-width': 'none',
'left': '50%',
'top': 0,
'margin-left': _imgW*(_elH/_imgH)/-2
},
landscape: {
'position': 'absolute',
'height': 'auto',
'max-height': 'none',
'width': '100%',
'left': 0,
'top': '50%',
'margin-top': _imgH*(_elW/_imgW)/-2
},
center: {
'position': 'absolute',
'height': '100%',
'width': '100%',
'top': 0,
'left': 0
}
}
}
}
$.fn.rsImg = function () {
var $this = $(this), resizeImg;
if(!$this.data('exists')) {
$this.find('img').fadeTo(1, 0);
resizeImg = new ResizeImg($this);
}
};
$(function() {
$('.resizeimg').rsImg();
});
}(window.jQuery);