https://humboldtmuseum.ca/wp-content/themes/humboldtmuseum/js/image-zoom.js

1"use strict";
2
3/*!
4jQuery Plugin developed by Mario Duarte
5https://github.com/Mario-Duarte/image-zoom-plugin/
6Simple jQuery plugin that converts an image into a click to zoom image
7perfect for store products and galleries
8*/
9(function ($) {
10  // Thanks to Mozilla for this polyfill
11  // find out more on - https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/replaceWith
12  function ReplaceWithPolyfill() {
13    'use-strict'; // For safari, and IE > 10
14
15    var parent = this.parentNode,
16        i = arguments.length,
17        currentNode;
18    if (!parent) return;
19    if (!i) // if there are no arguments
20      parent.removeChild(this);
21
22    while (i--) {
23      // i-- decrements i and returns the value of i before the decrement
24      currentNode = arguments[i];
25
26      if (typeof currentNode !== 'object') {
27        currentNode = this.ownerDocument.createTextNode(currentNode);
28      } else if (currentNode.parentNode) {
29        currentNode.parentNode.removeChild(currentNode);
30      } // the value of "i" below is after the decrement
31
32
33      if (!i) // if currentNode is the first argument (currentNode === arguments[0])
34        parent.replaceChild(currentNode, this);else // if currentNode isn't the first
35        parent.insertBefore(currentNode, this.previousSibling);
36    }
37  }
38
39  if (!Element.prototype.replaceWith) {
40    Element.prototype.replaceWith = ReplaceWithPolyfill;
41  }
42
43  if (!CharacterData.prototype.replaceWith) {
44    CharacterData.prototype.replaceWith = ReplaceWithPolyfill;
45  }
46
47  if (!DocumentType.prototype.replaceWith) {
48    DocumentType.prototype.replaceWith = ReplaceWithPolyfill;
49  }
50
51  const imageObj = {};
52
53  $.fn.imageZoom = function (options) {
54    // Default settings for the zoom level
55    let settings = $.extend({
56      zoom: 150
57    }, options); // Main html template for the zoom in plugin
58
59    imageObj.template = `
60			<figure class="containerZoom" style="background-image:url('${this.attr('src')}'); background-size: ${settings.zoom}%;">
61				<img id="imageZoom" src="${this.attr('src')}" alt="${this.attr('alt')}" />
62			</figure>
63		`; // Where all the magic happens, This will detect the position of your mouse
64    // in relation to the image and pan the zoomed in background image in the
65    // same direction
66
67    function zoomIn(e) {
68      let zoomer = e.currentTarget;
69      let x, y, offsetX, offsetY;
70      e.offsetX ? offsetX = e.offsetX : offsetX = e.touches[0].pageX;
71      e.offsetY ? offsetY = e.offsetY : offsetY = e.touches[0].pageX;
72      x = offsetX / zoomer.offsetWidth * 100;
73      y = offsetY / zoomer.offsetHeight * 100;
74      $(zoomer).css({
75        "background-position": `${x}% ${y}%`
76      });
77    } // Main function to attach all events after replacing the image tag with
78    // the main template code
79
80
81    function attachEvents(container) {
82      container = $(container);
83      container.on('click', function (e) {
84        if ("zoom" in imageObj == false) {
85          // zoom is not defined, let define it and set it to false
86          imageObj.zoom = false;
87        }
88
89        if (imageObj.zoom) {
90          imageObj.zoom = false;
91          $(this).removeClass('active');
92        } else {
93          imageObj.zoom = true;
94          $(this).addClass('active');
95          zoomIn(e);
96        }
97      });
98      container.on('mousemove', function (e) {
99        imageObj.zoom ? zoomIn(e) : null;
100      });
101      container.on('mouseleave', function () {
102        imageObj.zoom = false;
103        $(this).removeClass('active');
104      });
105    }
106
107    let newElm = $(this).replaceWith(imageObj.template);
108    attachEvents($('.containerZoom')[$('.containerZoom').length - 1]); // return updated element to allow for jQuery chained events
109
110    return newElm;
111  };
112})(jQuery);