Add photo gallery to member profile page

marvac · Jan 16, 2019 · 1534dec · 1534dec
1 parent fcf902a
commit 1534dec
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 1 deletion.
diff --git a/Client/package-lock.json b/Client/package-lock.json
diff --git a/Client/package.json b/Client/package.json
@@ -27,6 +27,7 @@
     "core-js": "^2.5.4",
     "font-awesome": "^4.7.0",
     "ngx-bootstrap": "^3.1.4",
+    "ngx-gallery": "^5.9.1",
     "rxjs": "^6.0.0",
     "zone.js": "^0.8.26"
   },

diff --git a/Client/src/app/app.module.ts b/Client/src/app/app.module.ts
@@ -4,6 +4,7 @@ import { HttpClientModule } from '@angular/common/http';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { JwtModule } from '@auth0/angular-jwt';
+import { NgxGalleryModule } from 'ngx-gallery';
 
 import { AppComponent } from './app.component';
 import { NavMenuComponent } from './components/nav-menu/nav-menu.component';
@@ -44,6 +45,7 @@ export function tokenGetter() {
     BrowserModule,
     HttpClientModule,
     FormsModule,
+    NgxGalleryModule,
     JwtModule.forRoot({
       config: {
         tokenGetter: tokenGetter,

diff --git a/Client/src/app/components/members/member-detail/member-detail.component.html b/Client/src/app/components/members/member-detail/member-detail.component.html
@@ -43,7 +43,7 @@ <h4>Interests</h4>
             <p>{{user.interests}}</p>
           </tab>
           <tab heading="Photos">
-            <p>Photos here</p>
+            <ngx-gallery [options]="galleryOptions" [images]="galleryImages"></ngx-gallery>
           </tab>
           <tab heading="Messages">
 

diff --git a/Client/src/app/components/members/member-detail/member-detail.component.ts b/Client/src/app/components/members/member-detail/member-detail.component.ts
@@ -3,6 +3,7 @@ import { User } from 'src/app/models/user';
 import { UserService } from 'src/app/services/user.service';
 import { AlertifyService } from 'src/app/services/alertify.service';
 import { ActivatedRoute } from '@angular/router';
+import { NgxGalleryOptions, NgxGalleryImage, NgxGalleryAnimation } from 'ngx-gallery';
 
 @Component({
   selector: 'app-member-detail',
@@ -11,6 +12,8 @@ import { ActivatedRoute } from '@angular/router';
 })
 export class MemberDetailComponent implements OnInit {
   user: User;
+  galleryOptions: NgxGalleryOptions[];
+  galleryImages: NgxGalleryImage[];
 
   constructor(
     private userService: UserService,
@@ -21,5 +24,32 @@ export class MemberDetailComponent implements OnInit {
     this.route.data.subscribe(data => {
       this.user = data['user'];
     });
+
+    this.galleryOptions = [
+      {
+        width: '500px',
+        height: '500px',
+        imagePercent: 100,
+        thumbnailsColumns: 4,
+        imageAnimation: NgxGalleryAnimation.Slide,
+        preview: false
+      }
+    ];
+
+    this.galleryImages = this.getImages();
+  }
+
+  getImages() {
+    const imageUrls = [];
+    for (let i = 0; i < this.user.photos.length; i++) {
+      imageUrls.push({
+        small: this.user.photos[i].url,
+        medium: this.user.photos[i].url,
+        big: this.user.photos[i].url,
+        description: this.user.photos[i].description
+      });
+    }
+
+    return imageUrls;
   }
 }