pigallery2/frontend/app/gallery/lightbox/lightbox.gallery.component.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="glyphicon glyphicon-download-alt highlight control-button"
              title="download" i18n-title></span>
      </a>
      <span class="glyphicon glyphicon-info-sign highlight control-button" (click)="toggleInfoPanel()"
            title="info" i18n-title></span>

      <span class=" glyphicon glyphicon-resize-small highlight control-button"
            *ngIf="fullScreenService.isFullScreenEnabled()"
            (click)="fullScreenService.exitFullScreen()" title="toggle fullscreen" i18n-title></span>

      <span class="glyphicon glyphicon-fullscreen highlight control-button"
            *ngIf="!fullScreenService.isFullScreenEnabled()"
            (click)="fullScreenService.showFullScreen(root)" title="toggle fullscreen" i18n-title></span>

      <span class="glyphicon glyphicon-remove 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="glyphicon glyphicon-chevron-left"></span></div>
    <div class="navigation-arrow highlight"
         *ngIf="navigation.hasNext" title="key: right arrow" id="rightArrow" i18n-title
         (click)="nextImage()"><span
      class="glyphicon glyphicon-chevron-right"></span></div>

    <div class="controls controls-playback">
      <span class="glyphicon glyphicon-pause highlight control-button"
            [ngClass]="playBackState == 0 ? 'button-disabled':''"
            (click)="pause()"
            title="pause"></span>
      <span
        class="glyphicon glyphicon-play highlight control-button"
        [ngClass]="playBackState == 1 ? 'button-active':''"
        (click)="play()"
        title="auto play"></span>
      <span class="glyphicon glyphicon-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>