implementing zoom-in lightbox

frontend/app/gallery/lightbox/lightbox.gallery.component.css

@@ -1,10 +1,23 @@
-.lightboxCss{
+.lightbox {
     position: fixed; /* Stay in place */
     z-index: 1100; /* Sit on top */
     left: 0;
     top: 0;
     width: 0px; /* Full width */
     height: 0px; /* Full height */
-    background-color: #000066;
+    overflow: hidden;
-    overflow:hidden;
+    display: flex; /* add */
+    justify-content: center; /* add to align horizontal */
+    align-items: center; /* add to align vertical */
+    cursor: pointer;
+}
+.blackCanvas{
+    display: none;
+    position: fixed; /* Stay in place */
+    z-index: 1099; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    background-color: black;
 }

frontend/app/gallery/lightbox/lightbox.gallery.component.html

@@ -1,5 +1,11 @@
-<div class="lightboxCss"
+<div
-     #lightbox
+        (click)="hide()">
-     (click)="hide()" >
+    <div class="blackCanvas"
-    <img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" width="100%" height="100%"/>
+         #blackCanvas>
+
+    </div>
+    <div class="lightbox"
+         #lightbox>
+        <img [src]="getThumbnailPath()" [style.width]="photoStyle.width" [style.height]="photoStyle.height"/>
+    </div>
 </div>

frontend/app/gallery/lightbox/lightbox.gallery.component.ts

@@ -6,7 +6,7 @@ import {Directory} from "../../../../common/entities/Directory";
 import {Utils} from "../../../../common/Utils";
 import {IRenderable, Dimension} from "../../model/IRenderable";
 import {GalleryPhotoComponent} from "../photo/photo.gallery.component";
-import {AnimationBuilder} from "angular2/animate";
+import {AnimationBuilder, CssAnimationBuilder} from "angular2/animate";
 import {BrowserDomAdapter} from "angular2/src/platform/browser/browser_adapter";
 
 @Component({
@@ -17,15 +17,19 @@ import {BrowserDomAdapter} from "angular2/src/platform/browser/browser_adapter";
 export class GalleryLightboxComponent{
 
     @ViewChild('lightbox') lightBoxDiv:ElementRef;
+    @ViewChild('blackCanvas') blackCanvasDiv:ElementRef;
 
     private activePhoto:GalleryPhotoComponent  = null;
     public gridPhotoQL:QueryList<GalleryPhotoComponent>;
 
+    private dom:BrowserDomAdapter;
+    private photoStyle = {width:"100%",height:"100%"};
     
-    dom:BrowserDomAdapter;
     
     constructor(private animBuilder: AnimationBuilder) {
         this.dom = new BrowserDomAdapter();
+
+ 
     }
 
     public show(photo:Photo){
@@ -47,17 +51,38 @@ export class GalleryLightboxComponent{
 
         let from = this.activePhoto.getDimension();
         from.top -= this.getBodyScrollTop();
-        console.log(from);
-        let animation0 = this.animBuilder.css();
-        animation0.setDuration(0);
-        animation0.setToStyles(from.toStyle());
-        animation0.start(this.lightBoxDiv.nativeElement).onComplete(()=>{
 
-            let animation = this.animBuilder.css();
+
-            animation.setDuration(800);
+        if(from.height > from.width){
-            animation.setFromStyles(from.toStyle());
+            this.photoStyle.height = "100%";
-            animation.setToStyles({height: "100%", width: "100%", "top":"0px","left": "0px"});
+            this.photoStyle.width = "auto";
-            animation.start(this.lightBoxDiv.nativeElement);
+        }else{
+            this.photoStyle.height = "auto";
+            this.photoStyle.width = "100%";
+        }
+        
+        let anim0 = this.animBuilder.css();
+        anim0.setDuration(0);
+        anim0.setToStyles(from.toStyle());
+        anim0.start(this.lightBoxDiv.nativeElement).onComplete(()=>{
+
+            let anim1 = this.animBuilder.css();
+            anim1.setDuration(800);
+            anim1.setFromStyles(from.toStyle());
+            anim1.setToStyles({height: "100%", width: "100%", "top":"0px","left": "0px"});
+            anim1.start(this.lightBoxDiv.nativeElement);
+        });
+
+        let anim2 = this.animBuilder.css();
+        anim2.setDuration(0);
+        anim2.setToStyles({opacity:"0", display:"block"});
+        anim2.start(this.blackCanvasDiv.nativeElement).onComplete(()=>{
+
+            let anim3 = this.animBuilder.css();
+            anim3.setDuration(800);
+            anim3.setFromStyles({opacity:"0"});
+            anim3.setToStyles({opacity:"1"});
+            anim3.start(this.blackCanvasDiv.nativeElement);
         });
     }
 
@@ -66,17 +91,44 @@ export class GalleryLightboxComponent{
         let to = this.activePhoto.getDimension();
         to.top -= this.getBodyScrollTop();
 
-        let animation = this.animBuilder.css();
+        let anim0 = this.animBuilder.css();
-        animation.setDuration(800);
+        anim0.setDuration(800);
-        animation.setFromStyles({height: "100%", width: "100%", "top":"0px","left": "0px"});
+        anim0.setFromStyles({height: "100%", width: "100%", "top":"0px","left": "0px"});
-        animation.setToStyles(to.toStyle());
+        anim0.setToStyles(to.toStyle());
-        animation.start(this.lightBoxDiv.nativeElement).onComplete(()=>{
+        anim0.start(this.lightBoxDiv.nativeElement).onComplete(()=>{
-            let animation2 = this.animBuilder.css();
+            let anim1 = this.animBuilder.css();
-            animation2.setDuration(0);
+            anim1.setDuration(0);
-            animation2.setToStyles({height: "0px", width: "0px", "top":"0px","left": "0px"});
+            anim1.setToStyles({height: "0px", width: "0px", "top":"0px","left": "0px"});
-            animation2.start(this.lightBoxDiv.nativeElement);
+            anim1.start(this.lightBoxDiv.nativeElement);
             this.dom.setStyle(this.dom.query('body'), 'overflow', 'auto');
         });
+
+
+        let anim2 = this.animBuilder.css();
+        anim2.setDuration(800);
+        anim2.setFromStyles({opacity:"1"});
+        anim2.setToStyles({opacity:"0"});
+        anim2.start(this.blackCanvasDiv.nativeElement).onComplete(()=>{
+            let anim4 = this.animBuilder.css();
+            anim4.setDuration(0);
+            anim4.setToStyles({opacity:"0", display:"none"});
+            anim4.start(this.blackCanvasDiv.nativeElement);
+        });
+    }
+
+
+    getPhotoPath(){
+        if(!this.activePhoto){
+            return "";
+        }
+        return Photo.getPhotoPath(this.activePhoto.directory,this.activePhoto.photo); 
+    }
+
+    getThumbnailPath(){
+        if(!this.activePhoto){
+            return "";
+        }
+        return Photo.getThumbnailPath(this.activePhoto.directory,this.activePhoto.photo);
     }
     
     private getBodyScrollTop(){