1
0
mirror of https://github.com/xuthus83/pigallery2.git synced 2024-11-03 21:04:03 +08:00
pigallery2/frontend/app/gallery/map/lightbox/lightbox.map.gallery.component.html
2017-07-25 16:13:21 +02:00

60 lines
2.2 KiB
HTML

<div [hidden]="!visible" #root>
<div class="lightbox"
[style.width.px]="lightboxDimension.width"
[style.height.px]="lightboxDimension.height"
[style.top.px]="lightboxDimension.top"
[style.left.px]="lightboxDimension.left"
[style.opacity]="opacity">
<agm-map
[style.width.px]="mapDimension.width"
[style.height.px]="mapDimension.height"
[zoom]="5"
[latitude]="mapCenter.latitude"
[longitude]="mapCenter.longitude">
<agm-marker
*ngFor="let photo of mapPhotos"
[latitude]="photo.latitude"
[longitude]="photo.longitude"
[iconUrl]="photo.iconUrl"
(markerClick)="loadPreview(photo)">
<agm-info-window>
<img *ngIf="photo.preview.thumbnail.Src"
[style.width.px]="photo.preview.width"
[style.height.px]="photo.preview.height"
[src]="photo.preview.thumbnail.Src">
<div class="preview-loading"
[style.width.px]="photo.preview.width"
[style.height.px]="photo.preview.height"
*ngIf="!photo.preview.thumbnail.Src">
<span class="glyphicon"
[ngClass]="photo.preview.thumbnail.Error ? 'glyphicon-warning-sign' : 'glyphicon-picture'"
aria-hidden="true">
</span>
</div>
</agm-info-window>
</agm-marker>
</agm-map>
</div>
<div id="controllers-container" *ngIf="visible">
<div id="controls">
<span>
<span class=" glyphicon glyphicon-resize-small highlight"
*ngIf="fullScreenService.isFullScreenEnabled()"
(click)="fullScreenService.exitFullScreen()" title="toggle fullscreen"></span>
</span>
<span>
<span class="glyphicon glyphicon-fullscreen highlight"
*ngIf="!fullScreenService.isFullScreenEnabled()"
(click)="fullScreenService.showFullScreen(root)" title="toggle fullscreen"></span>
</span>
<span>
<span class="glyphicon glyphicon-remove highlight" (click)="hide()" title="close"></span>
</span>
</div>
</div>
</div>