xuthus/pigallery2
1
0
Fork 0
mirror of https://github.com/xuthus83/pigallery2.git synced 2024-11-03 21:04:03 +08:00
Code Actions Projects Activity

implementing zoom-in lightbox

Browse Source
This commit is contained in:
Braun Patrik 2016-04-30 18:33:07 +02:00
parent f9481c9f6e
commit 5c8fe8f82b
3 changed files with 101 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/app/gallery/lightbox/lightbox.gallery.component.css
View File

@ -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;
}

14
frontend/app/gallery/lightbox/lightbox.gallery.component.html
View File

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

96
frontend/app/gallery/lightbox/lightbox.gallery.component.ts
View File

@ -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>;
dom:BrowserDomAdapter;
private dom:BrowserDomAdapter;
private photoStyle = {width:"100%",height:"100%"};
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);
animation.setFromStyles(from.toStyle());
animation.setToStyles({height: "100%", width: "100%", "top":"0px","left": "0px"});
animation.start(this.lightBoxDiv.nativeElement);
if(from.height > from.width){
this.photoStyle.height = "100%";
this.photoStyle.width = "auto";
}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();
animation.setDuration(800);
animation.setFromStyles({height: "100%", width: "100%", "top":"0px","left": "0px"});
animation.setToStyles(to.toStyle());
animation.start(this.lightBoxDiv.nativeElement).onComplete(()=>{
let animation2 = this.animBuilder.css();
animation2.setDuration(0);
animation2.setToStyles({height: "0px", width: "0px", "top":"0px","left": "0px"});
animation2.start(this.lightBoxDiv.nativeElement);
let anim0 = this.animBuilder.css();
anim0.setDuration(800);
anim0.setFromStyles({height: "100%", width: "100%", "top":"0px","left": "0px"});
anim0.setToStyles(to.toStyle());
anim0.start(this.lightBoxDiv.nativeElement).onComplete(()=>{
let anim1 = this.animBuilder.css();
anim1.setDuration(0);
anim1.setToStyles({height: "0px", width: "0px", "top":"0px","left": "0px"});
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(){