2016-05-13 20:27:00 +08:00
|
|
|
<div [hidden]="!activePhoto">
|
2016-05-01 00:33:07 +08:00
|
|
|
|
2016-07-04 22:58:10 +08:00
|
|
|
<div class="blackCanvas">
|
2016-05-01 00:33:07 +08:00
|
|
|
</div>
|
2016-05-13 20:27:00 +08:00
|
|
|
|
2016-07-04 22:58:10 +08:00
|
|
|
<div class="lightbox">
|
|
|
|
|
<gallery-lightbox-photo [gridPhoto]="activePhoto ? activePhoto.gridPhoto : null"
|
|
|
|
|
[style.top.px]="photoDimension.top"
|
|
|
|
|
[style.left.px]="photoDimension.left"
|
|
|
|
|
[style.width.px]="photoDimension.width"
|
|
|
|
|
[style.height.px]="photoDimension.height">
|
2016-05-13 20:27:00 +08:00
|
|
|
</gallery-lightbox-photo>
|
|
|
|
|
</div>
|
2016-05-13 05:00:38 +08:00
|
|
|
|
|
|
|
|
|
2016-05-13 20:27:00 +08:00
|
|
|
<div id="controllers-container" #controls>
|
|
|
|
|
<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" title="info"></span>
|
|
|
|
|
<span class="glyphicon glyphicon-fullscreen highlight" title="toggle fullscreen"></span>
|
|
|
|
|
<span class="glyphicon glyphicon-remove highlight" (click)="hide()" title="close"></span>
|
2016-05-13 05:00:38 +08:00
|
|
|
</div>
|
2016-05-13 20:27:00 +08:00
|
|
|
|
|
|
|
|
<div class="navigation-arrow highlight" *ngIf="navigation.hasPrev" id="leftArrow" (click)="prevImage()"><span
|
|
|
|
|
class="glyphicon glyphicon-chevron-left"></span></div>
|
|
|
|
|
<div class="navigation-arrow highlight" *ngIf="navigation.hasNext" id="rightArrow" (click)="nextImage()"><span
|
|
|
|
|
class="glyphicon glyphicon-chevron-right"></span></div>
|
2016-05-13 05:00:38 +08:00
|
|
|
</div>
|
|
|
|
|
</div>
|
