2018-05-26 20:49:55 -04:00
|
|
|
<div [hidden]="!isVisible()" #root>
|
2016-04-30 18:33:07 +02:00
|
|
|
|
2017-07-09 22:00:42 +02:00
|
|
|
<div class="blackCanvas"
|
|
|
|
[style.opacity]="blackCanvasOpacity">
|
|
|
|
</div>
|
|
|
|
|
2017-07-10 22:00:22 +02:00
|
|
|
<div class="lightbox" #lightbox>
|
2019-07-20 00:29:16 +02:00
|
|
|
<app-gallery-lightbox-media [gridMedia]="activePhoto ? activePhoto.gridMedia : null"
|
2018-11-04 19:28:32 +01:00
|
|
|
[loadMedia]="!animating"
|
2019-07-14 19:31:34 +02:00
|
|
|
[zoom]="controls ? controls.Zoom : 1"
|
|
|
|
[drag]="controls ? controls.drag : {x:0,y:0}"
|
|
|
|
[windowAspect]="photoFrameDim.aspect"
|
2018-05-03 19:17:08 -04:00
|
|
|
#photo>
|
2018-11-17 19:32:31 +01:00
|
|
|
</app-gallery-lightbox-media>
|
2019-07-14 19:31:34 +02:00
|
|
|
<app-lightbox-controls
|
2019-07-20 00:29:16 +02:00
|
|
|
*ngIf="isOpen()"
|
2019-07-14 19:31:34 +02:00
|
|
|
#controls
|
|
|
|
[activePhoto]="activePhoto"
|
|
|
|
(closed)="hide()"
|
|
|
|
[navigation]="navigation"
|
|
|
|
(nextPhoto)="nextImage()"
|
|
|
|
(previousPhoto)="prevImage()"
|
|
|
|
(toggleInfoPanel)="toggleInfoPanel()"
|
|
|
|
(toggleFullScreen)="toggleFullscreen()"
|
|
|
|
[photoFrameDim]="photoFrameDim"
|
|
|
|
[mediaElement]="mediaElement">
|
|
|
|
</app-lightbox-controls>
|
2017-07-09 22:00:42 +02:00
|
|
|
</div>
|
|
|
|
|
2018-05-03 19:17:08 -04:00
|
|
|
<app-info-panel *ngIf="activePhoto && infoPanelVisible"
|
|
|
|
id="info-panel"
|
|
|
|
[style.width.px]="infoPanelWidth"
|
2019-07-20 00:29:16 +02:00
|
|
|
[media]="activePhoto.gridMedia.media"
|
2018-11-17 19:32:31 +01:00
|
|
|
(closed)="hideInfoPanel()">
|
2018-05-03 19:17:08 -04:00
|
|
|
</app-info-panel>
|
2016-05-12 23:00:38 +02:00
|
|
|
</div>
|