<div [hidden]="!isVisible()" #root>

  <div class="blackCanvas"
       [style.opacity]="blackCanvasOpacity">
  </div>

  <div class="lightbox" #lightbox>
    <app-gallery-lightbox-media [gridMedia]="activePhoto ? activePhoto.gridPhoto : null"
                                [loadMedia]="!animating"
                                [zoom]="controls ? controls.Zoom : 1"
                                [drag]="controls ? controls.drag : {x:0,y:0}"
                                [windowAspect]="photoFrameDim.aspect"
                                #photo>
    </app-gallery-lightbox-media>
    <app-lightbox-controls
      #controls
      [activePhoto]="activePhoto"
      (closed)="hide()"
      [navigation]="navigation"
      (nextPhoto)="nextImage()"
      (previousPhoto)="prevImage()"
      (toggleInfoPanel)="toggleInfoPanel()"
      (toggleFullScreen)="toggleFullscreen()"
      [photoFrameDim]="photoFrameDim"
      [mediaElement]="mediaElement">
    </app-lightbox-controls>
  </div>

  <app-info-panel *ngIf="activePhoto && infoPanelVisible"
                  id="info-panel"
                  [style.width.px]="infoPanelWidth"
                  [media]="activePhoto.gridPhoto.media"
                  (closed)="hideInfoPanel()">

  </app-info-panel>
</div>