jquery之放大镜--JQZoom

转自http://www.mind-projects.it/projects/jqzoom/index.php#examples

JQZoom is a javascript image magnifier built at the top of the popular jQuery javascript framework. jQzoom is a great and a really easy to use script to magnify what you want.

Works on all modern browsers:

6+ 2+ 1.0 2+ 9+
  • - 2011.05.03: jQzoom Evolution 2.3 released
 
 
 
Installation

Add first the last jQuery release, then the jQZoom script(don't forget this),the correct order is important.Look at the installation code below.

  1. <script type='text/javascript' src='js/jquery-1.5.xx.js'></script>  
  2. <script type='text/javascript' src='js/jquery.jqzoom-core.js'></script>  

Add jqzoom.css to your header.

  1. <link rel="stylesheet" type="text/css" href="css/jquery.jqzoom.css">  
 
How to use

Using jQZoom is easy,but you need to specify the HTML anchor element,that is going to generate the zoomrevealing a portion of the enlarged image.

  1. <a href="images/BIGIMAGE.JPG" class="MYCLASS" title="MYTITLE">  
  2.     <img src="images/SMALLIMAGE.JPG" title="IMAGE TITLE">  
  3. </a>  
  4.     

The anchor element wraps the small image you would like to zoom.Following this schema the necessary and base elements are:

SMALLIMAGE.JPG: Represents the small image you would like to zoom.
BIGIMAGE.JPG: Represents the big image that jQZoom will reveal.
MYCLASS: Represents the anchor class,that would be used to instantiate the jQZoom script to all the elements matching this class(you can use an ID as well).
MYTITLE/IMAGE TITLE: Anchor title and/or image title that will be used to show the zoom title close to the jQZoom Window.
PAY ATTENTION: The SMALLIMAGE must be a scaled versione of the BIGIMAGE.

Now load the plugin at window load.

  1. $(document).ready(function(){  
  2.     $('.MYCLASS').jqzoom();  
  3. });  

This will instantiate jQzoom in default(standard) mode.You can pass more options(Documentation section),to create special or custom effects as in the example below.

  1. $(document).ready(function(){  
  2.     var options = {  
  3.             zoomType: 'standard',  
  4.             lens:true,  
  5.             preloadImages: true,  
  6.             alwaysOn:false,  
  7.             zoomWidth: 300,  
  8.             zoomHeight: 250,  
  9.             xOffset:90,  
  10.             yOffset:30,  
  11.             position:'left'  
  12.             //...MORE OPTIONS  
  13.     };  
  14.     $('.MYCLASS').jqzoom(options);  
  15. });  
 
Multiple thumbnails support

If you want to create galleries, jQZoom can manage it for you.

1. Attach the gallery ID to your main anchor "rel" attribute.

  1. <a href="images/BIGIMAGE.JPG" class="MYCLASS" title="MYTITLE" rel="gal1">  
  2.     <img src="images/SMALLIMAGE.JPG" title="IMAGE TITLE">  
  3. </a>  

2. Manage your thumbnails "class" and "rel" attributes.
The class "zoomThumbActive" is attached to your thumbnails by jQzoom. By default specify this class to the selected thumbnail(it should be the same image in your main anchor element)

  1. <a class="zoomThumbActive" href="javascript:void(0);" rel="{gallery: 'gal1', smallimage: './imgProd/SMALLIMAGE1.jpg',largeimage: './imgProd/LARGEIMAGE1.jpg'}">  
  2.     <img src="imgProd/thumbs/THUMBIMG1.jpg">  
  3. </a>  
【下载demo和jquery文件请点击文章最后的download图片】
The structure of the thumbnail rel attribute is very important.The base elements are

gallery: the ID of the gallery to which it belongs.
smallimage: the path to the SMALLIMAGE to be loaded on the when you click on the thumbnail.
largeimage: the path to the LARGEIMAGE

  1. rel="{gallery: 'gal1', smallimage: './imgProd/SMALLIMAGE1.jpg',largeimage: './imgProd/LARGEIMAGE1.jpg'}"  
Check out this demo.
 
Documentation
 

Configuration options:

You can choose between these options.

  • OPTION NAME
    DEFAULT
    DESCRIPTION
  • zoomType
    'standard'
    The others admitted option values are 'reverse', 'drag', 'innerzoom'.
  • zoomWidth
    300
    The popup window width showing the zoomed area.
  • zoomHeight
    300
    The popup window height showing the zoomed area.
  • xOffset
    10
    The popup window x offset from the small image. (always positive to move the popup window more on the right if position is "right" or more on the left if position is "left")
  • yOffset
    0
    The popup window y offset from the small image. (always positive to move the popup window more on the top if position is "top" or more on the bottom if position is "bottom"),
  • position
    'right'
    The popup window position.Admitted values: 'right' , 'left' , 'top' , 'bottom'
  • preloadImages
    true
    if set to true,jqzoom will preload large images.
  • preloadText
    'Loading zoom'
    The text to show while preloading images.
  • title
    true
    Show a small title over the zoomed window it can be the anchor title and if not specified,it will get the small image title.
  • lens
    true
    if set to false,the small lens,over the image, won't show.
  • imageOpacity
    0.4
    Set the image opacity when the 'zoomType' option is set to 'reverse'.
  • showEffect
    'show'
    The effect by which showing the popup window.Options available: 'show' , 'fadein'.
  • hideEffect
    'hide'
    The effect by which hiding the popup window.Options available: 'hide' , 'fadeout'.
  • fadeinSpeed
    'slow'
    Changes fade in speed,in case the showEffect option is set to 'fadein'.(options: 'fast', 'slow', number)
  • fadeoutSpeed
    '2000'
    Changes fade out speed,in case the hideEffect option is set to 'fadeout'.(options: 'fast', 'slow', number)

 

Style customizations are obviously admitted simply changing the right parameters value in the jqzoom stylesheet file.

 
 
Download
Latest release version: 2.3 [2011.05.03]

This software is licensed under BSD.(read the license inside the archive)
Remember:Develop,mantain,and longtime support in never easy and without efforts.So if you like this plugin and you would like future support for jQZoom,donate something with Paypal,before downloading it.

Note: Choose and click to download.

Note: When upgrading make sure to replace all files.



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
/* * 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(renzi.mrc@gmail.com). */ (function($) { $.fn.jqzoom = function(options) { var settings = { zoomType: 'standard', //standard/reverse/innerzoom zoomWidth: 400, //zoomed width default width zoomHeight: 400, //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 : 'Loading zoom', preloadPosition : 'center' //bycss }; //extending options options = 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 immagine var smallimage = new Smallimage( img ); var smallimagedata = {}; //imageborder var btop = 0; var bleft = 0; var loader = null; //variabile per memorizzare oggetto loader loader = new Loader(); var ZoomTitle = (trim(aTitle).length > 0) ? aTitle : (trim(imageTitle).length > 0) ? imageTitle : null; //setting zoomtitle var ZoomTitleObj = new zoomTitle(); var largeimage = new Largeimage( a[0].href ); var lens = new Lens(); var lensdata = {}; //lensborder var largeimageloaded = false; var scale = {}; //rapporto tra immagine grande e piccola scale.x/scale.y var stage = null; // quadrato che mostra l'immagine ingrandita var running = false; // running = true quando si verifica l'evento che mostra lo zoom(adesso mouseover). var mousepos = {}; var firstime = 0; var preloadshow = false; var isMouseDown = false; var dragstatus = false //loading smallimagedata smallimage.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) { mousepos.x = e.pageX; mousepos.y = e.pageY; activate(); },function() { deactivate(); }); //ALWAYS ON if(settings.alwaysOn) { setTimeout(function(){activate();},150); } function activate() { if ( !running ) { //finding border smallimage.findborder(); running = true; //rimuovo il titolo al mouseover imageTitle = img.attr('title'); img.removeAttr('title'); aTitle = a.attr('title'); $(a).removeAttr('title'); //se non c?creo l'oggetto largeimage if (!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 parameters running = false; largeimageloaded = false; $(lens.node).unbind('mousemove'); lens.remove(); if($('div.jqZoomWindow').length >0) { stage.remove(); } if($('div.jqZoomTitle').length > 0) { ZoomTitleObj.remove(); } //resetting title img.attr('title',imageTitle); a.attr('title',aTitle); $().unbind(); a.unbind('mousemove'); //resetto il parametro che mi dice che ?la prima volta che mostor lo zoom firstime = 0; //remove ieiframe if(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 provare if(settings.alwaysOn) { activate(); } }; //smallimage function 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'href a.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 dati smallimagedata.w = $( this ).width(); smallimagedata.h = $( this ).height(); //non viene fatta assegnazione alla variabile globale smallimagedata.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'href a.height(smallimagedata.h); a.width(smallimagedata.w); //PRELOAD IMAGES if(settings.preloadImages) { largeimage.loadimage(); } }; return this; }; //Lens function Lens() { //creating element and adding class this.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 zoom this.loadlens = function() { switch(settings.zoomType) { case 'reverse': this.image = new Image(); this.image.src = smallimage.node.src; // fires off async this.node.appendChild( this.image ); $( this.node ).css({'opacity' : 1}); break; case 'innerzoom': this.image = new Image(); this.image.src = largeimage.node.src; // fires off async this.node.appendChild( this.image ); $( this.node ).css({'opacity' : 1}); break default: 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 lente this.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 lente a.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(); } //ADDED firstime = 1; }else { var lensleft = mousepos.x - smallimagedata.pos.l - (lensdata.w)/2 ; var lenstop = mousepos.y - smallimagedata.pos.t -(lensdata.h)/2 ; } //a sinistra if(overleft()) { lensleft = 0 + bleft; }else //a destra if(overright()) { if($.browser.msie) { lensleft = smallimagedata.w - lensdata.w + bleft + 1 ; }else { lensleft = smallimagedata.w - lensdata.w + bleft - 1 ; } } //in alto if(overtop()) { lenstop = 0 + btop ; }else //sotto if(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 grande largeimage.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'immagine Lens.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'offset Lens.prototype.getoffset = function() { var o = {}; o.left = parseInt(this.node.style.left) ; o.top = parseInt(this.node.style.top) ; return o; }; //rimuove la lente Lens.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; } //LARGEIMAGE function Largeimage( url ) { 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'; loader = new Loader(); if(settings.showPreload && !preloadshow) { loader.show(); preloadshow = true; } document.body.appendChild( this.node ); this.node.src = this.url; // fires off async } this.node.onload = function() { this.style.display = 'block'; var w = Math.round($(this).width()); var h = Math.round($(this).height()); this.style.display = 'none'; //setting scale scale.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 attivo if($('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 innerzoom Largeimage.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 }); }; //STAGE function Stage() { var leftpos = smallimagedata.pos.l; var toppos = smallimagedata.pos.t; //creating element and class this.node = document.createElement("div"); $(this.node).addClass('jqZoomWindow'); $( 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="#"></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(); break; case 'fadeout': $('.jqZoomWindow').fadeOut(settings.fadeoutSpeed); break; default: $('.jqZoomWindow').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) { 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; }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值