xp-dev.com Git - namibia/blob - public/js/vendor/jquery.jqzoom-core.js

   1 /*!
   2  * jQzoom Evolution Library v2.3  - Javascript Image magnifier
   3  * http://www.mind-projects.it
   4  *
   5  * Copyright 2011, Engineer Marco Renzi
   6  * Licensed under the BSD license.
   7  *
   8  * Redistribution and use in source and binary forms, with or without
   9  * modification, are permitted provided that the following conditions are met:
  10  *     * Redistributions of source code must retain the above copyright
  11  *       notice, this list of conditions and the following disclaimer.
  12  *     * Redistributions in binary form must reproduce the above copyright
  13  *       notice, this list of conditions and the following disclaimer in the
  14  *       documentation and/or other materials provided with the distribution.
  15  *     * Neither the name of the organization nor the
  16  *       names of its contributors may be used to endorse or promote products
  17  *       derived from this software without specific prior written permission.
  18  *
  19  * Date: 03 May 2011 22:16:00
  20  */
  21 (function ($) {
  22     //GLOBAL VARIABLES
  23     var isIE6 = ($.browser.msie && $.browser.version < 7);
  24     var body = $(document.body);
  25     var window = $(window);
  26     var jqzoompluging_disabled = false; //disabilita globalmente il plugin
  27     $.fn.jqzoom = function (options) {
  28         return this.each(function () {
  29             var node = this.nodeName.toLowerCase();
  30             if (node == 'a') {
  31                 new jqzoom(this, options);
  32             }
  33         });
  34     };
  35     jqzoom = function (el, options) {
  36         var api = null;
  37         api = $(el).data("jqzoom");
  38         if (api) return api;
  39         var obj = this;
  40         var settings = $.extend({}, $.jqzoom.defaults, options || {});
  41         obj.el = el;
  42         el.rel = $(el).attr('rel');
  43         //ANCHOR ELEMENT
  44         el.zoom_active = false;
  45         el.zoom_disabled = false; //to disable single zoom instance
  46         el.largeimageloading = false; //tell us if large image is loading
  47         el.largeimageloaded = false; //tell us if large image is loaded
  48         el.scale = {};
  49         el.timer = null;
  50         el.mousepos = {};
  51         el.mouseDown = false;
  52         $(el).css({
  53             'outline-style': 'none',
  54             'text-decoration': 'none'
  55         });
  56         //BASE IMAGE
  57         var img = $("img:eq(0)", el);
  58         el.title = $(el).attr('title');
  59         el.imagetitle = img.attr('title');
  60         var zoomtitle = ($.trim(el.title).length > 0) ? el.title : el.imagetitle;
  61         var smallimage = new Smallimage(img);
  62         var lens = new Lens();
  63         var stage = new Stage();
  64         var largeimage = new Largeimage();
  65         var loader = new Loader();
  66         //preventing default click,allowing the onclick event [exmple: lightbox]
  67         $(el).bind('click', function (e) {
  68             e.preventDefault();
  69             return false;
  70         });
  71         //setting the default zoomType if not in settings
  72         var zoomtypes = ['standard', 'drag', 'innerzoom', 'reverse'];
  73         if ($.inArray($.trim(settings.zoomType), zoomtypes) < 0) {
  74             settings.zoomType = 'standard';
  75         }
  76         $.extend(obj, {
  77             create: function () { //create the main objects
  78                 //create ZoomPad
  79                 if ($(".zoomPad", el).length == 0) {
  80                     el.zoomPad = $('<div/>').addClass('zoomPad');
  81                     img.wrap(el.zoomPad);
  82                 }
  83                 if(settings.zoomType == 'innerzoom'){
  84                     settings.zoomWidth  = smallimage.w;
  85                     settings.zoomHeight  =   smallimage.h;
  86                 }
  87                 //creating ZoomPup
  88                 if ($(".zoomPup", el).length == 0) {
  89                     lens.append();
  90                 }
  91                 //creating zoomWindow
  92                 if ($(".zoomWindow", el).length == 0) {
  93                     stage.append();
  94                 }
  95                 //creating Preload
  96                 if ($(".zoomPreload", el).length == 0) {
  97                     loader.append();
  98                 }
  99                 //preloading images
 100                 if (settings.preloadImages || settings.zoomType == 'drag' || settings.alwaysOn) {
 101                     obj.load();
 102                 }
 103                 obj.init();
 104             },
 105             init: function () {
 106                 //drag option
 107                 if (settings.zoomType == 'drag') {
 108                     $(".zoomPad", el).mousedown(function () {
 109                         el.mouseDown = true;
 110                     });
 111                     $(".zoomPad", el).mouseup(function () {
 112                         el.mouseDown = false;
 113                     });
 114                     document.body.ondragstart = function () {
 115                         return false;
 116                     };
 117                     $(".zoomPad", el).css({
 118                         cursor: 'default'
 119                     });
 120                     $(".zoomPup", el).css({
 121                         cursor: 'move'
 122                     });
 123                 }
 124                 if (settings.zoomType == 'innerzoom') {
 125                     $(".zoomWrapper", el).css({
 126                         cursor: 'crosshair'
 127                     });
 128                 }
 129                 $(".zoomPad", el).bind('mouseenter mouseover', function (event) {
 130                     img.attr('title', '');
 131                     $(el).attr('title', '');
 132                     el.zoom_active = true;
 133                     //if loaded then activate else load large image
 134                     smallimage.fetchdata();
 135                     if (el.largeimageloaded) {
 136                         obj.activate(event);
 137                     } else {
 138                         obj.load();
 139                     }
 140                 });
 141                 $(".zoomPad", el).bind('mouseleave', function (event) {
 142                     obj.deactivate();
 143                 });
 144                 $(".zoomPad", el).bind('mousemove', function (e) {
 145
 146                     //prevent fast mouse mevements not to fire the mouseout event
 147                     if (e.pageX > smallimage.pos.r || e.pageX < smallimage.pos.l || e.pageY < smallimage.pos.t || e.pageY > smallimage.pos.b) {
 148                         lens.setcenter();
 149                         return false;
 150                     }
 151                     el.zoom_active = true;
 152                     if (el.largeimageloaded && !$('.zoomWindow', el).is(':visible')) {
 153                         obj.activate(e);
 154                     }
 155                     if (el.largeimageloaded && (settings.zoomType != 'drag' || (settings.zoomType == 'drag' && el.mouseDown))) {
 156                         lens.setposition(e);
 157                     }
 158                 });
 159                 var thumb_preload = new Array();
 160                 var i = 0;
 161                 //binding click event on thumbnails
 162                 var thumblist = new Array();
 163                 thumblist = $('a').filter(function () {
 164                     var regex = new RegExp("gallery[\\s]*:[\\s]*'" + $.trim(el.rel) + "'", "i");
 165                     var rel = $(this).attr('rel');
 166                     if (regex.test(rel)) {
 167                         return this;
 168                     }
 169                 });
 170                 if (thumblist.length > 0) {
 171                     //getting the first to the last
 172                     var first = thumblist.splice(0, 1);
 173                     thumblist.push(first);
 174                 }
 175                 thumblist.each(function () {
 176                     //preloading thumbs
 177                     if (settings.preloadImages) {
 178                         var thumb_options = $.extend({}, eval("(" + $.trim($(this).attr('rel')) + ")"));
 179                         thumb_preload[i] = new Image();
 180                         thumb_preload[i].src = thumb_options.largeimage;
 181                         i++;
 182                     }
 183                     $(this).click(function (e) {
 184                         if($(this).hasClass('zoomThumbActive')){
 185                           return false;
 186                         }
 187                         thumblist.each(function () {
 188                             $(this).removeClass('zoomThumbActive');
 189                         });
 190                         e.preventDefault();
 191                         obj.swapimage(this);
 192                         return false;
 193                     });
 194                 });
 195             },
 196             load: function () {
 197                 if (el.largeimageloaded == false && el.largeimageloading == false) {
 198                     var url = $(el).attr('href');
 199                     el.largeimageloading = true;
 200                     largeimage.loadimage(url);
 201                 }
 202             },
 203             activate: function (e) {
 204                 clearTimeout(el.timer);
 205                 //show lens and zoomWindow
 206                 lens.show();
 207                 stage.show();
 208             },
 209             deactivate: function (e) {
 210                 switch (settings.zoomType) {
 211                 case 'drag':
 212                     //nothing or lens.setcenter();
 213                     break;
 214                 default:
 215                     img.attr('title', el.imagetitle);
 216                     $(el).attr('title', el.title);
 217                     if (settings.alwaysOn) {
 218                         lens.setcenter();
 219                     } else {
 220                         stage.hide();
 221                         lens.hide();
 222                     }
 223                     break;
 224                 }
 225                 el.zoom_active = false;
 226             },
 227             swapimage: function (link) {
 228                 el.largeimageloading = false;
 229                 el.largeimageloaded = false;
 230                 var options = new Object();
 231                 options = $.extend({}, eval("(" + $.trim($(link).attr('rel')) + ")"));
 232                 if (options.smallimage && options.largeimage) {
 233                     var smallimage = options.smallimage;
 234                     var largeimage = options.largeimage;
 235                     $(link).addClass('zoomThumbActive');
 236                     $(el).attr('href', largeimage);
 237                     img.attr('src', smallimage);
 238                     lens.hide();
 239                     stage.hide();
 240                     obj.load();
 241                 } else {
 242                     alert('ERROR :: Missing parameter for largeimage or smallimage.');
 243                     throw 'ERROR :: Missing parameter for largeimage or smallimage.';
 244                 }
 245                 return false;
 246             }
 247         });
 248         //sometimes image is already loaded and onload will not fire
 249         if (img[0].complete) {
 250             //fetching data from sallimage if was previously loaded
 251             smallimage.fetchdata();
 252             if ($(".zoomPad", el).length == 0) obj.create();
 253         }
 254 /*========================================================,
 255 |   Smallimage
 256 |---------------------------------------------------------:
 257 |   Base image into the anchor element
 258 `========================================================*/
 259
 260         function Smallimage(image) {
 261             var $obj = this;
 262             this.node = image[0];
 263             this.findborder = function () {
 264                 var bordertop = 0;
 265                 bordertop = image.css('border-top-width');
 266                 btop = '';
 267                 var borderleft = 0;
 268                 borderleft = image.css('border-left-width');
 269                 bleft = '';
 270                 if (bordertop) {
 271                     for (i = 0; i < 3; i++) {
 272                         var x = [];
 273                         x = bordertop.substr(i, 1);
 274                         if (isNaN(x) == false) {
 275                             btop = btop + '' + bordertop.substr(i, 1);
 276                         } else {
 277                             break;
 278                         }
 279                     }
 280                 }
 281                 if (borderleft) {
 282                     for (i = 0; i < 3; i++) {
 283                         if (!isNaN(borderleft.substr(i, 1))) {
 284                             bleft = bleft + borderleft.substr(i, 1)
 285                         } else {
 286                             break;
 287                         }
 288                     }
 289                 }
 290                 $obj.btop = (btop.length > 0) ? eval(btop) : 0;
 291                 $obj.bleft = (bleft.length > 0) ? eval(bleft) : 0;
 292             };
 293             this.fetchdata = function () {
 294                 $obj.findborder();
 295                 $obj.w = image.width();
 296                 $obj.h = image.height();
 297                 $obj.ow = image.outerWidth();
 298                 $obj.oh = image.outerHeight();
 299                 $obj.pos = image.offset();
 300                 $obj.pos.l = image.offset().left + $obj.bleft;
 301                 $obj.pos.t = image.offset().top + $obj.btop;
 302                 $obj.pos.r = $obj.w + $obj.pos.l;
 303                 $obj.pos.b = $obj.h + $obj.pos.t;
 304                 $obj.rightlimit = image.offset().left + $obj.ow;
 305                 $obj.bottomlimit = image.offset().top + $obj.oh;
 306
 307             };
 308             this.node.onerror = function () {
 309                 alert('Problems while loading image.');
 310                 throw 'Problems while loading image.';
 311             };
 312             this.node.onload = function () {
 313                 $obj.fetchdata();
 314                 if ($(".zoomPad", el).length == 0) obj.create();
 315             };
 316             return $obj;
 317         };
 318 /*========================================================,
 319 |  Loader
 320 |---------------------------------------------------------:
 321 |  Show that the large image is loading
 322 `========================================================*/
 323
 324         function Loader() {
 325             var $obj = this;
 326             this.append = function () {
 327                 this.node = $('<div/>').addClass('zoomPreload').css('visibility', 'hidden').html(settings.preloadText);
 328                 $('.zoomPad', el).append(this.node);
 329             };
 330             this.show = function () {
 331                 this.node.top = (smallimage.oh - this.node.height()) / 2;
 332                 this.node.left = (smallimage.ow - this.node.width()) / 2;
 333                 //setting position
 334                 this.node.css({
 335                     top: this.node.top,
 336                     left: this.node.left,
 337                     position: 'absolute',
 338                     visibility: 'visible'
 339                 });
 340             };
 341             this.hide = function () {
 342                 this.node.css('visibility', 'hidden');
 343             };
 344             return this;
 345         }
 346 /*========================================================,
 347 |   Lens
 348 |---------------------------------------------------------:
 349 |   Lens over the image
 350 `========================================================*/
 351
 352         function Lens() {
 353             var $obj = this;
 354             this.node = $('<div/>').addClass('zoomPup');
 355             //this.nodeimgwrapper = $("<div/>").addClass('zoomPupImgWrapper');
 356             this.append = function () {
 357                 $('.zoomPad', el).append($(this.node).hide());
 358                 if (settings.zoomType == 'reverse') {
 359                     this.image = new Image();
 360                     this.image.src = smallimage.node.src; // fires off async
 361                     $(this.node).empty().append(this.image);
 362                 }
 363             };
 364             this.setdimensions = function () {
 365                 this.node.w = (parseInt((settings.zoomWidth) / el.scale.x) > smallimage.w ) ? smallimage.w : (parseInt(settings.zoomWidth / el.scale.x));
 366                 this.node.h = (parseInt((settings.zoomHeight) / el.scale.y) > smallimage.h ) ? smallimage.h : (parseInt(settings.zoomHeight / el.scale.y));
 367                 this.node.top = (smallimage.oh - this.node.h - 2) / 2;
 368                 this.node.left = (smallimage.ow - this.node.w - 2) / 2;
 369                 //centering lens
 370                 this.node.css({
 371                     top: 0,
 372                     left: 0,
 373                     width: this.node.w + 'px',
 374                     height: this.node.h + 'px',
 375                     position: 'absolute',
 376                     display: 'none',
 377                     borderWidth: 1 + 'px'
 378                 });
 379
 380
 381
 382                 if (settings.zoomType == 'reverse') {
 383                     this.image.src = smallimage.node.src;
 384                     $(this.node).css({
 385                         'opacity': 1
 386                     });
 387
 388                     $(this.image).css({
 389                         position: 'absolute',
 390                         display: 'block',
 391                         left: -(this.node.left + 1 - smallimage.bleft) + 'px',
 392                         top: -(this.node.top + 1 - smallimage.btop) + 'px'
 393                     });
 394
 395                 }
 396             };
 397             this.setcenter = function () {
 398                 //calculating center position
 399                 this.node.top = (smallimage.oh - this.node.h - 2) / 2;
 400                 this.node.left = (smallimage.ow - this.node.w - 2) / 2;
 401                 //centering lens
 402                 this.node.css({
 403                     top: this.node.top,
 404                     left: this.node.left
 405                 });
 406                 if (settings.zoomType == 'reverse') {
 407                     $(this.image).css({
 408                         position: 'absolute',
 409                         display: 'block',
 410                         left: -(this.node.left + 1 - smallimage.bleft) + 'px',
 411                         top: -(this.node.top + 1 - smallimage.btop) + 'px'
 412                     });
 413
 414                 }
 415                 //centering large image
 416                 largeimage.setposition();
 417             };
 418             this.setposition = function (e) {
 419                 el.mousepos.x = e.pageX;
 420                 el.mousepos.y = e.pageY;
 421                 var lensleft = 0;
 422                 var lenstop = 0;
 423
 424                 function overleft(lens) {
 425                     return el.mousepos.x - (lens.w) / 2 < smallimage.pos.l;
 426                 }
 427
 428                 function overright(lens) {
 429                     return el.mousepos.x + (lens.w) / 2 > smallimage.pos.r;
 430
 431                 }
 432
 433                 function overtop(lens) {
 434                     return el.mousepos.y - (lens.h) / 2 < smallimage.pos.t;
 435                 }
 436
 437                 function overbottom(lens) {
 438                     return el.mousepos.y + (lens.h) / 2 > smallimage.pos.b;
 439                 }
 440
 441                 lensleft = el.mousepos.x + smallimage.bleft - smallimage.pos.l - (this.node.w + 2) / 2;
 442                 lenstop = el.mousepos.y + smallimage.btop - smallimage.pos.t - (this.node.h + 2) / 2;
 443                 if (overleft(this.node)) {
 444                     lensleft = smallimage.bleft - 1;
 445                 } else if (overright(this.node)) {
 446                     lensleft = smallimage.w + smallimage.bleft - this.node.w - 1;
 447                 }
 448                 if (overtop(this.node)) {
 449                     lenstop = smallimage.btop - 1;
 450                 } else if (overbottom(this.node)) {
 451                     lenstop = smallimage.h + smallimage.btop - this.node.h - 1;
 452                 }
 453
 454                 this.node.left = lensleft;
 455                 this.node.top = lenstop;
 456                 this.node.css({
 457                     'left': lensleft + 'px',
 458                     'top': lenstop + 'px'
 459                 });
 460                 if (settings.zoomType == 'reverse') {
 461                     if ($.browser.msie && $.browser.version > 7) {
 462                         $(this.node).empty().append(this.image);
 463                     }
 464
 465                     $(this.image).css({
 466                         position: 'absolute',
 467                         display: 'block',
 468                         left: -(this.node.left + 1 - smallimage.bleft) + 'px',
 469                         top: -(this.node.top + 1 - smallimage.btop) + 'px'
 470                     });
 471                 }
 472
 473                 largeimage.setposition();
 474             };
 475             this.hide = function () {
 476                 img.css({
 477                     'opacity': 1
 478                 });
 479                 this.node.hide();
 480             };
 481             this.show = function () {
 482
 483                 if (settings.zoomType != 'innerzoom' && (settings.lens || settings.zoomType == 'drag')) {
 484                     this.node.show();
 485                 }
 486
 487                 if (settings.zoomType == 'reverse') {
 488                     img.css({
 489                         'opacity': settings.imageOpacity
 490                     });
 491                 }
 492             };
 493             this.getoffset = function () {
 494                 var o = {};
 495                 o.left = $obj.node.left;
 496                 o.top = $obj.node.top;
 497                 return o;
 498             };
 499             return this;
 500         };
 501 /*========================================================,
 502 |   Stage
 503 |---------------------------------------------------------:
 504 |   Window area that contains the large image
 505 `========================================================*/
 506
 507         function Stage() {
 508             var $obj = this;
 509             this.node = $("<div class='zoomWindow'><div class='zoomWrapper'><div class='zoomWrapperTitle'></div><div class='zoomWrapperImage'></div></div></div>");
 510             this.ieframe = $('<iframe class="zoomIframe" src="javascript:\'\';" marginwidth="0" marginheight="0" align="bottom" scrolling="no" frameborder="0" ></iframe>');
 511             this.setposition = function () {
 512                 this.node.leftpos = 0;
 513                 this.node.toppos = 0;
 514                 if (settings.zoomType != 'innerzoom') {
 515                     //positioning
 516                     switch (settings.position) {
 517                     case "left":
 518                         this.node.leftpos = (smallimage.pos.l - smallimage.bleft - Math.abs(settings.xOffset) - settings.zoomWidth > 0) ? (0 - settings.zoomWidth - Math.abs(settings.xOffset)) : (smallimage.ow + Math.abs(settings.xOffset));
 519                         this.node.toppos = Math.abs(settings.yOffset);
 520                         break;
 521                     case "top":
 522                         this.node.leftpos = Math.abs(settings.xOffset);
 523                         this.node.toppos = (smallimage.pos.t - smallimage.btop - Math.abs(settings.yOffset) - settings.zoomHeight > 0) ? (0 - settings.zoomHeight - Math.abs(settings.yOffset)) : (smallimage.oh + Math.abs(settings.yOffset));
 524                         break;
 525                     case "bottom":
 526                         this.node.leftpos = Math.abs(settings.xOffset);
 527                         this.node.toppos = (smallimage.pos.t - smallimage.btop + smallimage.oh + Math.abs(settings.yOffset) + settings.zoomHeight < screen.height) ? (smallimage.oh + Math.abs(settings.yOffset)) : (0 - settings.zoomHeight - Math.abs(settings.yOffset));
 528                         break;
 529                     default:
 530                         this.node.leftpos = (smallimage.rightlimit + Math.abs(settings.xOffset) + settings.zoomWidth < screen.width) ? (smallimage.ow + Math.abs(settings.xOffset)) : (0 - settings.zoomWidth - Math.abs(settings.xOffset));
 531                         this.node.toppos = Math.abs(settings.yOffset);
 532                         break;
 533                     }
 534                 }
 535                 this.node.css({
 536                     'left': this.node.leftpos + 'px',
 537                     'top': this.node.toppos + 'px'
 538                 });
 539                 return this;
 540             };
 541             this.append = function () {
 542                 $('.zoomPad', el).append(this.node);
 543                 this.node.css({
 544                     position: 'absolute',
 545                     display: 'none',
 546                     zIndex: 5001
 547                 });
 548                 if (settings.zoomType == 'innerzoom') {
 549                     this.node.css({
 550                         cursor: 'default'
 551                     });
 552                     var thickness = (smallimage.bleft == 0) ? 1 : smallimage.bleft;
 553                     $('.zoomWrapper', this.node).css({
 554                         borderWidth: thickness + 'px'
 555                     });
 556                 }
 557
 558                   $('.zoomWrapper', this.node).css({
 559                       width: Math.round(settings.zoomWidth) + 'px' ,
 560                       borderWidth: thickness + 'px'
 561                   });
 562                   $('.zoomWrapperImage', this.node).css({
 563                       width: '100%',
 564                       height: Math.round(settings.zoomHeight) + 'px'
 565                   });
 566                   //zoom title
 567                  $('.zoomWrapperTitle', this.node).css({
 568                         width: '100%',
 569                         position: 'absolute'
 570                   });
 571
 572                 $('.zoomWrapperTitle', this.node).hide();
 573                 if (settings.title && zoomtitle.length > 0) {
 574                     $('.zoomWrapperTitle', this.node).html(zoomtitle).show();
 575                 }
 576                 $obj.setposition();
 577             };
 578             this.hide = function () {
 579                 switch (settings.hideEffect) {
 580                 case 'fadeout':
 581                     this.node.fadeOut(settings.fadeoutSpeed, function () {});
 582                     break;
 583                 default:
 584                     this.node.hide();
 585                     break;
 586                 }
 587                 this.ieframe.hide();
 588             };
 589             this.show = function () {
 590                 switch (settings.showEffect) {
 591                 case 'fadein':
 592                     this.node.fadeIn();
 593                     this.node.fadeIn(settings.fadeinSpeed, function () {});
 594                     break;
 595                 default:
 596                     this.node.show();
 597                     break;
 598                 }
 599                 if (isIE6 && settings.zoomType != 'innerzoom') {
 600                     this.ieframe.width = this.node.width();
 601                     this.ieframe.height = this.node.height();
 602                     this.ieframe.left = this.node.leftpos;
 603                     this.ieframe.top = this.node.toppos;
 604                     this.ieframe.css({
 605                         display: 'block',
 606                         position: "absolute",
 607                         left: this.ieframe.left,
 608                         top: this.ieframe.top,
 609                         zIndex: 99,
 610                         width: this.ieframe.width + 'px',
 611                         height: this.ieframe.height + 'px'
 612                     });
 613                     $('.zoomPad', el).append(this.ieframe);
 614                     this.ieframe.show();
 615                 };
 616             };
 617         };
 618 /*========================================================,
 619 |   LargeImage
 620 |---------------------------------------------------------:
 621 |   The large detailed image
 622 `========================================================*/
 623
 624         function Largeimage() {
 625             var $obj = this;
 626             this.node = new Image();
 627             this.loadimage = function (url) {
 628                 //showing preload
 629                 loader.show();
 630                 this.url = url;
 631                 this.node.style.position = 'absolute';
 632                 this.node.style.border = '0px';
 633                 this.node.style.display = 'none';
 634                 this.node.style.left = '-5000px';
 635                 this.node.style.top = '0px';
 636                 document.body.appendChild(this.node);
 637                 this.node.src = url; // fires off async
 638             };
 639             this.fetchdata = function () {
 640                 var image = $(this.node);
 641                 var scale = {};
 642                 this.node.style.display = 'block';
 643                 $obj.w = image.width();
 644                 $obj.h = image.height();
 645                 $obj.pos = image.offset();
 646                 $obj.pos.l = image.offset().left;
 647                 $obj.pos.t = image.offset().top;
 648                 $obj.pos.r = $obj.w + $obj.pos.l;
 649                 $obj.pos.b = $obj.h + $obj.pos.t;
 650                 scale.x = ($obj.w / smallimage.w);
 651                 scale.y = ($obj.h / smallimage.h);
 652                 el.scale = scale;
 653                 document.body.removeChild(this.node);
 654                 $('.zoomWrapperImage', el).empty().append(this.node);
 655                 //setting lens dimensions;
 656                 lens.setdimensions();
 657             };
 658             this.node.onerror = function () {
 659                 alert('Problems while loading the big image.');
 660                 throw 'Problems while loading the big image.';
 661             };
 662             this.node.onload = function () {
 663                 //fetching data
 664                 $obj.fetchdata();
 665                 loader.hide();
 666                 el.largeimageloading = false;
 667                 el.largeimageloaded = true;
 668                 if (settings.zoomType == 'drag' || settings.alwaysOn) {
 669                     lens.show();
 670                     stage.show();
 671                     lens.setcenter();
 672                 }
 673             };
 674             this.setposition = function () {
 675                 var left = -el.scale.x * (lens.getoffset().left - smallimage.bleft + 1);
 676                 var top = -el.scale.y * (lens.getoffset().top - smallimage.btop + 1);
 677                 $(this.node).css({
 678                     'left': left + 'px',
 679                     'top': top + 'px'
 680                 });
 681             };
 682             return this;
 683         };
 684         $(el).data("jqzoom", obj);
 685     };
 686     //es. $.jqzoom.disable('#jqzoom1');
 687     $.jqzoom = {
 688         defaults: {
 689             zoomType: 'standard',
 690             //innerzoom/standard/reverse/drag
 691             zoomWidth: 300,
 692             //zoomWindow  default width
 693             zoomHeight: 300,
 694             //zoomWindow  default height
 695             xOffset: 10,
 696             //zoomWindow x offset, can be negative(more on the left) or positive(more on the right)
 697             yOffset: 0,
 698             //zoomWindow y offset, can be negative(more on the left) or positive(more on the right)
 699             position: "right",
 700             //zoomWindow default position
 701             preloadImages: true,
 702             //image preload
 703             preloadText: 'Loading zoom',
 704             title: true,
 705             lens: true,
 706             imageOpacity: 0.4,
 707             alwaysOn: false,
 708             showEffect: 'show',
 709             //show/fadein
 710             hideEffect: 'hide',
 711             //hide/fadeout
 712             fadeinSpeed: 'slow',
 713             //fast/slow/number
 714             fadeoutSpeed: '2000' //fast/slow/number
 715         },
 716         disable: function (el) {
 717             var api = $(el).data('jqzoom');
 718             api.disable();
 719             return false;
 720         },
 721         enable: function (el) {
 722             var api = $(el).data('jqzoom');
 723             api.enable();
 724             return false;
 725         },
 726         disableAll: function (el) {
 727             jqzoompluging_disabled = true;
 728         },
 729         enableAll: function (el) {
 730             jqzoompluging_disabled = false;
 731         }
 732     };
 733 })(jQuery);