144 lines
4.2 KiB
JavaScript
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);
|