function update(masterID) {
   const zoom = document.getElementById(masterID + 'Zoom');
   const img = document.getElementById(masterID + 'Image');
   const lens = document.getElementById(masterID + 'Lens');
   const imagePosition = img.getBoundingClientRect();
   lens.style.zIndex = '8';

   let cx = (zoom.offsetWidth - (ZOOM_BORDER_SIZE * 2)) / (lens.offsetWidth - (LENS_BORDER_SIZE * 2));
   let cy = (zoom.offsetHeight - (ZOOM_BORDER_SIZE * 2)) / (lens.offsetHeight - (LENS_BORDER_SIZE * 2));

   updateLens();
   updateZoom();

   posZoomY = lens.getBoundingClientRect().y - imagePosition.y + LENS_BORDER_SIZE;
   posZoomX = lens.getBoundingClientRect().x - imagePosition.x + LENS_BORDER_SIZE;

   // Update the zoom itself
   zoom.style.backgroundSize = (imagePosition.width * cx) + "px " + (imagePosition.height * cy) + "px";
   zoom.style.backgroundPosition = `-${posZoomX * cx}px -${posZoomY * cy}px`;

   /**
    * Update the position of the lens so it cannot move outside the picture
    */
   function updateLens() {
      // Stop the lens resize to go outside picture (top)
      if(lens.getBoundingClientRect().top < imagePosition.top) {
         lens.style.top = 0 + 'px';
      }
      // Stop the lens resize to go outside picture (bottom)
      if(lens.getBoundingClientRect().bottom > imagePosition.bottom) {
         lens.style.top = imagePosition.height - lens.getBoundingClientRect().height + 'px';
      }

      // Stop the lens resize to go outside picture (right)
      if(lens.getBoundingClientRect().right > imagePosition.right) {
         lens.style.left = imagePosition.width - lens.getBoundingClientRect().width + 'px';
      }
      // Stop the lens resize to go outside picture (right)
      if(lens.getBoundingClientRect().left < imagePosition.left) {
         lens.style.left = 0 + 'px';
      }
   }

   /**
    * Update the position of the zoom so it cannot move outside the window
    */
   function updateZoom() {
      // Stop the zoom resize to go outside picture (top)
      if(zoom.getBoundingClientRect().top < 0) {
         zoom.style.top = -imagePosition.top + 'px';
      }
      // Stop the zoom resize to go outside picture (bottom)
      if(zoom.getBoundingClientRect().bottom > window.innerHeight) {
         zoom.style.top = window.innerHeight - imagePosition.top - zoom.getBoundingClientRect().height +  'px';
      }

      // Stop the zoom resize to go outside picture (right)
      if(zoom.getBoundingClientRect().right > window.innerWidth) {
         zoom.style.left = window.innerWidth - zoom.getBoundingClientRect().width - imagePosition.left + 'px';
      }
      // Stop the zoom resize to go outside picture (left)
      if(zoom.getBoundingClientRect().left < 0) {
         zoom.style.left = -imagePosition.left + 'px';
      }
   }
}
/**
 * This function update he positions of the elements and the zoom
 *
 * @param masterID -- The ID of the main element
 */
This function update he positions of the elements and the zoom
@param masterID -- The ID of the main element
This function update he positions of the elements and the zoom @param masterID -- The ID of the main element
function update(masterID) {
   const zoom = document.getElementById(masterID + 'Zoom');
   const img = document.getElementById(masterID + 'Image');
   const lens = document.getElementById(masterID + 'Lens');
   const imagePosition = img.getBoundingClientRect();
   lens.style.zIndex = '8';
   let cx = (zoom.offsetWidth - (ZOOM_BORDER_SIZE * 2)) / (lens.offsetWidth - (LENS_BORDER_SIZE * 2));
   let cy = (zoom.offsetHeight - (ZOOM_BORDER_SIZE * 2)) / (lens.offsetHeight - (LENS_BORDER_SIZE * 2));
   updateLens();
   updateZoom();
   posZoomY = lens.getBoundingClientRect().y - imagePosition.y + LENS_BORDER_SIZE;
   posZoomX = lens.getBoundingClientRect().x - imagePosition.x + LENS_BORDER_SIZE;
   zoom.style.backgroundSize = (imagePosition.width * cx) + "px " + (imagePosition.height * cy) + "px";
   zoom.style.backgroundPosition = `-${posZoomX * cx}px -${posZoomY * cy}px`;
   function updateLens() {
      if(lens.getBoundingClientRect().top < imagePosition.top) {
         lens.style.top = 0 + 'px';
      }
      if(lens.getBoundingClientRect().bottom > imagePosition.bottom) {
         lens.style.top = imagePosition.height - lens.getBoundingClientRect().height + 'px';
      }
      if(lens.getBoundingClientRect().right > imagePosition.right) {
         lens.style.left = imagePosition.width - lens.getBoundingClientRect().width + 'px';
      }
      if(lens.getBoundingClientRect().left < imagePosition.left) {
         lens.style.left = 0 + 'px';
      }
   }
   function updateZoom() {
      if(zoom.getBoundingClientRect().top < 0) {
         zoom.style.top = -imagePosition.top + 'px';
      }
      if(zoom.getBoundingClientRect().bottom > window.innerHeight) {
         zoom.style.top = window.innerHeight - imagePosition.top - zoom.getBoundingClientRect().height +  'px';
      }
      if(zoom.getBoundingClientRect().right > window.innerWidth) {
         zoom.style.left = window.innerWidth - zoom.getBoundingClientRect().width - imagePosition.left + 'px';
      }
      if(zoom.getBoundingClientRect().left < 0) {
         zoom.style.left = -imagePosition.left + 'px';
      }
   }
}
function update ( masterID ) { const zoom = document . getElementById ( masterID + 'Zoom' ) ; const img = document . getElementById ( masterID + 'Image' ) ; const lens = document . getElementById ( masterID + 'Lens' ) ; const imagePosition = img . getBoundingClientRect ( ) ; lens . style . zIndex = '8' ; let cx = ( zoom . offsetWidth - ( ZOOM_BORDER_SIZE * 2 ) ) / ( lens . offsetWidth - ( LENS_BORDER_SIZE * 2 ) ) ; let cy = ( zoom . offsetHeight - ( ZOOM_BORDER_SIZE * 2 ) ) / ( lens . offsetHeight - ( LENS_BORDER_SIZE * 2 ) ) ; updateLens ( ) ; updateZoom ( ) ; posZoomY = lens . getBoundingClientRect ( ) . y - imagePosition . y + LENS_BORDER_SIZE ; posZoomX = lens . getBoundingClientRect ( ) . x - imagePosition . x + LENS_BORDER_SIZE ; zoom . style . backgroundSize = ( imagePosition . width * cx ) + "px " + ( imagePosition . height * cy ) + "px" ; zoom . style . backgroundPosition = ` ${ posZoomX * cx } ${ posZoomY * cy } ` ; function updateLens ( ) { if ( lens . getBoundingClientRect ( ) . top < imagePosition . top ) { lens . style . top = 0 + 'px' ; } if ( lens . getBoundingClientRect ( ) . bottom > imagePosition . bottom ) { lens . style . top = imagePosition . height - lens . getBoundingClientRect ( ) . height + 'px' ; } if ( lens . getBoundingClientRect ( ) . right > imagePosition . right ) { lens . style . left = imagePosition . width - lens . getBoundingClientRect ( ) . width + 'px' ; } if ( lens . getBoundingClientRect ( ) . left < imagePosition . left ) { lens . style . left = 0 + 'px' ; } } function updateZoom ( ) { if ( zoom . getBoundingClientRect ( ) . top < 0 ) { zoom . style . top = - imagePosition . top + 'px' ; } if ( zoom . getBoundingClientRect ( ) . bottom > window . innerHeight ) { zoom . style . top = window . innerHeight - imagePosition . top - zoom . getBoundingClientRect ( ) . height + 'px' ; } if ( zoom . getBoundingClientRect ( ) . right > window . innerWidth ) { zoom . style . left = window . innerWidth - zoom . getBoundingClientRect ( ) . width - imagePosition . left + 'px' ; } if ( zoom . getBoundingClientRect ( ) . left < 0 ) { zoom . style . left = - imagePosition . left + 'px' ; } } }
This function update he positions of the elements and the zoom
 @param masterID -- The ID of the main element
This function update he positions of the elements and the zoom @param masterID -- The ID of the main element
// Update the zoom itself /**
    * Update the position of the lens so it cannot move outside the picture
    */ // Stop the lens resize to go outside picture (top) // Stop the lens resize to go outside picture (bottom) // Stop the lens resize to go outside picture (right) // Stop the lens resize to go outside picture (right) /**
    * Update the position of the zoom so it cannot move outside the window
    */ // Stop the zoom resize to go outside picture (top) // Stop the zoom resize to go outside picture (bottom) // Stop the zoom resize to go outside picture (right) // Stop the zoom resize to go outside picture (left)