Vorlage:BildGrossZoom
Aus BogenWiki
(Unterschied zwischen Versionen)
Nugman (Diskussion | Beiträge) |
Nugman (Diskussion | Beiträge) |
||
| Zeile 65: | Zeile 65: | ||
e.preventDefault(); | e.preventDefault(); | ||
e = e || window.event; | e = e || window.event; | ||
| - | // Get the x and y positions | + | // Get the mouse x and y positions within the image |
| - | var | + | var MousePos = GetMouseClientXY(eBogenSmall,e); |
| - | + | document.getElementById('BogenSmallXY').innerHTML = MousePos.x+'/'+MousePos.y; | |
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | document.getElementById('BogenSmallXY').innerHTML = x+'/'+y; | + | |
document.getElementById('ZoomClientWidthHeight').innerHTML = eBogenZoom.clientWidth+'/'+eBogenZoom.clientHeight; | document.getElementById('ZoomClientWidthHeight').innerHTML = eBogenZoom.clientWidth+'/'+eBogenZoom.clientHeight; | ||
if (bFollowMouseSmall) { | if (bFollowMouseSmall) { | ||
var BogenBildHz = eBogenZoom.clientHeight; | var BogenBildHz = eBogenZoom.clientHeight; | ||
var BogenBildWz = eBogenZoom.clientWidth; | var BogenBildWz = eBogenZoom.clientWidth; | ||
| - | BildZoomX = (x*10-BogenBildWz/2 < 0 ? 0 : (x*10+BogenBildWz/2 > BogenBildW ? BogenBildW-BogenBildWz : x*10-BogenBildWz/2)); | + | BildZoomX = (MousePos.x*10-BogenBildWz/2 < 0 ? 0 : (MousePos.x*10+BogenBildWz/2 > BogenBildW ? BogenBildW-BogenBildWz : MousePos.x*10-BogenBildWz/2)); |
| - | BildZoomY = (y*10-BogenBildHz/2 < 0 ? 0 : (y*10+BogenBildHz/2 > BogenBildH ? BogenBildH-BogenBildHz : y*10-BogenBildHz/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 | // 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 | ||
| - | eBogenSmallOverlay.style.top = ''+( | + | var RectSmall = eBogenSmall.getBoundingClientRect(); |
| - | eBogenSmallOverlay.style.left = ''+( | + | 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.height = ''+(eBogenZoom.clientHeight/10)+'px'; | ||
eBogenSmallOverlay.style.width = ''+(eBogenZoom.clientWidth/10)+'px'; | eBogenSmallOverlay.style.width = ''+(eBogenZoom.clientWidth/10)+'px'; | ||
| Zeile 107: | Zeile 102: | ||
var BogenBildHz = eBogenZoom.clientHeight; | var BogenBildHz = eBogenZoom.clientHeight; | ||
var BogenBildWz = eBogenZoom.clientWidth; | var BogenBildWz = eBogenZoom.clientWidth; | ||
| - | BildZoomX = BildZoomX+ | + | BildZoomX = BildZoomX+BildZoomMouseStart.x-MousePos.x; |
| - | BildZoomY = BildZoomY+ | + | BildZoomY = BildZoomY+BildZoomMouseStart.y-MousePos.y; |
BildZoomMouseStart = MousePos; | BildZoomMouseStart = MousePos; | ||
BildZoomX = (MousePos.x < 0 ? 0 : (MousePos.x > BogenBildWz ? BogenBildWz : MousePos.x)); | BildZoomX = (MousePos.x < 0 ? 0 : (MousePos.x > BogenBildWz ? BogenBildWz : MousePos.x)); | ||
Version vom 22:22, 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]] | ||
