add image gallery zoom component

package.json

@@ -22,6 +22,7 @@
     "@angular/router": "~9.1.7",
     "bootstrap": "^4.5.3",
     "ng-particles": "^2.1.11",
+    "ngx-image-gallery": "^2.0.5",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",
     "zone.js": "~0.10.2"

src/app/app.module.ts

@@ -2,6 +2,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http';
 import { NgParticlesModule } from "ng-particles";
+import { NgxImageGalleryModule } from 'ngx-image-gallery';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -24,6 +25,7 @@ import { DetailComponent } from './detail/detail.component';
     BrowserModule,
     AppRoutingModule,
     NgParticlesModule,
+    NgxImageGalleryModule,
     HttpClientModule
   ],
   providers: [],

src/app/detail/detail.component.html

@@ -6,13 +6,13 @@
 
 
       <div class="row no-gutters gallery" *ngIf="details.gallery && details.gallery.length">
-        <div class="col-12" *ngFor="let image of details.gallery"
-             [ngClass]="{'col-md-6': details.gallery.length < 4 && (details.gallery.length % 3) == 2,
+        <div class="col-12" *ngFor="let image of details.gallery; let i = index"
+             [ngClass]="{'col-md-4': details.gallery.length < 4 && (details.gallery.length % 3) == 2,
                           'col-md-12': details.gallery.length < 4 && (details.gallery.length % 3) == 1,
-                          'col-md-4': details.gallery.length >= 3}">
+                          'col-md-3': details.gallery.length >= 3}">
           <div class="gallery-container">
             <span class="gallery-title">{{image.title}}</span>
-            <img class="image" [src]="image.url">
+            <img class="image" [src]="image.url" (click)="openGallery(i)">
           </div>
         </div>
       </div>
@@ -57,3 +57,14 @@
       </span>
   </div>
 </div>
+
+
+<ngx-image-gallery
+[images]="galleryImages"
+[conf]="conf"
+(onOpen)="galleryOpened($event)"
+(onClose)="galleryClosed()"
+(onImageClicked)="galleryImageClicked($event)"
+(onImageChange)="galleryImageChanged($event)"
+(onDelete)="deleteImage($event)"
+></ngx-image-gallery>

src/app/detail/detail.component.scss

@@ -64,6 +64,13 @@
           width: 100%;
           height: 100%;
           object-fit: cover;
+          cursor: pointer;
+          transition: transform .4s;
+
+          &:hover {
+            transform: scale(1.2) rotate(1deg);
+            z-index: 10;
+          }
         }
       }
     }

src/app/detail/detail.component.ts

@@ -1,7 +1,8 @@
-import { Component, OnInit } from '@angular/core'
+import { Component, OnInit, ViewChild } from '@angular/core'
 import { Router, NavigationEnd, NavigationStart, ActivatedRoute } from '@angular/router'
 import { DomSanitizer } from '@angular/platform-browser'
 import { Location } from '@angular/common'
+import { NgxImageGalleryComponent, GALLERY_IMAGE, GALLERY_CONF } from "ngx-image-gallery"
 import { ApisService } from '../services/apis.service'
 
 @Component({
@@ -11,11 +12,21 @@ import { ApisService } from '../services/apis.service'
 })
 export class DetailComponent implements OnInit {
 
+  @ViewChild(NgxImageGalleryComponent) ngxImageGallery: NgxImageGalleryComponent
+
   public details: any = {}
   public section: string = ''
   public id: number = 0
   private history: string[] = []
 
+  public conf: GALLERY_CONF = {
+    imageOffset: '0px',
+    showDeleteControl: false,
+    showImageTitle: false,
+  }
+
+  public galleryImages: GALLERY_IMAGE[] = []
+
   constructor(
     private apisService: ApisService,
     private router: Router,
@@ -43,6 +54,15 @@ export class DetailComponent implements OnInit {
         e.embed = this.sanitizer.bypassSecurityTrustResourceUrl(`https://www.youtube.com/embed/${e.code}`)
       })
       detail.gallery = detail.gallery ? JSON.parse(detail.gallery) : []
+
+      detail.gallery.forEach((e) => {
+        this.galleryImages.push({
+          url: e.url,
+          altText: e.title,
+          title: e.title,
+          thumbnailUrl: e.url
+        })
+      })
       this.details = detail
       console.log(response.item)
 
@@ -65,4 +85,70 @@ export class DetailComponent implements OnInit {
       this.location.back()
     }
   }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  openGallery(index: number = 0) {
+    this.ngxImageGallery.open(index);
+  }
+
+  // close gallery
+  closeGallery() {
+    this.ngxImageGallery.close();
+  }
+
+  // set new active(visible) image in gallery
+  newImage(index: number = 0) {
+    this.ngxImageGallery.setActiveImage(index);
+  }
+
+  // next image in gallery
+  nextImage(index: number = 0) {
+    this.ngxImageGallery.next();
+  }
+
+  // prev image in gallery
+  prevImage(index: number = 0) {
+    this.ngxImageGallery.prev();
+  }
+
+  /**************************************************/
+
+  // EVENTS
+  // callback on gallery opened
+  galleryOpened(index) {
+    console.info('Gallery opened at index ', index);
+  }
+
+  // callback on gallery closed
+  galleryClosed() {
+    console.info('Gallery closed.');
+  }
+
+  // callback on gallery image clicked
+  galleryImageClicked(index) {
+    console.info('Gallery image clicked with index ', index);
+  }
+
+  // callback on gallery image changed
+  galleryImageChanged(index) {
+    console.info('Gallery image changed to index ', index);
+  }
+
+  // callback on user clicked delete button
+  deleteImage(index) {
+    console.info('Delete image at index ', index);
+  }
 }

src/app/portfolio/portfolio.component.scss

@@ -92,13 +92,6 @@
     @each $angle in 0,1,2,3,4,5,6 {
       &.skew-#{$angle} {
         transform: skew(#{$angle - 3}deg, #{$angle - 3}deg);
-        /*animation: zoom#{$angle} #{$angle + 3}s ease-in infinite forwards;
-        @keyframes zoom#{$angle} {
-          0% { transform: scale(1) skew(#{$angle - 3}deg, #{$angle - 3}deg); }
-          50% { transform: scale(1.1) skew(#{$angle - 3}deg, #{$angle - 3}deg); }
-          75% { transform: scale(.9) skew(#{$angle - 3}deg, #{$angle - 3}deg); }
-          100% { transform: scale(1) skew(#{$angle - 3}deg, #{$angle - 3}deg); }
-        }*/
       }
     }