mirror of
https://github.com/xuthus83/pigallery2.git
synced 2024-11-03 21:04:03 +08:00
58 lines
2.5 KiB
HTML
58 lines
2.5 KiB
HTML
<div [hidden]="!visible" #root>
|
|
|
|
<div class="blackCanvas"
|
|
[style.opacity]="blackCanvasOpacity">
|
|
</div>
|
|
|
|
<div class="lightbox" #lightbox>
|
|
<gallery-lightbox-photo [gridPhoto]="activePhoto ? activePhoto.gridPhoto : null"
|
|
#photo>
|
|
</gallery-lightbox-photo>
|
|
</div>
|
|
|
|
<!--
|
|
[@photoState]="{value:visible?'active':'inactive',
|
|
params:{
|
|
startWidth:startPhotoDimension.width,
|
|
startHeight:startPhotoDimension.height,
|
|
startTop:startPhotoDimension.top,
|
|
startLeft:startPhotoDimension.left,
|
|
endWidth:photoDimension.width,
|
|
endHeight:photoDimension.height,
|
|
endTop:photoDimension.top,
|
|
endLeft:photoDimension.left}}"
|
|
-->
|
|
<div id="controllers-container" #controls
|
|
[style.width.px]="getScreenWidth()">
|
|
<div id="controls">
|
|
<a *ngIf="activePhoto" [href]="activePhoto.gridPhoto.getPhotoPath()"
|
|
[download]="activePhoto.gridPhoto.photo.name"><span class="glyphicon glyphicon-download-alt highlight"
|
|
title="download"></span></a>
|
|
<span class="glyphicon glyphicon-info-sign highlight" (click)="toggleInfoPanel()" title="info"></span>
|
|
|
|
<span class=" glyphicon glyphicon-resize-small highlight"
|
|
*ngIf="fullScreenService.isFullScreenEnabled()"
|
|
(click)="fullScreenService.exitFullScreen()" title="toggle fullscreen"></span>
|
|
|
|
<span class="glyphicon glyphicon-fullscreen highlight"
|
|
*ngIf="!fullScreenService.isFullScreenEnabled()"
|
|
(click)="fullScreenService.showFullScreen(root)" title="toggle fullscreen"></span>
|
|
|
|
<span class="glyphicon glyphicon-remove highlight" (click)="hide()" title="close"></span>
|
|
</div>
|
|
|
|
<div class="navigation-arrow highlight" *ngIf="navigation.hasPrev" title="key: left arrow" id="leftArrow"
|
|
(click)="prevImage()"><span
|
|
class="glyphicon glyphicon-chevron-left"></span></div>
|
|
<div class="navigation-arrow highlight" *ngIf="navigation.hasNext" title="key: right arrow" id="rightArrow"
|
|
(click)="nextImage()"><span
|
|
class="glyphicon glyphicon-chevron-right"></span></div>
|
|
</div>
|
|
<info-panel *ngIf="activePhoto && infoPanelVisible"
|
|
id="info-panel"
|
|
[style.width.px]="infoPanelWidth"
|
|
[photo]="activePhoto.gridPhoto.photo">
|
|
|
|
</info-panel>
|
|
</div>
|