Some refactor

README.md

@@ -1,7 +1,9 @@
 # NgxGallery
 
 A simple native gallery component for Angular 10+.
-thumbnail for preview added.
+
+- Show thumbnail in preview mode.
+- Remove BrowserAnimationsModule from gallery package.
 
 ## Getting Started
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artavil/ngx-gallery",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "scripts": {
     "ng": "ng",
     "start": "ng serve --port 4202",

projects/gallery/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artavil/ngx-gallery",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "A simple responsive native gallery component for Angular 8+",
   "homepage": "https://github.com/AhmadPirzargar/ngx-gallery",
   "author": {

projects/gallery/src/lib/ngx-gallery-preview/ngx-gallery-preview.component.html

@@ -22,7 +22,8 @@
   <i class="ngx-gallery-icon ngx-gallery-spinner {{spinnerIcon}}" aria-hidden="true"></i>
 </div>
 <div class="ngx-gallery-preview-wrapper" (click)="closeOnClick && close()" (mouseup)="mouseUpHandler($event)"
-  (mousemove)="mouseMoveHandler($event)" (touchend)="mouseUpHandler($event)" (touchmove)="mouseMoveHandler($event)">
+  (mousemove)="mouseMoveHandler($event)" (touchend)="mouseUpHandler($event)" (touchmove)="mouseMoveHandler($event)"
+  [style.height.%]="previewThumbnail?screenWidth<768?65:80:100">
   <div class="ngx-gallery-preview-img-wrapper">
     <img *ngIf="src && type == 'image'" #previewImage class="ngx-gallery-preview-img ngx-gallery-center" [src]="src"
       (click)="$event.stopPropagation()" (mouseenter)="imageMouseEnter()" (mouseleave)="imageMouseLeave()"

projects/gallery/src/lib/ngx-gallery-preview/ngx-gallery-preview.component.scss

@@ -111,12 +111,11 @@ ngx-gallery-bullets {
 
 .ngx-gallery-preview-wrapper {
   width: 100%;
-  height: 80%;
   display: flex;
   flex-flow: column;
-  @media (max-width: 576px) {
-    height: 65%;
-  }
+  // @media (max-width: 768px) {
+  //   height: 65%;
+  // }
 }
 
 .ngx-gallery-preview-img-wrapper {
@@ -143,4 +142,10 @@ ngx-gallery-bullets {
   .selected {
     background-color: rgba(24, 152, 118, 0.3);
   }
+  @media (max-width: 992px) {
+    img {
+      height: 75px;
+      width: 75px;
+    }
+  }
 }

projects/gallery/src/lib/ngx-gallery-preview/ngx-gallery-preview.component.ts

@@ -5,6 +5,7 @@ import {
   ElementRef,
   EventEmitter,
   HostListener,
+  Inject,
   Input,
   OnChanges,
   OnDestroy,
@@ -38,7 +39,8 @@ export class NgxGalleryPreviewComponent implements OnInit, OnDestroy, OnChanges
   loading = false;
   rotateValue = 0;
   index = 0;
-
+  screenWidth;
+  screenHeight;
   @Input() images: string[] | SafeResourceUrl[];
   @Input() descriptions: string[];
   @Input() showDescription: boolean;
@@ -100,6 +102,7 @@ export class NgxGalleryPreviewComponent implements OnInit, OnDestroy, OnChanges
     if (this.arrows && this.arrowsAutoHide) {
       this.arrows = false;
     }
+    this.onResize();
   }
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -126,7 +129,11 @@ export class NgxGalleryPreviewComponent implements OnInit, OnDestroy, OnChanges
       this.arrows = false;
     }
   }
-
+  @HostListener('window:resize', ['$event'])
+  onResize(event?) {
+    this.screenHeight = window.innerHeight;
+    this.screenWidth = window.innerWidth;
+  }
   onKeyDown(e) {
     if (this.isOpen) {
       if (this.keyboardNavigation) {