https://www.notanotherbabyshop.com.au/skins/Nautical/js/vendor/jquery.magnify.js?v=1788596007

1/*!
2 * jQuery Magnify Plugin v1.3.1 by Tom Doan (http://thdoan.github.io/magnify/)
3 * Based on http://thecodeplayer.com/walkthrough/magnifying-glass-for-images-using-jquery-and-css3
4 *
5 * jQuery Magnify by Tom Doan is licensed under the MIT License.
6 * Read a copy of the license in the LICENSE file or at
7 * http://choosealicense.com/licenses/mit
8 */
9
10(function($) {
11  $.fn.magnify = function(oOptions) {
12
13    var oSettings = $.extend({
14        /* Default options */
15        debug: false,
16        speed: 100,
17        onload: function(){}
18      }, oOptions),
19      $anchor,
20      $container,
21      $image,
22      $lens,
23      nMagnifiedWidth = 0,
24      nMagnifiedHeight = 0,
25      init = function(el) {
26        // Initiate
27        $image = $(el);
28        $anchor = $image.parents('a');
29        // Activate magnification!
30        // Try to get zoom image dimensions
31        // Proceed only if able to get zoom image dimensions OK
32        zoom($image.attr('data-magnify-src') || oSettings.src || $anchor.attr('href') || '');
33      },
34      zoom = function(sImgSrc, bAnchor) {
35        // Disable zooming if no valid zoom image source
36        if (!sImgSrc) return;
37        // Calculate the native (magnified) image dimensions. The zoomed version
38        // is only shown after the native dimensions are available. To get the
39        // actual dimensions we have to create this image object.
40        var elImage = new Image();
41        $(elImage).on({
42          load: function() {
43            // Got image dimensions OK
44
45            // Fix overlap bug at the edges during magnification
46            $image.css('display', 'block');
47
48            // Create container div if necessary
49            if (!$image.parent('.magnify').length) {
50              $image.wrap('<div class="magnify"></div>');
51            }
52            $container = $image.parent('.magnify');
53            // Create the magnifying lens div if necessary
54            if ($image.prev('.magnify-lens').length) {
55              $container.children('.magnify-lens').css('background-image', 'url(' + sImgSrc + ')');
56            } else {
57              $image.before('<div class="magnify-lens loading" style="background:url(' + sImgSrc + ') no-repeat 0 0"></div>');
58            }
59            $lens = $container.children('.magnify-lens');
60
61            // Remove the "Loading..." text.
62            $lens.removeClass('loading');
63            // This code is inside the .load() function, which is important.
64            // The width and height of the object would return 0 if accessed
65            // before the image is fully loaded.
66            nMagnifiedWidth = elImage.width;
67            nMagnifiedHeight = elImage.height;
68            if (oSettings.debug) console.log('[MAGNIFY] Got zoom image dimensions OK (width x height): ' + nMagnifiedWidth + ' x ' + nMagnifiedHeight);
69            // Clean up
70            elImage = null;
71            // Callback
72            oSettings.onload();
73            // Handle mouse movements
74            $container.mousemove(function(e) {
75              // x/y coordinates of the mouse pointer
76              // This is the position of .magnify relative to the document.
77              var oMagnifyOffset = $container.offset(),
78                /* We deduct the positions of .magnify from the mouse positions
79                   relative to the document to get the mouse positions relative to
80                   the container (.magnify). */
81                nX = e.pageX - oMagnifyOffset.left;
82                nY = e.pageY - oMagnifyOffset.top;
83              // Fade out the lens if the mouse pointer is outside the container.
84              if (nX<$container.width() && nY<$container.height() && nX>0 && nY>0) {
85                $lens.fadeIn(oSettings.speed);
86              } else {
87                $lens.fadeOut(oSettings.speed);
88              }
89              if ($lens.is(':visible')) {
90                /* Move the magnifying lens with the mouse */
91                var nPosX = nX - $lens.width()/2,
92                  nPosY = nY - $lens.height()/2;
93                if (nMagnifiedWidth && nMagnifiedHeight) {
94                  // Change the background position of .magnify-lens according to
95                  // the position of the mouse over the .magnify-image image. This
96                  // allows us to get the ratio of the pixel under the mouse pointer
97                  // with respect to the image and use that to position the large
98                  // image inside the magnifying lens.
99                  var nRatioX = Math.round(nX/$image.width()*nMagnifiedWidth - $lens.width()/2)*-1,
100                    nRatioY = Math.round(nY/$image.height()*nMagnifiedHeight - $lens.height()/2)*-1,
101                    sBgPos = nRatioX + 'px ' + nRatioY + 'px';
102                }
103                // Now the lens moves with the mouse. The logic is to deduct half
104                // of the lens's width and height from the mouse 

104coordinates to
105                // place it with its center at the mouse coordinates. If you hover
106                // on the image now, you should see the magnifying lens in action.
107                //
108                // DEBUG:
109                //console.log('$image.width(): ' + $image.width() + ', nMagnifiedWidth: ' + nMagnifiedWidth + ', $lens.width(): ' + $lens.width() + ', nX: ' + nX + ', sBgPos: ' + sBgPos);
110                $lens.css({
111                  top: Math.round(nPosY) + 'px',
112                  left: Math.round(nPosX) + 'px',
113                  backgroundPosition: sBgPos || ''
114                });
115              }
116            });
117
118            if ($anchor.length) {
119              // Make parent anchor inline-block to have correct dimensions
120              $anchor.css('display', 'inline-block');
121              // Disable parent anchor if it's sourcing the large image
122              if (bAnchor || ($anchor.attr('href') && !($image.attr('data-magnify-src') || oSettings.src))) {
123                $anchor.click(function(e) {
124                  e.preventDefault();
125                });
126              }
127            }
128
129          },
130          error: function() {
131            // Clean up
132            elImage = null;
133            if (bAnchor) {
134              if (oSettings.debug) console.log('[MAGNIFY] Parent anchor zoom source is invalid also. Disabling zoom...');
135            } else {
136              if (oSettings.debug) console.log('[MAGNIFY] Invalid data-magnify-src. Looking in parent anchor instead -> ' + $anchor.attr('href'));
137              zoom($anchor.attr('href'), true);
138            }
139          }
140        });
141
142        elImage.src = sImgSrc;
143      };
144
145    return this.each(function() {
146      /* Initiate magnification powers */
147      init(this);
148    });
149
150  };
151}(jQuery));