Persönliche Werkzeuge

Vorlage:BildGrossZoom

Aus BogenWiki

(Unterschied zwischen Versionen)
Wechseln zu: Navigation, Suche
Zeile 58: Zeile 58:
   bFollowMouseSmall = true;
   bFollowMouseSmall = true;
   bFollowMouseZoom = false;
   bFollowMouseZoom = false;
 +
  BildZoomX = 0;
 +
  BildZoomY = 0;
 +
  BildZoomMouseStart = {x:0,y:0};
   // Callback fuer Mausbewegung im Thumbnail
   // Callback fuer Mausbewegung im Thumbnail
   function MouseMoveSmall(e) {
   function MouseMoveSmall(e) {
Zeile 75: Zeile 78:
       var BogenBildHz = eBogenZoom.clientHeight;
       var BogenBildHz = eBogenZoom.clientHeight;
       var BogenBildWz = eBogenZoom.clientWidth;
       var BogenBildWz = eBogenZoom.clientWidth;
-
       var BildZoomX = (x*10-BogenBildWz/2 < 0 ? 0 : (x*10+BogenBildWz/2 > BogenBildW ? BogenBildW-BogenBildWz : x*10-BogenBildWz/2));
+
       BildZoomX = (x*10-BogenBildWz/2 < 0 ? 0 : (x*10+BogenBildWz/2 > BogenBildW ? BogenBildW-BogenBildWz : x*10-BogenBildWz/2));
-
       var BildZoomY = (y*10-BogenBildHz/2 < 0 ? 0 : (y*10+BogenBildHz/2 > BogenBildH ? BogenBildH-BogenBildHz : y*10-BogenBildHz/2));
+
       BildZoomY = (y*10-BogenBildHz/2 < 0 ? 0 : (y*10+BogenBildHz/2 > BogenBildH ? BogenBildH-BogenBildHz : y*10-BogenBildHz/2));
       // Auschnitt des Originalbildes (Zoom) verschieben
       // Auschnitt des Originalbildes (Zoom) verschieben
       eBogenZoom.style.backgroundPosition = '-'+BildZoomX+'px -'+BildZoomY+'px';
       eBogenZoom.style.backgroundPosition = '-'+BildZoomX+'px -'+BildZoomY+'px';
Zeile 97: Zeile 100:
     e.preventDefault();
     e.preventDefault();
     e = e || window.event;
     e = e || window.event;
-
     // Get the x and y positions of the image:
+
     // Get the mouse x and y positions within the image
-
     var RectZoom = eBogenZoom.getBoundingClientRect();
+
     var MousePos = GetMouseClientXY(eBogenZoom,e);
-
    // Calculate the cursor's x and y coordinates, relative to the image:
+
     document.getElementById('BogenZoomXY').innerHTML = MousePos.x+'/'+MousePos.y;
-
    var x = e.pageX - RectZoom.left;
+
-
    var y = e.pageY - RectZoom.top;
+
-
    // Consider any page scrolling:
+
-
    x = x - window.pageXOffset;
+
-
    y = y - window.pageYOffset;
+
-
     document.getElementById('BogenZoomXY').innerHTML = x+'/'+y;
+
     document.getElementById('ZoomClientWidthHeight').innerHTML = eBogenZoom.clientWidth+'/'+eBogenZoom.clientHeight;
     document.getElementById('ZoomClientWidthHeight').innerHTML = eBogenZoom.clientWidth+'/'+eBogenZoom.clientHeight;
     if (bFollowMouseZoom) {
     if (bFollowMouseZoom) {
       var BogenBildHz = eBogenZoom.clientHeight;
       var BogenBildHz = eBogenZoom.clientHeight;
       var BogenBildWz = eBogenZoom.clientWidth;
       var BogenBildWz = eBogenZoom.clientWidth;
-
       var BildZoomX = (x < 0 ? 0 : (x > BogenBildWz ? BogenBildWz : x));
+
       BildZoomX = BildZoomX+MousePos.x-BildZoomMouseStart.x;
-
       var BildZoomY = (y < 0 ? 0 : (y > BogenBildHz ? BogenBildHz : y));
+
      BildZoomY = BildZoomY+MousePos.y-BildZoomMouseStart.y;
 +
      BildZoomMouseStart = MousePos;
 +
      BildZoomX = (MousePos.x < 0 ? 0 : (MousePos.x > BogenBildWz ? BogenBildWz : MousePos.x));
 +
       BildZoomY = (MousePos.y < 0 ? 0 : (MousePos.y > BogenBildHz ? BogenBildHz : MousePos.y));
       // Auschnitt des Originalbildes (Zoom) verschieben
       // Auschnitt des Originalbildes (Zoom) verschieben
       eBogenZoom.style.backgroundPosition = '-'+BildZoomX+'px -'+BildZoomY+'px';
       eBogenZoom.style.backgroundPosition = '-'+BildZoomX+'px -'+BildZoomY+'px';
       // Overlay im Thumbnail verschieben
       // Overlay im Thumbnail verschieben
-
       var RectSmall = eBogenZoom.getBoundingClientRect();
+
       var RectSmall = eBogenSmall.getBoundingClientRect();
       eBogenSmallOverlay.style.top = ''+(RectSmall.top+BildZoomY/10+window.pageYOffset)+'px';
       eBogenSmallOverlay.style.top = ''+(RectSmall.top+BildZoomY/10+window.pageYOffset)+'px';
       eBogenSmallOverlay.style.left = ''+(RectSmall.left+BildZoomX/10+window.pageXOffset)+'px';
       eBogenSmallOverlay.style.left = ''+(RectSmall.left+BildZoomX/10+window.pageXOffset)+'px';
Zeile 126: Zeile 126:
     // Mauszeiger folgen
     // Mauszeiger folgen
     bFollowMouseZoom = true;
     bFollowMouseZoom = true;
 +
    BildZoomMouseStart = GetMouseClientXY(eBogenZoom,e);
     document.getElementById('bFollowMouseZoom').innerHTML = 'true';
     document.getElementById('bFollowMouseZoom').innerHTML = 'true';
   }
   }
Zeile 133: Zeile 134:
     bFollowMouseZoom = false;
     bFollowMouseZoom = false;
     document.getElementById('bFollowMouseZoom').innerHTML = 'false';
     document.getElementById('bFollowMouseZoom').innerHTML = 'false';
 +
  }
 +
  function GetMouseClientXY(eClient,e) {
 +
    // Get the x and y positions of the image:
 +
    var ClientRect = eClient.getBoundingClientRect();
 +
    // Calculate the cursor's x and y coordinates, relative to the client:
 +
    var x = e.pageX - ClientRect.left;
 +
    var y = e.pageY - ClientRect.top;
 +
    // Consider any page scrolling:
 +
    x = x - window.pageXOffset;
 +
    y = y - window.pageYOffset;
 +
    return {x:x,y:y};
   }
   }
</script></html>
</script></html>

Version vom 22:19, 12. Jul. 2018

 [[{{{Gebiet}}} MiNr. {{{SatzMiNr}}}#Bogen_{{{Bild}}}|Zurück]]
Small.X/Y = ... | Zoom.X/Y = ... | Zoom.ClientWidth/Height = ... | bFollowMouseSmall = ..., bFollowMouseZoom = ...
 [[{{{Gebiet}}} MiNr. {{{SatzMiNr}}}#Bogen_{{{Bild}}}|Zurück]]
Von „https://nugman.info/bogenwiki/index.php?title=Vorlage:BildGrossZoom“