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