self-hosted/pigallery2
1
0
Fork 0
mirror of https://github.com/bpatrik/pigallery2.git synced 2025-01-26 05:27:35 +02:00
Code Issues Releases Activity

implementing lightbox image navigation

Browse Source
This commit is contained in:
Braun Patrik 2016-05-12 23:00:38 +02:00
parent 33347dfd0c
commit 61ba450e04
5 changed files with 117 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
backend/middlewares/GalleryMWs.ts
View File

@ -52,6 +52,11 @@ export class GalleryMWs {
return next();
}
//check if thumbnail already exist
if (fs.existsSync(fullImagePath) === false) {
return next(new Error(ErrorCodes.GENERAL_ERROR, "no such file :" + fullImagePath));
}
req.resultPipe = fullImagePath;
return next();
}

2
backend/routes/GalleryRouter.ts
View File

@ -19,7 +19,7 @@ export class GalleryRouter {
private addDirectoryList() {
this.app.get(["/api/gallery/content/:directory(*)", "/api/gallery/", "/api/gallery//"],
// AuthenticationMWs.authenticate,
AuthenticationMWs.authenticate,
GalleryMWs.listDirectory,
RenderingMWs.renderResult
);

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

@ -21,12 +21,42 @@
height: 100%; /* Full height */
background-color: black;
}
img {
width: 100%;
height: 100%;
.imgContainer img {
position: absolute;
}
.imgContainer{
justify-content: center; /* add to align horizontal */
align-items: center; /* add to align vertical */
}
.navigation-arrow {
font-size: x-large;
width: 50%;
height: 100%;
position: static;
display: inline-block;
padding: 15px;
color: white;
opacity: 0.4;
}
.navigation-arrow span {
top: 50%;
}
.navigation-arrow:hover {
opacity: 1.0;
}
#navigation-arrow-container {
width: 100%;
height: 100%;
left: 0;
position: fixed;;
}
#rightArrow {
float: right;
text-align: right;
}

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

@ -1,15 +1,27 @@
<div
[hidden]="!activePhoto"
(click)="hide()">
<div class="blackCanvas"
#blackCanvas>
>
<div class="blackCanvas" #blackCanvas>
</div>
<div class="lightbox"
#lightbox>
<div class="imgContainer">
<img #thImage [src]="getThumbnailPath()" />
<img #image [src]="getPhotoPath()" style="position:absolute;"/>
</div>
</div>
</div>
<div class="lightbox" #lightbox>
<div #imgContainer class="imgContainer">
<img *ngIf="activePhoto"
[style.width.%]="imageSize.width"
[style.height.%]="imageSize.height"
[src]="activePhoto.gridPhoto.getThumbnailPath()"/>
<img *ngIf="activePhoto"
[style.width.%]="imageSize.width"
[style.height.%]="imageSize.height"
[src]="activePhoto.gridPhoto.getPhotoPath()"/>
</div>
<div id="navigation-arrow-container">
<div class="navigation-arrow" id="leftArrow" (click)="prevImage()"><span
class="glyphicon glyphicon-chevron-left"></span></div>
<div class="navigation-arrow" id="rightArrow" (click)="nextImage()"><span
class="glyphicon glyphicon-chevron-right"></span></div>
</div>
</div>
</div>

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

@ -16,9 +16,10 @@ export class GalleryLightboxComponent {
@ViewChild('lightbox') lightBoxDiv:ElementRef;
@ViewChild('blackCanvas') blackCanvasDiv:ElementRef;
@ViewChild('thImage') thIMageImg:ElementRef;
@ViewChild('image') imageImg:ElementRef;
@ViewChild('imgContainer') imgContainer:ElementRef;
public imageSize = {width: "auto", height: "100"};
private activePhoto:GalleryPhotoComponent = null;
public gridPhotoQL:QueryList<GalleryPhotoComponent>;
@ -31,6 +32,54 @@ export class GalleryLightboxComponent {
}
public nextImage() {
let pcList = this.gridPhotoQL.toArray();
for (let i = 0; i < pcList.length; i++) {
if (pcList[i] === this.activePhoto && i + 1 < pcList.length) {
this.activePhoto = pcList[i + 1];
let toImage = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo).toStyle();
this.forceAnimateFrom(toImage,
{},
this.imgContainer.nativeElement);
this.setImageSize();
return;
}
}
}
public prevImage() {
let pcList = this.gridPhotoQL.toArray();
for (let i = 0; i < pcList.length; i++) {
if (pcList[i] === this.activePhoto && i > 0) {
this.activePhoto = pcList[i - 1];
let toImage = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo).toStyle();
this.forceAnimateFrom(toImage,
{},
this.imgContainer.nativeElement);
this.setImageSize();
return;
}
}
}
private setImageSize() {
if (this.activePhoto.gridPhoto.photo.metadata.size.height > this.activePhoto.gridPhoto.photo.metadata.size.width) {
this.imageSize.height = "100";
this.imageSize.width = null;
} else {
this.imageSize.height = null;
this.imageSize.width = "100";
}
}
public show(photo:Photo) {
let selectedPhoto = this.findPhotoComponenet(photo);
if (selectedPhoto === null) {
@ -39,6 +88,7 @@ export class GalleryLightboxComponent {
this.dom.setStyle(this.dom.query('body'), 'overflow', 'hidden');
this.activePhoto = selectedPhoto;
this.setImageSize();
let from = this.activePhoto.getDimension();
@ -50,11 +100,7 @@ export class GalleryLightboxComponent {
this.forceAnimateFrom(fromImage,
toImage,
this.thIMageImg.nativeElement);
this.forceAnimateFrom(fromImage,
toImage,
this.imageImg.nativeElement);
this.imgContainer.nativeElement);
this.forceAnimateFrom(from.toStyle(),
{height: "100%", width: "100%", "top": "0px", "left": "0px"},
@ -94,11 +140,8 @@ export class GalleryLightboxComponent {
this.forceAnimateTo(fromImage,
toImage,
this.thIMageImg.nativeElement);
this.forceAnimateTo(fromImage,
toImage,
this.imageImg.nativeElement);
this.imgContainer.nativeElement);
}