Persönliche Werkzeuge

Vorlage:BildGrossZoom

Aus BogenWiki

(Unterschied zwischen Versionen)
Wechseln zu: Navigation, Suche
Zeile 14: Zeile 14:
|-style="background:#000000"
|-style="background:#000000"
|align="left" width="10px"|<html>
|align="left" width="10px"|<html>
-
<img id="BogenSmall-</html>{{{Bild}}}<html>" src="">
+
<img id="BGZ-thumb-</html>{{{Bild}}}<html>" src="">
-
<div id="BogenSmallOverlay-</html>{{{Bild}}}<html>" style="display:block;position:absolute;width:10px;height:10px;top:0px;left:0px;background-color:transparent;z-index:2;cursor:pointer;border:1px solid red;"></div>
+
<div id="BGZ-thumb-overlay-</html>{{{Bild}}}<html>" style="display:block;position:absolute;width:10px;height:10px;top:0px;left:0px;background-color:transparent;z-index:2;cursor:pointer;border:1px solid red;"></div>
</html>
</html>
|align="left"|<html>
|align="left"|<html>
-
<div id="BogenZoom-</html>{{{Bild}}}<html>" style="display:box;cursor:default;width:100%;height:100px;background-color:green;background-repeat:no-repeat;"></div>
+
<div id="BGZ-zoom-</html>{{{Bild}}}<html>" style="display:box;cursor:default;width:100%;height:100px;background-color:green;background-repeat:no-repeat;"></div>
-
<script type="text/javascript">
+
<script type="text/javascript" src="/bogenwiki/extensions/BZG/BildGrossZoom.js"></script>
-
  // Dateiname des Bildes ermitteln.
+
-
  BogenBild = '</html>{{filepath:{{{Bild}}}.jpg|nowiki}}<html>';
+
-
  BogenBild = BogenBild.substr(BogenBild.indexOf('/bogenwiki'));
+
-
  //alert('BogenBild = "'+BogenBild+'"');
+
-
  // Groesse des Bildes ermitteln
+
-
  BogenBildW = </html>{{#imgw:{{{Bild}}}.jpg}}<html>;
+
-
  BogenBildH = </html>{{#imgh:{{{Bild}}}.jpg}}<html>;
+
-
  //alert('BogenBildW = "'+BogenBildW+'", BogenBildH = "'+BogenBildH+'"');
+
-
  // Groesse des Thumbnail berechnen (momentan fest 10%)
+
-
  BogenBildWs = BogenBildW*10/100;
+
-
  BogenBildHs = BogenBildH*10/100;
+
-
  //alert('BogenBildWs = "'+BogenBildWs+'", BogenBildHs = "'+BogenBildHs+'"');
+
-
  // Thumbnail anzeigen
+
-
  eBogenSmall = document.getElementById('BogenSmall-</html>{{{Bild}}}<html>');
+
-
  eBogenSmall.src = BogenBild;
+
-
  eBogenSmall.width = BogenBildWs;
+
-
  eBogenSmall.height = BogenBildHs;
+
-
  eBogenSmall.addEventListener('mousemove', MouseMoveSmall);
+
-
  eBogenSmall.addEventListener('mousedown', MouseDownSmall);
+
-
  // Originalbild anzeigen
+
-
  eBogenZoom = document.getElementById('BogenZoom-</html>{{{Bild}}}<html>');
+
-
  eBogenZoom.style.height = BogenBildHs+'px';
+
-
  eBogenZoom.style.backgroundImage = 'url('+BogenBild+')';
+
-
  eBogenZoom.style.backgroundPosition = '0px 0px';
+
-
  eBogenZoom.addEventListener('mousemove', MouseMoveZoom);
+
-
  eBogenZoom.addEventListener('mousedown', MouseDownZoom);
+
-
  eBogenZoom.addEventListener('mouseup',  MouseUpZoom);
+
-
  // Overlay für Rahmen im Thumbnail anzeigen
+
-
  eBogenSmallOverlay = document.getElementById('BogenSmallOverlay-</html>{{{Bild}}}<html>');
+
-
  var BogenSmallRect = eBogenSmall.getBoundingClientRect();
+
-
  eBogenSmallOverlay.style.top = BogenSmallRect.y;
+
-
  eBogenSmallOverlay.style.left = BogenSmallRect.x;
+
-
  eBogenSmallOverlay.addEventListener('mousemove', MouseMoveSmall);
+
-
  eBogenSmallOverlay.addEventListener('mousedown', MouseDownSmall);
+
-
  // Ausschnitt soll der Mausbewegung folgen
+
-
  bFollowMouseSmall = true;
+
-
  bFollowMouseZoom = false;
+
-
  BildZoomX = 0;
+
-
  BildZoomY = 0;
+
-
  BildZoomMouseStart = {x:0,y:0};
+
-
  // Callback fuer Mausbewegung im Thumbnail
+
-
  function MouseMoveSmall(e) {
+
-
    e.preventDefault();
+
-
    e = e || window.event;
+
-
    // Get the mouse x and y positions within the image
+
-
    var MousePos = GetMouseClientXY(eBogenSmall,e);
+
-
    document.getElementById('BogenSmallXY').innerHTML = MousePos.x+'/'+MousePos.y;
+
-
    document.getElementById('ZoomClientWidthHeight').innerHTML = eBogenZoom.clientWidth+'/'+eBogenZoom.clientHeight;
+
-
    if (bFollowMouseSmall) {
+
-
      var BogenBildHz = eBogenZoom.clientHeight;
+
-
      var BogenBildWz = eBogenZoom.clientWidth;
+
-
      BildZoomX = (MousePos.x*10-BogenBildWz/2 < 0 ? 0 : (MousePos.x*10+BogenBildWz/2 > BogenBildW ? BogenBildW-BogenBildWz : MousePos.x*10-BogenBildWz/2));
+
-
      BildZoomY = (MousePos.y*10-BogenBildHz/2 < 0 ? 0 : (MousePos.y*10+BogenBildHz/2 > BogenBildH ? BogenBildH-BogenBildHz : MousePos.y*10-BogenBildHz/2));
+
-
      // Auschnitt des Originalbildes (Zoom) verschieben
+
-
      eBogenZoom.style.backgroundPosition = '-'+BildZoomX+'px -'+BildZoomY+'px';
+
-
      // Overlay im Thumbnail verschieben
+
-
      var RectSmall = eBogenSmall.getBoundingClientRect();
+
-
      eBogenSmallOverlay.style.top = ''+(RectSmall.top+BildZoomY/10+window.pageYOffset)+'px';
+
-
      eBogenSmallOverlay.style.left = ''+(RectSmall.left+BildZoomX/10+window.pageXOffset)+'px';
+
-
      eBogenSmallOverlay.style.height = ''+(eBogenZoom.clientHeight/10)+'px';
+
-
      eBogenSmallOverlay.style.width = ''+(eBogenZoom.clientWidth/10)+'px';
+
-
    }
+
-
  }
+
-
  // Callback fuer Mausklick im Thumbnail
+
-
  function MouseDownSmall(e) {
+
-
    // Mauszeiger folgen/nicht folgen umschalten
+
-
    bFollowMouseSmall = !bFollowMouseSmall;
+
-
    if (bFollowMouseSmall) MouseMoveSmall(e);
+
-
    document.getElementById('bFollowMouseSmall').innerHTML = (bFollowMouseSmall ? 'true' : 'false');
+
-
  }
+
-
  // Callback fuer Mausbewegung im Originalbild
+
-
  function MouseMoveZoom(e) {
+
-
    e.preventDefault();
+
-
    e = e || window.event;
+
-
    // Get the mouse x and y positions within the image
+
-
    var MousePos = GetMouseClientXY(eBogenZoom,e);
+
-
    document.getElementById('BogenZoomXY').innerHTML = MousePos.x+'/'+MousePos.y;
+
-
    document.getElementById('ZoomClientWidthHeight').innerHTML = eBogenZoom.clientWidth+'/'+eBogenZoom.clientHeight;
+
-
    if (bFollowMouseZoom) {
+
-
      var BogenBildHz = eBogenZoom.clientHeight;
+
-
      var BogenBildWz = eBogenZoom.clientWidth;
+
-
      BildZoomX = BildZoomX-(MousePos.x-BildZoomMouseStart.x);
+
-
      BildZoomY = BildZoomY-(MousePos.y-BildZoomMouseStart.y);
+
-
      BildZoomMouseStart = MousePos;
+
-
      BildZoomX = (BildZoomX < 0 ? 0 : (BildZoomX+BogenBildWz > BogenBildW ? BogenBildW-BogenBildWz : BildZoomX));
+
-
      BildZoomY = (BildZoomY < 0 ? 0 : (BildZoomY+BogenBildHz > BogenBildH ? BogenBildH-BogenBildHz : BildZoomY));
+
-
      // Auschnitt des Originalbildes (Zoom) verschieben
+
-
      eBogenZoom.style.backgroundPosition = '-'+BildZoomX+'px -'+BildZoomY+'px';
+
-
      // Overlay im Thumbnail verschieben
+
-
      var RectSmall = eBogenSmall.getBoundingClientRect();
+
-
      eBogenSmallOverlay.style.top = ''+(RectSmall.top+BildZoomY/10+window.pageYOffset)+'px';
+
-
      eBogenSmallOverlay.style.left = ''+(RectSmall.left+BildZoomX/10+window.pageXOffset)+'px';
+
-
      eBogenSmallOverlay.style.height = ''+(eBogenZoom.clientHeight/10)+'px';
+
-
      eBogenSmallOverlay.style.width = ''+(eBogenZoom.clientWidth/10)+'px';
+
-
    }
+
-
  }
+
-
  // Callback fuer das Druecken der linken Maustaste im Originalbild
+
-
  function MouseDownZoom(e) {
+
-
    // Mauszeiger folgen
+
-
    bFollowMouseZoom = true;
+
-
    BildZoomMouseStart = GetMouseClientXY(eBogenZoom,e);
+
-
    eBogenZoom.style.cursor = 'move';
+
-
    eBogenZoom.setPointerCapture(e.pointerId);
+
-
    document.getElementById('bFollowMouseZoom').innerHTML = 'true';
+
-
  }
+
-
  // Callback fuer das Loslassen der linken Maustaste im Originalbild
+
-
  function MouseUpZoom(e) {
+
-
    // Mauszeiger nicht folgen
+
-
    bFollowMouseZoom = false;
+
-
    eBogenZoom.style.cursor = 'default';
+
-
    eBogenZoom.releasePointerCapture();
+
-
    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>
+
-
|-style="background:#000000"
+
-
|align="left" colspan="2"|<html>
+
-
<span style="color:white">Small.X/Y = <span id="BogenSmallXY">...</span> | Zoom.X/Y = <span id="BogenZoomXY">...</span> | Zoom.ClientWidth/Height = <span id="ZoomClientWidthHeight">...</span> | bFollowMouseSmall = <span id="bFollowMouseSmall">...</span>, bFollowMouseZoom = <span id="bFollowMouseZoom">...</span></span>
+
</html>
</html>
 +
|-style="background:#000000"
 +
|align="left" colspan="2"|<html><span style="color:white">
 +
Thumb.MouseX/Y = <span id="BGZ-debug-ThumbXY-</html>{{{Bild}}}<html>">...</span> |
 +
Thumb.FollowMouse = <span id="BGZ-debug-FollowMouseSmall-</html>{{{Bild}}}<html>">...</span> |
 +
Zoom.MouseX/Y = <span id="BGZ-debug-ZoomXY-</html>{{{Bild}}}<html>">...</span> |
 +
Zoom.ClientSize = <span id="BGZ-debug-ZoomSize-</html>{{{Bild}}}<html>">...</span> |
 +
Zoom.FollowMouse = <span id="BGZ-debug-FollowMouseZoom-</html>{{{Bild}}}<html>">...</span>
 +
</span></html>
|-style="background:#E0E0E0"
|-style="background:#E0E0E0"
|colspan="3"|<b>&nbsp;[[{{#switch:{{{Gebiet}}}
|colspan="3"|<b>&nbsp;[[{{#switch:{{{Gebiet}}}

Version vom 08:46, 13. Aug. 2018

 [[{{{Gebiet}}} MiNr. {{{SatzMiNr}}}#Bogen_{{{Bild}}}|Zurück]]
Thumb.MouseX/Y = ... | Thumb.FollowMouse = ... | Zoom.MouseX/Y = ... | Zoom.ClientSize = ... | Zoom.FollowMouse = ...
 [[{{{Gebiet}}} MiNr. {{{SatzMiNr}}}#Bogen_{{{Bild}}}|Zurück]]
Von „https://nugman.info/bogenwiki/index.php?title=Vorlage:BildGrossZoom“