jq放大镜

/* * JQZoom Evolution 1.0.1 - Javascript Image magnifier * * Copyright (c) Engineer Renzi Marco(www.mind-projects.it) * * $Date: 12-12-2008 * *ChangeLog: * * $License : GPL,so any change to the code you should copy and paste this section,and would be nice to report this to me([e-mail]). */(function($){ $.fn.jqzoom = function(options) { var settings = { zoomType: 'standard', //standard/reverse/innerzoom zoomWidth: 430,//zoomed width default width zoomHeight: 430,//zoomed div default width xOffset: 10,//zoomed div default offset yOffset: 0, position: "right" ,//zoomed div default position,offset position is to the right of the image lens:true, //zooming lens over the image,by default is 1;lensReset : false,imageOpacity: 0.2,title : true,alwaysOn: false,showEffect: 'show',hideEffect: 'hide',fadeinSpeed: 'fast',fadeoutSpeed: 'slow',preloadImages :true,showPreload: true,preloadText : '',preloadPosition : 'center' //bycss };//extending optionsoptions = options || {}; $.extend(settings, options);return this.each(function(){var a = $(this);var aTitle = a.attr('title'); //variabile per memorizzare il titolo href$(a).removeAttr('title');$(a).css('outline-style','none');var img = $("img", this);var imageTitle = img.attr('title');img.removeAttr('title');//variabile per memorizzare il titolo immaginevar smallimage = new Smallimage( img );var smallimagedata = {};//imagebordervar btop = 0;var bleft = 0;var loader = null; //variabile per memorizzare oggetto loaderloader = new Loader();var ZoomTitle = (trim(aTitle).length > 0) ? aTitle :(trim(imageTitle).length > 0) ? imageTitle : null; //setting zoomtitlevar ZoomTitleObj = new zoomTitle();var largeimage = new Largeimage( a[0].href );var lens = new Lens();var lensdata = {};//lensbordervar largeimageloaded = false;var scale = {}; //rapporto tra immagine grande e piccola scale.x/scale.yvar stage = null; // quadrato che mostra l'immagine ingranditavar running = false; // running = true quando si verifica l'evento che mostra lo zoom(adesso mouseover).var mousepos = {};var firstime = 0;var preloadshow = true;var isMouseDown = false;var dragstatus = false//$('.jqZoomWindow').remove();//$('#small_img').remove();//alert($('.jqZoomWindow').html());//loading smallimagedatasmallimage.loadimage();//ritorna false al click dell href$(this).click(function(){return false;});//se settato alwaysOn attivo lo Zoom e lo mostro.//attivo al mouseover$(this).hover(function(e){//i--;mousepos.x = e.pageX;mousepos.y= e.pageY;//alert(i);activate();//if (i == ul_0 || i == ul_1 || i == 4 || i == ul_2 || i == ul_3 || i == ul_4) activate();//if (i == 10 || i == 7 || i == 4 || i == 1 || i == -2) activate();},function(){//i++;deactivate();});//ALWAYS ONif(settings.alwaysOn){setTimeout(function(){activate();},150);}function activate(){if ( !running ) {//finding bordersmallimage.findborder();running = true;//rimuovo il titolo al mouseoverimageTitle = img.attr('title');img.removeAttr('title');aTitle = a.attr('title');$(a).removeAttr('title');//se non c?creo l'oggetto largeimageif (!largeimage || $.browser.safari) {largeimage = new Largeimage( a[0].href );}//se l'immagine grande non ?stata caricata la carico//if(!largeimageloaded || $.browser.safari)//{largeimage.loadimage();//}else//{////after preload//if(settings.zoomType != 'innerzoom')//{//stage = new Stage();//stage.activate();//}//lens = new Lens;//lens.activate();//}//hack per MAC/*if($.browser.safari){if(settings.zoomType != 'innerzoom') //se innerzoom non mostro la finestra dello zoom{stage = new Stage();stage.activate();}if($('div.jqZoomPup').length <= 0){lens = new Lens();}//if(settings.zoomType == 'innerzoom'){lens = new Lens()};lens.activate();(settings.alwaysOn) ? lens.center() : lens.setposition(null);}*/a[0].blur();//alert($('div.jqZoomPup').length);return false;}}function deactivate(){if(settings.zoomType == 'reverse' && !settings.alwaysOn){img.css({'opacity' : 1});}if(!settings.alwaysOn){//resetting parametersrunning = false;largeimageloaded = false;$(lens.node).unbind('mousemove');lens.remove();if($('div.jqZoomWindow').length >0){stage.remove();}if($('div.jqZoomTitle').length > 0){ZoomTitleObj.remove();}//resetting titleimg.attr('title',imageTitle);a.attr('title',aTitle);$().unbind();a.unbind('mousemove');//resetto il parametro che mi dice che ?la prima volta che mostor lo zoomfirstime = 0;//remove ieiframeif(jQuery('.zoom_ieframe').length > 0){jQuery('.zoom_ieframe').remove();}}else{if(settings.lensReset){switch(settings.zoomType){case 'innerzoom':largeimage.setcenter();break;default:lens.center();break;}}}//non so se serve da provareif(settings.alwaysOn){activate();}};//smallimagefunction Smallimage( image ){this.node = image[0];this.loadimage = function() {this.node.src = image[0].src;};this.findborder = function(){var bordertop = '';bordertop = $(img).css('border-top-width');btop = '';var borderleft = '';borderleft = $(img).css('border-left-width');bleft = '';/*if($.browser.msie){var temp = bordertop.split(' ');bordertop = temp[1];var temp = borderleft.split(' ');borderleft = temp[1];}*/if(bordertop){for(i=0;i<3;i++){var x = [];x = bordertop.substr(i,1);if(isNaN(x) == false){btop = btop +''+ bordertop.substr(i,1);}else{break;}}}if(borderleft){for(i=0;i<3;i++){if(!isNaN(borderleft.substr(i,1))){bleft = bleft + borderleft.substr(i,1)}else{break;}}}btop = (btop.length > 0) ? eval(btop) : 0;bleft = (bleft.length > 0) ? eval(bleft) : 0;}this.node.onload = function(){//setto il cursor e la posizione dell'hrefa.css({'cursor':'crosshair','display':'block'});if(a.css('position')!= 'absolute' && a.parent().css('position')){a.css({'cursor':'crosshair','position':'relative','display':'block'});}if(a.parent().css('position') != 'absolute'){a.parent().css('position','relative');//a.css('position','relative');}else{//a.css('position','relative');}if($.browser.safari || $.browser.opera){$(img).css({position:'absolute',top:'0px',left:'0px'});}/*if(a.css('position')!= 'absolute' && a.parent().css('position')){a.css({'cursor':'crosshair','position':'relative','display':'block'});}if(a.parent().css('position') != 'absolute'){alert('in');a.parent().css('position','relative');//a.css('position','relative');}else{//a.css('position','relative');}*//*if(a.parent().css('position') != 'relative' && a.css('position') != 'absolute'){a.css({'cursor':'crosshair','position':'relative','display':'block'});}*///al docuemnt ready viene caricato l'src quindi viene azionato l'onload e carico tutti i datismallimagedata.w = $( this ).width();smallimagedata.h = $( this ).height();//non viene fatta assegnazione alla variabile globalesmallimagedata.h = $( this ).height();smallimagedata.pos = $( this ).offset();smallimagedata.pos.l = $( this ).offset().left;smallimagedata.pos.t = $( this ).offset().top;smallimagedata.pos.r = smallimagedata.w + smallimagedata.pos.l;smallimagedata.pos.b = smallimagedata.h + smallimagedata.pos.t;//per sicurezza setto l'altezza e la width dell'hrefa.height(smallimagedata.h);a.width(smallimagedata.w);//PRELOAD IMAGESif(settings.preloadImages){largeimage.loadimage();}};return this;};//Lensfunction Lens(){//$('.jqZoomWindow').remove();$('.jqZoomPup').remove();//creating element and adding classthis.node = document.createElement("div");$(this.node).addClass('jqZoomPup');this.node.onerror = function() {$( lens.node ).remove();lens = new Lens();lens.activate() ;};//funzione privata per il caricamento dello zoomthis.loadlens = function(){switch(settings.zoomType){case 'reverse':this.image = new Image();this.image.src = smallimage.node.src; // fires off asyncthis.node.appendChild( this.image );$( this.node ).css({'opacity' : 1});break;case 'innerzoom':this.image = new Image();this.image.src = largeimage.node.src; // fires off asyncthis.node.appendChild( this.image );$( this.node ).css({'opacity' : 1});breakdefault:break;}switch(settings.zoomType){case 'innerzoom':lensdata.w = smallimagedata.w;lensdata.h = smallimagedata.h;break;default:lensdata.w = (settings.zoomWidth)/scale.x;lensdata.h = (settings.zoomHeight)/scale.y;break;}$( this.node ).css({width: lensdata.w + 'px',height: lensdata.h + 'px',position: 'absolute',/*cursor: 'crosshair',*/display: 'none',//border: '1px solid blue'borderWidth: 1+'px'});a.append(this.node);}return this;};Lens.prototype.activate = function(){//carico la lentethis.loadlens();switch(settings.zoomType){case 'reverse':img.css({'opacity' : settings.imageOpacity});(settings.alwaysOn) ? lens.center() : lens.setposition(null);//lens.center();//bindo ad a il mousemove della lentea.bind( 'mousemove', function(e){mousepos.x = e.pageX;mousepos.y = e.pageY;lens.setposition( e );});break;case 'innerzoom'://lens = new Lens();//lens.activate();$( this.node ).css({top : 0 ,left: 0}); if(settings.title){ZoomTitleObj.loadtitle();}largeimage.setcenter(); a.bind( 'mousemove', function(e) {mousepos.x = e.pageX;mousepos.y = e.pageY;largeimage.setinner( e );/*if(settings.zoomType == 'innerzoom' && running){$(a).mousemove(function(){if($('div.jqZoomPup').length <= 0){lens = new Lens();lens.activate();}});}*//*if($('div.jqZoomPup').length <= 0){lens = new Lens();lens.activate();}*/});break;default:/*$(document).mousemove(function(e){if(isMouseDown && dragstatus != false){lens.setposition( e );}});lens.center()dragstatus = 'on'$(document).mouseup(function(e){if(isMouseDown && dragstatus != false){isMouseDown = false;dragstatus = false;}});$(this.node).mousedown(function(e){$('div.jqZoomPup').css("cursor", "move");$(this.node).css("position", "absolute");// set z-index$(this.node).css("z-index", parseInt( new Date().getTime()/1000 ));if($.browser.safari){$(a).css("cursor", "move");}isMouseDown = true;dragstatus = 'on';lens.setposition( e );});*/(settings.alwaysOn) ? lens.center() : lens.setposition(null);//bindo ad a il mousemove della lente$(a).bind( 'mousemove', function(e){mousepos.x = e.pageX;mousepos.y = e.pageY;lens.setposition( e );});break;}return this;};Lens.prototype.setposition = function( e){if(e){mousepos.x = e.pageX;mousepos.y= e.pageY;}if(firstime == 0){ var lensleft = (smallimagedata.w)/2 - (lensdata.w)/2 ; var lenstop = (smallimagedata.h)/2 - (lensdata.h)/2 ;//ADDED$('div.jqZoomPup').show()if(settings.lens){this.node.style.visibility = 'visible';}else{this.node.style.visibility = 'hidden';$('div.jqZoomPup').hide();}//ADDEDfirstime = 1;}else{var lensleft = mousepos.x - smallimagedata.pos.l - (lensdata.w)/2 ;var lenstop = mousepos.y - smallimagedata.pos.t -(lensdata.h)/2 ;}//a sinistraif(overleft()){lensleft = 0 + bleft;}else//a destraif(overright()){if($.browser.msie){lensleft = smallimagedata.w - lensdata.w + bleft + 1 ;}else{lensleft = smallimagedata.w - lensdata.w + bleft - 1 ;}}//in altoif(overtop()){lenstop = 0 + btop ;}else//sottoif(overbottom()){if($.browser.msie){lenstop = smallimagedata.h - lensdata.h + btop + 1 ;}else{lenstop = smallimagedata.h - lensdata.h - 1 + btop ;}}lensleft = parseInt(lensleft);lenstop = parseInt(lenstop);//setto lo zoom ed un eventuale immagine al centro$('div.jqZoomPup',a).css({top: lenstop,left: lensleft });if(settings.zoomType == 'reverse'){$('div.jqZoomPup img',a).css({'position': 'absolute','top': -( lenstop - btop +1) ,'left': -(lensleft - bleft +1) });}this.node.style.left = lensleft + 'px';this.node.style.top = lenstop + 'px';//setto l'immagine grandelargeimage.setposition();function overleft() {return mousepos.x - (lensdata.w +2*1)/2 - bleft < smallimagedata.pos.l;}function overright() {return mousepos.x + (lensdata.w + 2* 1)/2 > smallimagedata.pos.r + bleft ;}function overtop() {return mousepos.y - (lensdata.h + 2* 1)/2 - btop < smallimagedata.pos.t;}function overbottom() {return mousepos.y + (lensdata.h + 2* 1)/2 > smallimagedata.pos.b + btop;}return this;};//mostra la lente al centro dell'immagineLens.prototype.center = function(){$('div.jqZoomPup',a).css('display','none');var lensleft = (smallimagedata.w)/2 - (lensdata.w)/2 ;var lenstop = (smallimagedata.h)/2 - (lensdata.h)/2;this.node.style.left = lensleft + 'px';this.node.style.top = lenstop + 'px';$('div.jqZoomPup',a).css({top: lenstop,left: lensleft });if(settings.zoomType == 'reverse'){/*if($.browser.safari){alert('safari');alert(2*bleft);$('div.jqZoomPup img',a).css({'position': 'absolute','top': -( lenstop - btop +1) ,'left': -(lensleft - 2*bleft) });}else{*/$('div.jqZoomPup img',a).css({'position': 'absolute','top': -(lenstop - btop + 1) ,'left': -( lensleft - bleft +1) });//}}largeimage.setposition();if($.browser.msie){$('div.jqZoomPup',a).show();}else{setTimeout(function(){$('div.jqZoomPup').fadeIn('fast');},10);}};//ritorna l'offsetLens.prototype.getoffset = function() {var o = {};o.left = parseInt(this.node.style.left) ;o.top = parseInt(this.node.style.top) ;return o;};//rimuove la lenteLens.prototype.remove = function(){if(settings.zoomType == 'innerzoom'){$('div.jqZoomPup',a).fadeOut('fast',function(){/*$('div.jqZoomPup img').remove();*/$(this).remove();});}else{//$('div.jqZoomPup img').remove();$('div.jqZoomPup',a).remove();}};Lens.prototype.findborder = function(){var bordertop = '';bordertop = $('div.jqZoomPup').css('borderTop');//alert(bordertop);lensbtop = '';var borderleft = '';borderleft = $('div.jqZoomPup').css('borderLeft');lensbleft = '';if($.browser.msie){var temp = bordertop.split(' ');bordertop = temp[1];var temp = borderleft.split(' ');borderleft = temp[1];}if(bordertop){for(i=0;i<3;i++){var x = [];x = bordertop.substr(i,1);if(isNaN(x) == false){lensbtop = lensbtop +''+ bordertop.substr(i,1);}else{break;}}}if(borderleft){for(i=0;i<3;i++){if(!isNaN(borderleft.substr(i,1))){lensbleft = lensbleft + borderleft.substr(i,1)}else{break;}}}lensbtop = (lensbtop.length > 0) ? eval(lensbtop) : 0;lensbleft = (lensbleft.length > 0) ? eval(lensbleft) : 0;}//LARGEIMAGEfunction Largeimage( url ){$('.jqZoomWindow').remove();$('#small_img').remove();this.url = url;this.node = new Image();/*if(settings.preloadImages){ preload.push(new Image());preload.slice(-1).src = url ;}*/this.loadimage = function(){if(!this.node)this.node = new Image();this.node.style.position = 'absolute';this.node.style.display = 'none';this.node.style.left = '-5000px';this.node.style.top = '10px';this.node.id = 'small_img';loader = new Loader();if(settings.showPreload && !preloadshow){loader.show();preloadshow = true;}document.body.appendChild( this.node );this.node.src = obj_src; // fires off async//this.node.src = 'http://www.masamaso.com/upload/test_upload/8312131/8312131_b_2.jpg'; // fires off async//this.node.src = this.url; // fires off async}this.node.onload = function(){this.style.display = 'block';var w = Math.round($(this).width());varh = Math.round($(this).height());this.style.display = 'none';//setting scalescale.x = (w / smallimagedata.w);scale.y = (h / smallimagedata.h);if($('div.preload').length > 0){$('div.preload').remove();}largeimageloaded = true;if(settings.zoomType != 'innerzoom' && running){stage = new Stage();stage.activate();}if(running){//alert('in');lens = new Lens();lens.activate() ;}//la attivoif($('div.preload').length > 0){$('div.preload').remove();}}return this;}Largeimage.prototype.setposition = function(){ this.node.style.left = Math.ceil( - scale.x * parseInt(lens.getoffset().left) + bleft) + 'px';this.node.style.top = Math.ceil( - scale.y * parseInt(lens.getoffset().top) +btop) + 'px';};//setto la posizione dell'immagine grande nel caso di innerzoomLargeimage.prototype.setinner = function(e) { this.node.style.left = Math.ceil( - scale.x * Math.abs(e.pageX - smallimagedata.pos.l)) + 'px';this.node.style.top = Math.ceil( - scale.y * Math.abs(e.pageY - smallimagedata.pos.t)) + 'px';$('div.jqZoomPup img',a).css({'position': 'absolute','top': this.node.style.top,'left': this.node.style.left });};Largeimage.prototype.setcenter = function() { this.node.style.left = Math.ceil(- scale.x * Math.abs((smallimagedata.w)/2)) + 'px';this.node.style.top = Math.ceil( - scale.y * Math.abs((smallimagedata.h)/2)) + 'px';$('div.jqZoomPup img',a).css({'position': 'absolute','top': this.node.style.top,'left': this.node.style.left });};//STAGEfunction Stage(){$('.jqZoomWindow').remove();$('#small_img').remove();var leftpos = smallimagedata.pos.l;var toppos = smallimagedata.pos.t;//creating element and classthis.node = document.createElement("div");$(this.node).addClass('jqZoomWindow');var obj_window = this.node;$( this.node ).css({position: 'absolute',width: Math.round(settings.zoomWidth) + 'px',height: Math.round(settings.zoomHeight) + 'px',display: 'none',zIndex: 10000,overflow: 'hidden'});//fa il positionamento switch(settings.position) { case "right":leftpos = (smallimagedata.pos.r + Math.abs(settings.xOffset) + settings.zoomWidth < screen.width)? (smallimagedata.pos.l + smallimagedata.w + Math.abs(settings.xOffset)): (smallimagedata.pos.l - settings.zoomWidth - Math.abs(settings.xOffset));topwindow = smallimagedata.pos.t + settings.yOffset + settings.zoomHeight;toppos = (topwindow < screen.height && topwindow > 0)? smallimagedata.pos.t + settings.yOffset: smallimagedata.pos.t; break; case "left":leftpos = (smallimagedata.pos.l - Math.abs(settings.xOffset) - settings.zoomWidth > 0)? (smallimagedata.pos.l - Math.abs(settings.xOffset) - settings.zoomWidth): (smallimagedata.pos.l + smallimagedata.w + Math.abs(settings.xOffset));topwindow = smallimagedata.pos.t + settings.yOffset + settings.zoomHeight;toppos = (topwindow < screen.height && topwindow > 0)? smallimagedata.pos.t + settings.yOffset: smallimagedata.pos.t; break; case "top":toppos = (smallimagedata.pos.t - Math.abs(settings.yOffset) - settings.zoomHeight > 0)? (smallimagedata.pos.t - Math.abs(settings.yOffset) - settings.zoomHeight): (smallimagedata.pos.t + smallimagedata.h + Math.abs(settings.yOffset));leftwindow = smallimagedata.pos.l + settings.xOffset + settings.zoomWidth;leftpos = (leftwindow < screen.width && leftwindow > 0)? smallimagedata.pos.l + settings.xOffset: smallimagedata.pos.l; break; case "bottom":toppos = (smallimagedata.pos.b + Math.abs(settings.yOffset) + settings.zoomHeight < $('body').height())? (smallimagedata.pos.b + Math.abs(settings.yOffset)): (smallimagedata.pos.t - settings.zoomHeight - Math.abs(settings.yOffset));leftwindow = smallimagedata.pos.l + settings.xOffset + settings.zoomWidth;leftpos = (leftwindow < screen.width && leftwindow > 0)? smallimagedata.pos.l + settings.xOffset: smallimagedata.pos.l; break; default:leftpos = (smallimagedata.pos.l + smallimagedata.w + settings.xOffset + settings.zoomWidth < screen.width)? (smallimagedata.pos.l + smallimagedata.w + Math.abs(settings.xOffset)): (smallimagedata.pos.l - settings.zoomWidth - Math.abs(settings.xOffset));toppos = (smallimagedata.pos.b + Math.abs(settings.yOffset) + settings.zoomHeight < screen.height)? (smallimagedata.pos.b + Math.abs(settings.yOffset)): (smallimagedata.pos.t - settings.zoomHeight - Math.abs(settings.yOffset)); break; }this.node.style.left = leftpos + 'px';this.node.style.top = toppos + 'px';return this;}Stage.prototype.activate = function(){if ( !this.node.firstChild )this.node.appendChild( largeimage.node );if(settings.title){ZoomTitleObj.loadtitle();}document.body.appendChild( this.node );switch(settings.showEffect){case 'show':$(this.node).show();break;case 'fadein':$(this.node).fadeIn(settings.fadeinSpeed);break;default:$(this.node).show();break;}$(this.node).show(); if ($.browser.msie && $.browser.version < 7) { this.ieframe = $('<iframe class="zoom_ieframe" frameborder="0" src="#" mce_src="#"></iframe>') .css({ position: "absolute", left:this.node.style.left,top:this.node.style.top,zIndex: 99,width:settings.zoomWidth,height:settings.zoomHeight }) .insertBefore(this.node); };largeimage.node.style.display = 'block';}Stage.prototype.remove = function() {switch(settings.hideEffect){case 'hide':$('.jqZoomWindow').remove();$('#small_img').remove();break;case 'fadeout':$('.jqZoomWindow').fadeOut(settings.fadeoutSpeed);break;default:$('.jqZoomWindow').remove();$('#small_img').remove();break;}}function zoomTitle(){this.node = jQuery('<div />').addClass('jqZoomTitle').html('' + ZoomTitle +'');this.loadtitle = function(){if(settings.zoomType == 'innerzoom'){$(this.node).css({position: 'absolute', top: smallimagedata.pos.b +3, left: (smallimagedata.pos.l+1), width:smallimagedata.w }).appendTo('body');}else{$(this.node).appendTo(stage.node);}};}zoomTitle.prototype.remove = function() {$('.jqZoomTitle').remove();}function Loader(){this.node = document.createElement("div");$(this.node).addClass('preload');$(this.node).html(settings.preloadText);//appendo il testo$(this.node ).appendTo("body").css('visibility','hidden');this.show = function(){switch(settings.preloadPosition){case 'center':loadertop = smallimagedata.pos.t + (smallimagedata.h - $(this.node ).height())/2;loaderleft = smallimagedata.pos.l + (smallimagedata.w - $(this.node ).width())/2;break;default:var loaderoffset = this.getoffset();loadertop = !isNaN(loaderoffset.top) ? smallimagedata.pos.t + loaderoffset.top : smallimagedata.pos.t + 0;loaderleft = !isNaN(loaderoffset.left) ? smallimagedata.pos.l + loaderoffset.left : smallimagedata.pos.l + 0;break;}//setting position$(this.node).css({top: loadertop ,left: loaderleft ,position: 'absolute',visibility:'visible' });}return this;}Loader.prototype.getoffset = function(){var o = null;o = $('div.preload').offset();return o;}});}})(jQuery);function trim(stringa){return false; while (stringa.substring(0,1) == ' '){ stringa = stringa.substring(1, stringa.length); } while (stringa.substring(stringa.length-1, stringa.length) == ' '){ stringa = stringa.substring(0,stringa.length-1); } return stringa;}