home *** CD-ROM | disk | FTP | other *** search
/ ftp.americansys.com / 2014.06.ftp.americansys.com.tar / ftp.americansys.com / plott / Practice.exe / 1033 / JS / JQUERY.ZOOM.JS < prev   
Text File  |  2013-06-22  |  4KB  |  184 lines
  1. // Zoom 1.4 - jQuery image zooming plugin
  2. // (c) 2012 Jack Moore - jacklmoore.com
  3. // license: www.opensource.org/licenses/mit-license.php
  4.  
  5. (function ($) {
  6.     var defaults = {
  7.         url: false,
  8.         icon: true,
  9.         callback: false,
  10.         target: false,
  11.         duration: 120,
  12.         on: 'mouseover' // other options: 'grab' or 'click'
  13.     };
  14.  
  15.     $.fn.zoom = function (options) {
  16.         return this.each(function () {
  17.             var
  18.             settings = $.extend({}, defaults, options || {}),
  19.             //target will display the zoomed iamge
  20.             target = settings.target || this,
  21.             $target = $(target),
  22.             //source will provide zoom location info (thumbnail)
  23.             source = this,
  24.             $source = $(source),
  25.             img = new Image(),
  26.             $img = $(img),
  27.             $icon,
  28.             position = $target.css('position'),
  29.             mousemove = 'mousemove',
  30.             clicked = false;
  31.  
  32.             // The parent element needs positioning so that the zoomed element can be correctly positioned within.
  33.             $target.css({
  34.                 position: /(absolute|fixed)/.test(position) ? position : 'relative',
  35.                 overflow: 'hidden'
  36.             });
  37.  
  38.             // If a url wasn't specified, look for an image element.
  39.             if (!settings.url) {
  40.                 settings.url = $source.find('img').attr('src');
  41.                 if (!settings.url) {
  42.                     return;
  43.                 }
  44.             }
  45.  
  46.             if (settings.icon) {
  47.                 $icon = $('<div class="zoomIcon"/>').appendTo($source);
  48.             }
  49.  
  50.             img.onload = function () {
  51.                 var
  52.                 outerWidth,
  53.                 outerHeight,
  54.                 xRatio,
  55.                 yRatio,
  56.                 left,
  57.                 top,
  58.                 offset = $source.offset();
  59.  
  60.                 function ratio() {
  61.                     outerWidth = $target.outerWidth();
  62.                     outerHeight = $target.outerHeight();
  63.                     xRatio = (img.width - outerWidth) / $source.outerWidth();
  64.                     yRatio = (img.height - outerHeight) / $source.outerHeight();
  65.                 }
  66.  
  67.                 function move(e) {
  68.                     left = (e.pageX - offset.left);
  69.                     top = (e.pageY - offset.top);
  70.  
  71.                     if (left > outerWidth) {
  72.                         left = outerWidth;
  73.                     } else if (left < 0) {
  74.                         left = 0;
  75.                     }
  76.  
  77.                     if (top > outerHeight) {
  78.                         top = outerHeight;
  79.                     } else if (top < 0) {
  80.                         top = 0;
  81.                     }
  82.  
  83.                     img.style.left = (left * -xRatio) + 'px';
  84.                     img.style.top = (top * -yRatio) + 'px';
  85.  
  86.                     e.preventDefault();
  87.                 }
  88.  
  89.                 function start(e) {
  90.                     offset = $source.offset();
  91.                     ratio();
  92.                     move(e);
  93.  
  94.                     // Skip the fade-in for IE8 and lower since it chokes on fading-in
  95.                     // and changing position based on mousemovement at the same time.
  96.                     $img.stop()
  97.                     .fadeTo($.support.opacity ? settings.duration : 0, 1);
  98.                 }
  99.  
  100.                 function stop() {
  101.                     $img.stop()
  102.                     .fadeTo(settings.duration, 0);
  103.                 }
  104.  
  105.                 $img
  106.                 .addClass('zoomImg')
  107.                 .css({
  108.                     position: 'absolute',
  109.                     top: 0,
  110.                     left: 0,
  111.                     opacity: 0,
  112.                     width: img.width,
  113.                     height: img.height,
  114.                     border: 'none',
  115.                     maxWidth: 'none'
  116.                 })
  117.                 .appendTo($target);
  118.  
  119.                 if (settings.on === 'grab') {
  120.                     $source.mousedown(
  121.                         function (e) {
  122.                             offset = $source.offset();
  123.  
  124.                             $(document).one('mouseup',
  125.                                 function () {
  126.                                     stop();
  127.  
  128.                                     $(document).unbind(mousemove, move);
  129.                                 }
  130.                             );
  131.  
  132.                             start(e);
  133.  
  134.                             $(document)[mousemove](move);
  135.  
  136.                             e.preventDefault();
  137.                         }
  138.                     );
  139.                 } else if (settings.on === 'click') {
  140.                     $source.click(
  141.                         function (e) {
  142.                             if (clicked) {
  143.                                 // bubble the event up to the document to trigger the unbind.
  144.                                 return;
  145.                             } else {
  146.                                 clicked = true;
  147.  
  148.                                 start(e);
  149.  
  150.                                 $(document)[mousemove](move);
  151.  
  152.                                 $(document).one('click',
  153.                                     function () {
  154.                                         stop();
  155.                                         clicked = false;
  156.                                         $(document).unbind(mousemove, move);
  157.                                     }
  158.                                 );
  159.  
  160.                                 return false;
  161.                             }
  162.                         }
  163.                     );
  164.                 } else {
  165.                     ratio(); // Pre-emptively call ratio because IE7 will fire the mousemove callback before the hover callback.
  166.  
  167.                     $source.hover(
  168.                         start,
  169.                         stop
  170.                     )[mousemove](move);
  171.                 }
  172.  
  173.                 if ($.isFunction(settings.callback)) {
  174.                     settings.callback.call(img);
  175.                 }
  176.  
  177.             };
  178.  
  179.             img.src = settings.url;
  180.         });
  181.     };
  182.  
  183.     $.fn.zoom.defaults = defaults;
  184. }(window.jQuery));