added documentation and img-magnifier

2020-07-14 15:58:33 +02:00
parent e6e5c22ece
commit 18bbf14596
13 changed files with 175 additions and 3 deletions
--- a/src/app/img-magnifier/img-magnifier.component.html
+++ b/src/app/img-magnifier/img-magnifier.component.html
@ -0,0 +1,17 @@
+<div class="img-container">
+  <div class="magnifier"
+       [ngStyle]="{
+         'background-size': backgroundSize,
+         'background-image': 'url(\'' + src + '\')',
+         'background-position':  '-' + magnifierPos.x * zoom + 'px -' + magnifierPos.y * zoom + 'px',
+         left: magnifierPos.x + 'px',
+         top: magnifierPos.y + 'px',
+         width: magnifierSize.width + 'px',
+         height: magnifierSize.height + 'px'
+       }"
+       (mousemove)="calcPos($event)"
+       (mouseleave)="showMagnifier = false"
+       *ngIf="showMagnifier">
+  </div>
+  <img [src]="src" alt="" (mousemove)="calcPos($event)" (mouseenter)="showMagnifier = true" #mainImg>
+</div>