mirror of
https://github.com/xuthus83/pigallery2.git
synced 2024-11-03 21:04:03 +08:00
79 lines
3.1 KiB
HTML
79 lines
3.1 KiB
HTML
<div [hidden]="!visible" #root>
|
|
|
|
<div class="blackCanvas"
|
|
[style.opacity]="blackCanvasOpacity">
|
|
</div>
|
|
|
|
<div class="lightbox" #lightbox>
|
|
<app-gallery-lightbox-photo [gridPhoto]="activePhoto ? activePhoto.gridPhoto : null"
|
|
[loadImage]="!animating"
|
|
[windowAspect]="getPhotoFrameWidth()/getPhotoFrameHeight()"
|
|
#photo>
|
|
</app-gallery-lightbox-photo>
|
|
</div>
|
|
<div
|
|
(swipeleft)="nextImage()" (swiperight)="prevImage()" (swipeup)="hide()"
|
|
*ngIf="controllersVisible"
|
|
id="controllers-container" #controls [style.width.px]="getPhotoFrameWidth()"
|
|
[ngClass]="!controllersDimmed ? 'dim-controls': ''">
|
|
<div class="controls controls-top">
|
|
<a *ngIf="activePhoto" [href]="activePhoto.gridPhoto.getPhotoPath()"
|
|
[download]="activePhoto.gridPhoto.photo.name">
|
|
<span class="oi oi-data-transfer-download highlight control-button"
|
|
title="download" i18n-title></span>
|
|
</a>
|
|
<span class="oi oi-info highlight control-button"
|
|
(click)="toggleInfoPanel()"
|
|
title="info" i18n-title></span>
|
|
|
|
<span class="oi oi-fullscreen-exit highlight control-button"
|
|
*ngIf="fullScreenService.isFullScreenEnabled()"
|
|
(click)="fullScreenService.exitFullScreen()"
|
|
title="toggle fullscreen" i18n-title>
|
|
|
|
</span>
|
|
|
|
<span class="oi oi-fullscreen-enter highlight control-button"
|
|
*ngIf="!fullScreenService.isFullScreenEnabled()"
|
|
(click)="fullScreenService.showFullScreen(root)"
|
|
title="toggle fullscreen" i18n-title>
|
|
</span>
|
|
|
|
<span class="oi oi-x highlight control-button" (click)="hide()" title="close"
|
|
i18n-title></span>
|
|
</div>
|
|
|
|
<div class="navigation-arrow highlight"
|
|
*ngIf="navigation.hasPrev" title="key: left arrow" id="leftArrow" i18n-title
|
|
(click)="prevImage()"><span
|
|
class="oi oi-chevron-left"></span></div>
|
|
<div class="navigation-arrow highlight"
|
|
*ngIf="navigation.hasNext" title="key: right arrow" id="rightArrow" i18n-title
|
|
(click)="nextImage()"><span
|
|
class="oi oi-chevron-right"></span></div>
|
|
|
|
<div class="controls controls-playback">
|
|
<span class="oi oi-media-pause highlight control-button"
|
|
[ngClass]="playBackState == 0 ? 'button-disabled':''"
|
|
(click)="pause()"
|
|
title="pause"></span>
|
|
<span
|
|
class="oi oi-media-play highlight control-button"
|
|
[ngClass]="playBackState == 1 ? 'button-active':''"
|
|
(click)="play()"
|
|
title="auto play"></span>
|
|
<span class="oi oi-media-skip-forward highlight control-button"
|
|
[ngClass]="playBackState == 2 ? 'button-active':''"
|
|
(click)="fastForward()"
|
|
title="fast auto play"></span>
|
|
</div>
|
|
</div>
|
|
<app-info-panel *ngIf="activePhoto && infoPanelVisible"
|
|
id="info-panel"
|
|
[style.width.px]="infoPanelWidth"
|
|
[photo]="activePhoto.gridPhoto.photo"
|
|
(onClose)="hideInfoPanel()">
|
|
|
|
</app-info-panel>
|
|
</div>
|