137 lines
4.0 KiB
JavaScript
137 lines
4.0 KiB
JavaScript
/* ===================================================
|
|
* jquery-lite-image-resize v.1.0.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, elementLength, i) {
|
|
this.element = $(element);
|
|
this.element.data('exists', true);
|
|
this.elementLength = elementLength;
|
|
this.index = i;
|
|
};
|
|
ResizeImg.prototype.resize = function(callback) {
|
|
var $img = this.element.children('img').eq(0),
|
|
elW = this.element.innerWidth(),
|
|
elH = this.element.innerHeight(),
|
|
elScale = elW/elH,
|
|
ell = this.elementLength,
|
|
index = this.index,
|
|
image = document.createElement("img");
|
|
image.src = $img.attr('src');
|
|
this.element.css({
|
|
'position': 'relative',
|
|
'overflow': 'hidden',
|
|
});
|
|
function imageLoadComplete() {
|
|
var imgW = image.width,
|
|
imgH = image.height,
|
|
imgScale = imgW/imgH,
|
|
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
|
|
};
|
|
if(imgScale < 1) {
|
|
if(elScale < 1) {
|
|
if(elScale > imgScale) {
|
|
$img.css(landscape);
|
|
} else {
|
|
$img.css(portrait);
|
|
};
|
|
} else {
|
|
$img.css(landscape);
|
|
};
|
|
};
|
|
|
|
if(imgScale > 1) {
|
|
if(elScale > 1) {
|
|
if(elScale > imgScale) {
|
|
$img.css(landscape);
|
|
} else {
|
|
$img.css(portrait);
|
|
};
|
|
} else {
|
|
$img.css(portrait);
|
|
};
|
|
};
|
|
|
|
if(imgScale == 1) {
|
|
if(elScale < 1) {
|
|
$img.css(portrait);
|
|
} else if(elScale > 1) {
|
|
$img.css(landscape);
|
|
} else {
|
|
$img.css(center);
|
|
};
|
|
};
|
|
$img.fadeTo(500, 1);
|
|
|
|
if(index == ell && callback) {
|
|
ResizeImg.prototype.callback(callback)
|
|
}
|
|
}
|
|
if(/MSIE 8.0/g.test($ua)) {
|
|
imageLoadComplete();
|
|
} else {
|
|
image.onload = imageLoadComplete;
|
|
}
|
|
};
|
|
|
|
ResizeImg.prototype.callback = function(callback) {
|
|
callback();
|
|
};
|
|
|
|
$.fn.rsImg = function (callback) {
|
|
var elementLength = this.length - 1;
|
|
this.each(function (i) {
|
|
if(!$(this).data('exists')) {
|
|
$(this).children("img").fadeTo(0,0);
|
|
new ResizeImg(this, elementLength, i).resize(callback);
|
|
};
|
|
});
|
|
};
|
|
|
|
$(function() {
|
|
$('.resizeimg').rsImg();
|
|
});
|
|
}(window.jQuery);
|