thumbnails never are displayed (ng 14)

[AlonsoK28]

What is the expected behavior?

ngx-gallery is displayed correctly acoording live demos

What is the current behavior?

thumbnails never are displayed on my project and images has incorrect size

What are the steps to reproduce?

actually I use an static set of images (according your basic example https://stackblitz.com/edit/ngx-gallery) to display ngx-gallery component

template.html

        <gallery [items]="images" thumbPosition="left" [dots]="true"></gallery>

component.ts

 getImages() {
    const myImgData = [
      {
        srcUrl: 'https://preview.ibb.co/jrsA6R/img12.jpg',
        previewUrl: 'https://preview.ibb.co/jrsA6R/img12.jpg'
      },
      {
        srcUrl: 'https://preview.ibb.co/kPE1D6/clouds.jpg',
        previewUrl: 'https://preview.ibb.co/kPE1D6/clouds.jpg'
      },
      {
        srcUrl: 'https://preview.ibb.co/mwsA6R/img7.jpg',
        previewUrl: 'https://preview.ibb.co/mwsA6R/img7.jpg'
      },
      {
        srcUrl: 'https://preview.ibb.co/kZGsLm/img8.jpg',
        previewUrl: 'https://preview.ibb.co/kZGsLm/img8.jpg'
      }
    ];

    this.images = myImgData.map(item => new ImageItem({ src: item.srcUrl, thumb: item.previewUrl }));
  }

module.ts

import { GalleryModule } from 'ng-gallery';

imports: [
    // ... other modules ...
    GalleryModule,
    GalleryModule.withConfig({
      // thumbView: 'contain',
    }),

What is the use-case or motivation for changing an existing behavior?

none

Which versions are you using for the following packages?

Angular: 14.2.2
Angular CDK: ^14.2.1
Angular CLI: ~14.2.2
Typescript: ~4.7.2
Gallery: ^7.0.4

Is there anything else we should know?

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 14.2.2
Node: 16.15.0
Package Manager: npm 8.5.5
OS: win32 x64

Angular: 14.2.1
... animations, cdk, common, compiler, compiler-cli, core, forms
... material, platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1402.2
@angular-devkit/build-angular   14.2.2
@angular-devkit/core            14.2.2
@angular-devkit/schematics      14.2.2
@angular/cli                    14.2.2
@angular/fire                   7.4.1
@angular/flex-layout            14.0.0-beta.40
@schematics/angular             14.2.2
rxjs                            7.5.5
typescript                      4.7.3

[MurhafSousli]

Please add a stackblitz reproduction!

[AlonsoK28]

Please add a stackblitz reproduction!

here is an example of this issue https://stackblitz.com/github/AlonsoK28/image-repo-example?file=README.md

[AlonsoK28]

@MurhafSousli any update of this 😏

[MurhafSousli]

This is a bug when hammerjs is not installed, it was introduced in v7, for now install hammerjs npm i hammerjs then import it in the polyfill.ts import 'hammerjs';

If you don't want to install hammerjs, use ng-gallery@6 by the time we fix it