Vorlage:BildGrossZoom
Aus BogenWiki
(Unterschied zwischen Versionen)
Nugman (Diskussion | Beiträge) |
Nugman (Diskussion | Beiträge) |
||
| Zeile 20: | Zeile 20: | ||
<div id="BogenZoom-</html>{{{Bild}}}<html>" style="display:box;width:100%;height:100px;background-color:green;background-repeat:no-repeat;"></div> | <div id="BogenZoom-</html>{{{Bild}}}<html>" style="display:box;width:100%;height:100px;background-color:green;background-repeat:no-repeat;"></div> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
| + | // Dateiname des Bildes ermitteln. | ||
BogenBild = '</html>{{filepath:{{{Bild}}}.jpg|nowiki}}<html>'; | BogenBild = '</html>{{filepath:{{{Bild}}}.jpg|nowiki}}<html>'; | ||
BogenBild = BogenBild.substr(BogenBild.indexOf('/bogenwiki')); | BogenBild = BogenBild.substr(BogenBild.indexOf('/bogenwiki')); | ||
//alert('BogenBild = "'+BogenBild+'"'); | //alert('BogenBild = "'+BogenBild+'"'); | ||
| - | + | // Groesse des Bildes ermitteln | |
| - | + | ||
| - | + | ||
BogenBildW = </html>{{#imgw:{{{Bild}}}.jpg}}<html>; | BogenBildW = </html>{{#imgw:{{{Bild}}}.jpg}}<html>; | ||
BogenBildH = </html>{{#imgh:{{{Bild}}}.jpg}}<html>; | BogenBildH = </html>{{#imgh:{{{Bild}}}.jpg}}<html>; | ||
//alert('BogenBildW = "'+BogenBildW+'", BogenBildH = "'+BogenBildH+'"'); | //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 = document.getElementById('BogenSmall-</html>{{{Bild}}}<html>'); | ||
eBogenSmall.src = BogenBild; | eBogenSmall.src = BogenBild; | ||
| Zeile 35: | Zeile 39: | ||
eBogenSmall.addEventListener('mousemove', MouseMove); | eBogenSmall.addEventListener('mousemove', MouseMove); | ||
eBogenSmall.addEventListener("mousedown", MouseDown); | eBogenSmall.addEventListener("mousedown", MouseDown); | ||
| + | // Originalbild anzeigen | ||
eBogenZoom = document.getElementById('BogenZoom-</html>{{{Bild}}}<html>'); | eBogenZoom = document.getElementById('BogenZoom-</html>{{{Bild}}}<html>'); | ||
eBogenZoom.style.height = BogenBildHs+'px'; | eBogenZoom.style.height = BogenBildHs+'px'; | ||
eBogenZoom.style.backgroundImage = 'url('+BogenBild+')'; | eBogenZoom.style.backgroundImage = 'url('+BogenBild+')'; | ||
eBogenZoom.style.backgroundPosition = '0px 0px'; | eBogenZoom.style.backgroundPosition = '0px 0px'; | ||
| + | // Overlay für Rahmen im Thumbnail anzeigen | ||
eBogenSmallOverlay = document.getElementById('BogenSmallOverlay-</html>{{{Bild}}}<html>'); | eBogenSmallOverlay = document.getElementById('BogenSmallOverlay-</html>{{{Bild}}}<html>'); | ||
var BogenSmallRect = eBogenSmall.getBoundingClientRect(); | var BogenSmallRect = eBogenSmall.getBoundingClientRect(); | ||
| Zeile 45: | Zeile 51: | ||
eBogenSmallOverlay.addEventListener('mousemove', MouseMove); | eBogenSmallOverlay.addEventListener('mousemove', MouseMove); | ||
eBogenSmallOverlay.addEventListener("mousedown", MouseDown); | eBogenSmallOverlay.addEventListener("mousedown", MouseDown); | ||
| + | // Ausschnitt soll der Mausbewegung folgen | ||
bFollowMouseMove = true; | bFollowMouseMove = true; | ||
| + | // Callback fuer Mausbewegung im Thumbnail | ||
function MouseMove(e) { | function MouseMove(e) { | ||
e.preventDefault(); | e.preventDefault(); | ||
| Zeile 66: | Zeile 74: | ||
var BildZoomX = (x*10-BogenBildWz/2 < 0 ? 0 : (x*10+BogenBildWz/2 > BogenBildW ? BogenBildW-BogenBildWz : x*10-BogenBildWz/2)); | var 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)); | var BildZoomY = (y*10-BogenBildHz/2 < 0 ? 0 : (y*10+BogenBildHz/2 > BogenBildH ? BogenBildH-BogenBildHz : y*10-BogenBildHz/2)); | ||
| + | // Auschnitt des Originalbildes (Zoom) verschieben | ||
eBogenZoom.style.backgroundPosition = '-'+BildZoomX+'px -'+BildZoomY+'px'; | eBogenZoom.style.backgroundPosition = '-'+BildZoomX+'px -'+BildZoomY+'px'; | ||
| + | // Overlay im Thumbnail verschieben | ||
eBogenSmallOverlay.style.top = ''+(a.top+BildZoomY/10+window.pageYOffset)+'px'; | eBogenSmallOverlay.style.top = ''+(a.top+BildZoomY/10+window.pageYOffset)+'px'; | ||
eBogenSmallOverlay.style.left = ''+(a.left+BildZoomX/10+window.pageXOffset)+'px'; | eBogenSmallOverlay.style.left = ''+(a.left+BildZoomX/10+window.pageXOffset)+'px'; | ||
| Zeile 73: | Zeile 83: | ||
} | } | ||
} | } | ||
| + | // Callback fuer Mausklick im Thumbnail | ||
function MouseDown(e) { | function MouseDown(e) { | ||
| + | // Mauszeiger folgen/nicht folgen umschalten | ||
bFollowMouseMove = !bFollowMouseMove; | bFollowMouseMove = !bFollowMouseMove; | ||
document.getElementById('bFollowMouseMove').innerHTML = (bFollowMouseMove ? 'true' : 'false'); | document.getElementById('bFollowMouseMove').innerHTML = (bFollowMouseMove ? 'true' : 'false'); | ||
Version vom 08:15, 12. Jul. 2018
| [[{{{Gebiet}}} MiNr. {{{SatzMiNr}}}#Bogen_{{{Bild}}}|Zurück]] | ||
|
| ||
| X = ..., y = ... | ClientWidth = ..., ClientHeight = ..., bFollowMouseMove = ... | ||
| [[{{{Gebiet}}} MiNr. {{{SatzMiNr}}}#Bogen_{{{Bild}}}|Zurück]] | ||
