I’ve been learning JS OOP recently, so I wrote something like this
How to use:
$(".viewArea img").zoom({height:74,width:103});
Effect demonstration:
http://demo.jb51.net/html/jquery_img/jquery_img.htm
Code:
(function($){
$.fn.zoom = function(settings){
//Some default configurations;
settings = $.extend({
height:0,
width:0,
loading:"lightbox-ico-loading.gif"
},settings);
var images = this ;
$(images).hide();
var loading = new Image();
loading.className="loading"
loading.src = settings.loading;
$( images).after(loading);
//Preloading
var preLoad = function($this){
var img = new Image();
img.src = $this.src;
if (img.complete) {
processImg.call($this);
return;
}
//$this.src = loading.src;//will cause an error The size of
img.onload = function(){
//$this.src = this.src; //will cause the wrong size to be obtained
processImg.call($this);
img .onload=function(){};
}
}
//Calculate image size;
function processImg(){
//if(settings.height===0|| settings.width ===0) return;
var m = this.height-settings.height;
var n = this.width - settings.width;
if(m>n)
this.height = this.height>settings.height ? settings.height :
this.height;
else
this.width = this.width >settings.width ? settings.width :
this.width;
$(this).next(".loadding").remove()
$(this).show();
}
return $(images).each( function(){
preLoad(this);
});
}
})(jQuery);
The effect is like this: