xp-dev.com Git - namibia/blob - public/js/vendor/jquery-zoomy-1.0.js

   1 /*
   2  *
   3  * Zoomy v1.0 - for jQuery 1.7.1+
   4  *
   5  * Copyright 2012, James Louis Thompson
   6  * http://codecanyon.net/user/jameslouiz
   7  *
   8  * You need to buy a license to use this script.
   9  * http://codecanyon.net/wiki/buying/howto-buying/licensing/
  10  *
  11  * Date: 20/06/2012
  12  *
  13  */
  14 (function ($) {
  15
  16     //used to fix method calling issues on un-instantiated objects
  17     $.bind = function (object, method) {
  18         var args = Array.prototype.slice.call(arguments, 2);
  19         return function () {
  20             var args2 = [this].concat(args, $.makeArray(arguments));
  21             return method.apply(object, args2);
  22         };
  23     };
  24
  25
  26     var zoomy = function () {};
  27
  28     zoomy.prototype = {
  29         /**
  30          * Initializes zoomify
  31          *
  32          * @param string e The element to turn into a zoomy
  33          * @param obj config An object containing the configuration options for this instance of zoomify
  34          *
  35          */
  36         init: function (e, config) {
  37             this.e = $(e);
  38
  39             var zoomy = this, //reference to object
  40
  41
  42                 //default configuration
  43                 defaults = {
  44                     popoverClassName: 'popover',
  45                     popoverHeight: $(e).find('img').height() * 1.5,
  46                     popoverWidth: $(e).find('img').width() * 1.5,
  47                     popoverPosition: 'right',
  48                     popoverOffsetX: 30,
  49                     popoverOffsetY: 0,
  50                     lensHeight: $(e).find('img').height() / 1.5,
  51                     lensWidth: $(e).find('img').width() / 1.5,
  52                     magnify: 1,
  53                     triggerEvent: 'hover',
  54                     innerZoom: false,
  55                     preload: true,
  56                     showPreloader: true,
  57                     duration: 200
  58                 };
  59
  60             this.dataOptions = this.e.data();
  61
  62             if (config){
  63                 this.settings = $.extend(true, defaults, config);
  64             }
  65             if (typeof this.dataOptions == 'object' && !$.isEmptyObject(this.dataOptions)) {
  66                 this.settings = $.extend(true, this.settings, this.dataOptions);
  67             }
  68
  69             //Setup Vars
  70             this.body = $('html body');
  71             this.popoverHtml = '<div class=' + this.settings.popoverClassName + '><img class=' + this.settings.popoverClassName + '_image' + ' src="" /></div>';
  72             this.sandboxHtml = '<div class=' + this.settings.popoverClassName + '_sandbox' + '></div>';
  73             this.lensHtml = '<div class="lens"></div>';
  74             this.preloaderHtml = '<div class="preloader"></div>';
  75             this.thumb = this.e.find('img');
  76             this.id = Math.floor(Math.random() * 999999999);
  77             this.zoomedImageSource = this.e.data('zoomed-image');
  78             this.useSelf = !this.zoomedImageSource ? true : false;
  79             this.loaded = false;//this.thumb.data('loaded');
  80
  81             // Dimensioanl Vars
  82             this.popoverWidth = this.settings.popoverWidth;// || this.popoverHeight;
  83             this.popoverHeight = this.settings.popoverHeight;// || this.popoverWidth;
  84             this.lensWidth = this.settings.lensWidth;
  85             this.lensHeight = this.settings.lensHeight;
  86
  87             //Inject Elements
  88             this.inject();
  89
  90             //Setup vars of newly injected elements
  91             this.lens = this.e.find('.lens');
  92             this.popover = $('.' + this.settings.popoverClassName);
  93             this.sandbox = $('.' + this.settings.popoverClassName + '_sandbox');
  94             this.preloader = this.e.find('.preloader');
  95
  96             //Add CSS to the elements
  97             this.popover.css({
  98                 overflow: 'hidden',
  99                 display: 'none',
 100                 position: 'absolute',
 101                 'z-index': 9999,
 102                 padding: 0
 103             });
 104
 105             this.e.css({
 106                 position: 'relative',
 107                 cursor: 'crosshair'
 108             });
 109
 110             this.lens.css({
 111                 height: 0,
 112                 width: 0,
 113                 position: 'absolute',
 114                 top: -10000,
 115                 left: -10000,
 116                 overflow: 'hidden',
 117                 'z-index': 9999,
 118                 display: 'block'
 119             });
 120
 121             this.lens.find('img').css({
 122                 position: 'relative'
 123             });
 124
 125             this.sandbox.css({
 126                 height: 1,
 127                 width: 1,
 128                 position: 'absolute',
 129                 top: -5000,
 130                 left: -5000,
 131                 display: 'block',
 132                 overflow: 'hidden'
 133             });
 134
 135             this.sandbox.find('img').css({
 136                 position: 'absolute',
 137                 top: 0,
 138                 left: 0
 139             });
 140
 141             this.preloader.css({
 142                 top: '50%',
 143                 left: '50%',
 144                 'margin-left': -(this.preloader.outerWidth() / 2),
 145                 'margin-top': -(this.preloader.outerHeight() / 2),
 146                 display: 'none',
 147                 padding: 0,
 148                 position: 'absolute'
 149             });
 150
 151
 152             //Makes the zoomed image source unique incase you want multipul instances of the same
 153             //image on the page but with different zoom levels or other options specified.
 154             this.thumb.attr({
 155                 src: this.thumb.attr('src') + '?' + this.id
 156             });
 157
 158             this.e.attr({
 159                 'data-zoomed-image': this.e.attr('data-zoomed-image') + '?' + this.id
 160             });
 161
 162             if (this.useSelf) {
 163                 this.e.attr({'data-zoomed-image': this.thumb.attr('src')});
 164             }
 165
 166             this.zoomedImageSource = this.e.attr('data-zoomed-image');
 167
 168             if (this.thumb.attr('data-status') !== 'error') {
 169                 if (this.settings.preload) {
 170                     this.loadImages();
 171                 } else {
 172                     this.eventBindings();
 173                 }
 174             }
 175         },
 176         // Inject Elements
 177         inject: function ()
 178         {
 179             this.e.append(this.lensHtml);
 180             this.e.append(this.preloaderHtml);
 181             //inject Popover only once
 182             if ($("." + this.settings.popoverClassName).length < 1) {
 183                 this.body.append(this.popoverHtml); //change container back to this.body
 184             }
 185             // inject sandbox only once
 186             if ($('.' + this.settings.popoverClassName + '_sandbox').length < 1) {
 187                 this.body.append(this.sandboxHtml); //change container back to this.body
 188             }
 189         },
 190         /**
 191          *
 192          *  loadImages - loads the zoomed images and appends to sandbox
 193          *
 194          */
 195         loadImages: function ()
 196         {
 197             var self = this,
 198                 element = this.e,
 199                 thumb = this.thumb,
 200                 showPreloader = this.settings.showPreloader,
 201                 preloader = this.preloader,
 202                 zoomedImageSource = this.zoomedImageSource,
 203                 loaded = this.thumb.data('loaded'),
 204                 sandboxZoomedImageSource = this.sandbox.find('img').attr('src'),
 205                 img = new Image();
 206
 207
 208             if (!loaded && zoomedImageSource) {
 209
 210                 if (this.settings.showPreloader) {
 211                     preloader.fadeIn(200);
 212                 }
 213
 214
 215                     $(img).load(function () {
 216                         var thisImg = $(this),
 217                             platform;
 218
 219                         self.injectImages(thisImg);
 220
 221                     }).attr({
 222                         src: zoomedImageSource
 223                     }).error(function () {
 224                         thumb.data('loaded', 'failed');
 225                         // Callbacks for when elements shown
 226                         self.callHook('loadFail');
 227                     });
 228
 229             } else {
 230                 this.grabData();
 231             }
 232
 233         },
 234         /**
 235          *
 236          * FetchImage - Gets the image from the sandbox and puts it in the popover
 237          *
 238          */
 239         grabData: function()
 240         {
 241
 242             var zoomedImageSource = this.zoomedImageSource,
 243                 zoomedImage = this.sandbox.find('img[src="'+zoomedImageSource+'"]'),
 244                 el, source;
 245
 246
 247             this.lens.hide();
 248
 249             if (this.useSelf) {
 250                 source = this.thumb.attr('src');
 251                 el = this.sandbox.find('img[src="'+source+'"]');
 252             } else {
 253                 el = zoomedImage;
 254                 source = zoomedImageSource;
 255             }
 256
 257             if (this.settings.innerZoom) { // appends the large image to lens if the option is true
 258                 if (this.lens.find('img').length < 1) {
 259                     this.lens.append(el.clone());
 260                 }
 261             } else { // else append to popover
 262                 if (zoomedImageSource !== this.popover.find('img').attr('src')) {
 263                     this.popover.html(el.clone());
 264                 }
 265             }
 266
 267
 268             //this.lensSize(this.sandbox.find('img[src="'+source+'"]')); //set size of lens for this thumb
 269
 270             this.showElems();
 271
 272         },
 273         /**
 274          *
 275          * Event Bindings - Bind all the mouse vents to elements
 276          *
 277          */
 278         eventBindings: function ()
 279         {
 280             var self = this,
 281                 elem = this.e,
 282                 popover = this.popover,
 283                 lens = this.lens,
 284                 preloadOnInit = this.settings.preload,
 285                 trigger;
 286
 287             switch (this.settings.triggerEvent) {
 288                 case 'click':
 289                     trigger = 'click';
 290                 break;
 291
 292                 default:
 293                     trigger = 'mouseenter';
 294                 break;
 295             }
 296
 297             elem.on(trigger, function () {
 298
 299                 if (preloadOnInit) {
 300                     self.grabData();
 301                 } else {
 302                     self.loadImages();
 303                 }
 304
 305
 306
 307                 $('body').on('mousemove.zoomy', lens, function (e) {
 308                     self.lensPos(e);
 309                 });
 310
 311             });
 312
 313             elem.on('mouseleave', function () {
 314                 $('body').off('mousemove.zoomy');
 315                 self.hideElems();
 316             });
 317         },
 318         /**
 319          *
 320          * injectImages - Injects imagaes to the relevant container. If not innerzoom - append to snadbox.
 321          *
 322          * @param append - DOM Object you want to append to the lens or popover
 323          *
 324          */
 325         injectImages: function(append)
 326         {
 327
 328             var loaded = this.thumb.data('loaded'),
 329                 platform, freshImage;
 330
 331             if (this.settings.innerZoom) {
 332                 platform = this.lens;
 333             } else {
 334                 platform = this.sandbox;
 335             }
 336
 337             if (this.zoomedImageSource != platform.find('img').attr('src')) {
 338                 append.css({position:'absolute'});
 339                 platform.append(append);
 340             }
 341
 342             this.magnify(append);
 343
 344             if (this.settings.preload && !loaded) {
 345                 this.eventBindings(); //if the zoomed image loads, bind the events to this
 346             } else {
 347                 this.grabData(append);
 348             }
 349
 350             this.preloader.fadeOut(200);
 351
 352             this.thumb.data('loaded', true);
 353
 354         },
 355         /**
 356          *
 357          * Lens Size - Sets the size of the lens
 358          *
 359          * @param zoomedImage - DOM Object of the large image you need to calcaulate lens with
 360          *
 361          */
 362         lensSize: function (zoomedImage) {
 363
 364
 365             var popover = this.popver,
 366                 lens = this.lens,
 367                 thumb = this.thumb,
 368                 popoverHeight = this.popoverHeight,
 369                 popoverWidth = this.popoverWidth,
 370                 thumbHeight = thumb.height(),
 371                 thumbWidth = thumb.width(),
 372                 lensHeight, lensWidth, lensHeight1, lensWidth1, ex, ey;
 373
 374
 375             if (this.settings.innerZoom) {
 376                 lensHeight = this.lensHeight;
 377                 lensWidth = this.lensWidth;
 378             } else {
 379                 //lensHeight1 = (popoverHeight / (zoomedImage.height() / thumbHeight)) ;
 380                 //lensWidth1 = (popoverWidth / (zoomedImage.width() / thumbWidth)) ;
 381
 382                 //ey = thumbHeight / lensHeight1;
 383                 //ex = thumbWidth / lensWidth1;
 384
 385                 //console.log(ey);
 386
 387                 //lensHeight = thumbHeight / ( (zoomedImage.height()+ey) / popoverHeight); //lensHeight + (lensHeight / 100 * 3.5);
 388                 //lensWidth = thumbWidth / ( (zoomedImage.width()+ex) / popoverWidth) ; //lensWidth + (lensWidth / 100 * 3.5);
 389
 390                 lensHeight = popoverHeight / (zoomedImage.height() / thumbHeight);
 391                 lensWidth = popoverWidth / (zoomedImage.width() / thumbWidth);
 392             }
 393
 394
 395
 396             //console.log(lensHeight);
 397
 398             lensDims = {
 399                 height: lensHeight + 0,
 400                 width: lensWidth + 0
 401             };
 402
 403             lens.css(lensDims);
 404         },
 405         /**
 406          *
 407          * Lens Position - Sets the position of lens on mouse move
 408          *
 409          * @param e - event
 410          *
 411          */
 412         lensPos: function (e)
 413         {
 414             var self = this,
 415                 lens = this.lens,
 416                 thumb = this.thumb,
 417                 thumbLeft = thumb.offset().left,
 418                 thumbTop = thumb.offset().top,
 419                 mouseY = e.pageY,
 420                 mouseX = e.pageX,
 421                 lensWidth = lens.outerWidth(),
 422                 lensHeight = lens.outerHeight(),
 423                 lensLeft = 0,
 424                 lensTop = 0;
 425
 426
 427             lensTop = mouseY - lensHeight / 2;
 428             lensLeft = mouseX - lensWidth / 2;
 429
 430
 431             function limitLeft() {
 432                 return mouseX - (lensWidth) / 2 < thumbLeft;
 433             }
 434
 435             function limitRight() {
 436                 return mouseX + (lensWidth) / 2 > (thumbLeft + thumb.width());
 437             }
 438
 439             function limitTop() {
 440                 return mouseY - (lensHeight) / 2 < thumbTop;
 441             }
 442
 443             function limitBottom() {
 444                 return mouseY + (lensHeight) / 2 > (thumbTop + thumb.height());
 445             }
 446
 447
 448             if (limitLeft(lens)) {
 449                 lensLeft = thumbLeft;
 450             } else if (limitRight(lens)) {
 451                 lensLeft = thumbLeft + thumb.width() - lensWidth;
 452             }
 453             if (limitTop(lens)) {
 454                 lensTop = thumbTop
 455             } else if (limitBottom(lens)) {
 456                 lensTop = thumbTop + thumb.height() - lensHeight;
 457             }
 458
 459
 460             lens.offset({
 461                 top: lensTop,
 462                 left: lensLeft
 463             });
 464
 465             self.zoomedPosition();
 466
 467         },
 468         /**
 469          *
 470          * Popover Position - Sets the position of popover on mouse move
 471          *
 472          */
 473         popoverPos: function ()
 474         {
 475
 476             if (!this.settings.innerZoom){
 477                 var self = this,
 478                     lens = this.lens,
 479                     element = this.thumb,
 480                     popover = this.popover;
 481
 482
 483                 var popoverTop, popoverLeft;
 484
 485                 switch (this.settings.popoverPosition) {
 486                 case 'right':
 487                     popoverTop = element.offset().top + this.settings.popoverOffsetY;
 488                     popoverLeft = element.offset().left + element.outerWidth() + this.settings.popoverOffsetX;
 489                     break;
 490
 491                 case 'top':
 492                     popoverTop = element.offset().top - this.popoverHeight - this.settings.popoverOffsetY;
 493                     popoverLeft = element.offset().left + this.settings.popoverOffsetX;
 494                     break;
 495
 496                 case 'bottom':
 497                     popoverTop = element.offset().top + element.outerHeight() + this.settings.popoverOffsetY ;
 498                     popoverLeft = element.offset().left + this.settings.popoverOffsetX;
 499                     break;
 500
 501                 case 'left': // defaults fixed left
 502                     popoverTop = element.offset().top + this.settings.popoverOffsetY;
 503                     popoverLeft = element.offset().left - this.popoverWidth - this.settings.popoverOffsetX;
 504                     break;
 505                 }
 506
 507                 popover.show();
 508
 509                 popover.css({
 510                     height: this.popoverHeight,
 511                     width: this.popoverWidth
 512                 });
 513
 514                 popoverPos = {
 515                     top: popoverTop,
 516                     left: popoverLeft
 517                 };
 518
 519                 popover.offset(popoverPos);
 520
 521                 popover.hide();
 522             }
 523
 524         },
 525         /**
 526          *
 527          * Sets the position of the zoomed image in the popover in relation to the lens
 528          *
 529          */
 530         zoomedPosition: function ()
 531         {
 532
 533             var el = this.settings.innerZoom ? this.lens.find('img') : this.popover.find('img'),
 534                 thumb = this.thumb,
 535                 lens = this.lens,
 536                 borderTop = (lens.css('border-top-width') > 0) ? parseFloat(lens.css('border-top-width')) : 0,
 537                 borderLeft = (lens.css('border-left-width') > 0) ? parseFloat(lens.css('border-left-width')) : 0,
 538                 lensHeight = lens.outerHeight(),
 539                 lensWidth = lens.outerWidth(),
 540                 thumbHeight = thumb.height(),
 541                 thumbWidth = thumb.width(),
 542                 largeImgHeight = el.height(),
 543                 largeImgWidth = el.width(),
 544                 refYY = (thumb.offset().top) - (lens.offset().top + borderTop),
 545                 refXX = (thumb.offset().left) - (lens.offset().left + borderLeft);
 546
 547
 548             if (this.settings.innerZoom) {
 549                 hr = (largeImgHeight - lensHeight) / (thumbHeight - lensHeight);
 550                 wr = (largeImgWidth - lensWidth) / (thumbWidth - lensWidth);
 551             } else {
 552                 hr = largeImgHeight / thumbHeight;
 553                 wr = largeImgWidth / thumbWidth;
 554             }
 555
 556
 557             el.css({
 558                 top: (refYY) * hr,//0(thumbHeight / lensHeight),
 559                 left: (refXX) * wr  //(thumbWidth / lensWidth)
 560             });
 561
 562         },
 563         /**
 564          *
 565          * maginify - Magnifies the large image
 566          *
 567          * @param img DOM Object - The image you want to magnify
 568          *
 569          */
 570         magnify: function(img)
 571         {
 572             var imgHeight = img.height(),
 573                 imgWidth = img.width(),
 574                 magnify = this.settings.magnify;
 575
 576
 577             //if (img.height != imgHeight * this.settings.magnify) {
 578                 img.css({
 579                     height: imgHeight * magnify,
 580                     width:  imgWidth * magnify
 581                 });
 582             //}
 583
 584             this.lensSize(img);
 585         },
 586         /**
 587          *
 588          * showElems - Shows the popover and lens when required. Popover doesnt show if innerZoom is enabled
 589          *
 590          */
 591         showElems: function()
 592         {
 593
 594
 595             if (!this.settings.innerZoom) {
 596                // if ( this.popover.is(':hidden') || (this.popover.is(':visible') && popover.is(':animated')) ) {
 597                 this.popoverPos();
 598                 this.popover.stop().fadeTo(this.settings.duration, 1);
 599                // }
 600             }
 601
 602             // if ( this.lens.is(':hidden') || this.lens.css('opacity') < 1 || (this.lens.is(':visible') && this.lens.is(':animated')) ) {
 603                 this.lens.stop(true, true).fadeTo(this.settings.duration, 1);
 604             //}
 605
 606         },
 607         /**
 608          *
 609          * hideElems - Hides the popover and lens when required.
 610          *
 611          */
 612         hideElems: function()
 613         {
 614
 615             if ( this.popover.is(':visible') || (this.popover.is(':hidden') && this.popover.is(':animated')) ) {
 616                 this.popover.stop().fadeOut(this.settings.duration);
 617             }
 618
 619             if ( this.lens.is(':visible') || (this.lens.is(':hidden') && this.lens.is(':animated')) ) {
 620                 this.lens.stop().fadeOut(this.settings.duration);
 621             }
 622
 623         }
 624     },
 625
 626
 627  //jQuery function to access / instantiate zoomify
 628     $.fn.zoomy = function (config) {
 629
 630         var el = this,
 631             $el = $(this),
 632             msie = (!document.documentMode || document.documentMode < 9) && window.attachEvent && !window.addEventListener; // IE < 9
 633
 634         function runIt()
 635         {
 636             //if nothing is passed to the function and this IS a Zoomy, return instance of Zoomy
 637             if (!config && el[0].zoomy) {
 638                 return $el.get(0).zoomy;
 639             }
 640             //otherwise instantiate Zoomy
 641             else {
 642                 return el.each(function () {
 643
 644                     if (!this.zoomy) {
 645                         this.zoomy = new zoomy();
 646                         this.zoomy.init(this, config);
 647                     } else {
 648                         $(this).get(0).zoomy;
 649                     }
 650
 651                 });
 652             }
 653         }
 654
 655
 656         if (!msie){
 657
 658             var elems = el.find('img'),
 659                 len = elems.length,
 660                 blank = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==",
 661                 error = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
 662
 663             elems.bind('load.imgloaded',function(){
 664                 if ((--len <= 0 && this.src !== blank) || this.src == error){
 665                     elems.unbind('load.imgloaded');
 666                     runIt();
 667                 }
 668             }).each(function(){
 669                 var curSrc = $(this).attr('src');
 670                 // cached images don't fire load sometimes, so we reset src.
 671                 if (this.complete || this.complete === undefined){
 672                     var src = this.src;
 673                     this.src = blank;
 674                     this.src = src;
 675                 }
 676
 677                 $(this).error(function()
 678                 {
 679                     $(this).attr('data-status', 'error');
 680                     this.src = error;
 681                 }).attr({
 682                     src: this.src
 683                 });
 684
 685
 686             });
 687         } else {
 688             runIt();
 689         }
 690
 691
 692     };
 693
 694
 695 })(jQuery);