When I click on the image from the gallery it doesn't preview the image and giving this error ERROR TypeError: Cannot read property 'split' of undefined at NgxGalleryService.getFileType.

Hi, previously using ngx-gallery here. After I updated my apps to Angular 9, swiping doesn't seem to work anymore.

I have tried adding this class to my app module config:

export class CustomHammerConfig extends HammerGestureConfig {
overrides = {
pinch: { enable: false },
rotate: { enable: false },
};
}

but doesn't seem to work either

Hi, Thank you very much for your effort.

I'm facing this error while compiling my Angular project. I'm using [email protected] and Angular 9

More details:
This likely means that the library (@kolkov/ngx-gallery) which declares NgxGalleryModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy

I know pressing the left/right arrows will make the carousel move, but swiping it to left/right doesn't do anything. I would like to suggest that the carousel moves on finger swipe, like how Bootstrap's carousel does. (I already set imageSwipe: true and it's still not doing the swipe on mobile.)

fetching images from a server and passing it to the images input property with async pipe causes typeError.

Temporary fix by mapping null to undefined

hi
thanx for you work, currently i'm trying to show images with base64, but i doesn't work (and i almost tried all suggestion from lukasz-galka repo

so, could you provide a working example so i could get what's wrong here?

i used : this.sanitizer.bypassSecurityTrustUrl and bypassSecurityTrustResourceUrl , none of them worked

The "thumbnailsSwipe" property has no effect. Swiping is not possible when I set it.

I would like to add custom class to <ngx-gallery-thumbnails> component, but it's not possible. I will work on this and open pull request.

How do I embed YouTube videos into the slider?

latest version is not supporting with .webp format of images..

its working with only jpeg jpg format

plz help me asap

i am waiting for any help

Hi, great work, very cool project.
the images don't display (the src is set to '#').
i am using firebase storage to host the images. the downloadurl generated does not have a 'jpg' extension.
I looked into the sourcecode and i saw that even if you specify type in the NgxGalleryImage (when passing in the gallery images), it gets overriden later on by NgxGalleryService .getFileType (fileSource: string): string { ...
https://github.com/kolkov/ngx-gallery/blob/9e91e810e65edfcefdf62130bd79681d4e8ac9cb/projects/gallery/src/lib/ngx-gallery.service.ts : line 60
If the type is explicitly specified, it should be respected, otherwise image ulrs that dont' have a predefined extension don't work (like in my case with firebase storage buckets) .

Hello!

I would like to know if any update is planned about this. (maybe this is already possible?)

Thats quite sad that we have to load the entire font-awesome.css instead of only the few icons the gallery need using FontAwesomeModule. In my current project, I have to import AND FontAwesomeModule AND font-awesome.css which is not really efficient.

Thanks in advance for ur answers, have a great day!

Currently the contribution guidelines returns a 404:

https://github.com/kolkov/ngx-gallery/blob/master/CONTRIBUTING.md

Any chance this can be updated please?

"postinstall": "ivy-ngcc"

failing with

Compiling @kolkov/ngx-gallery : fesm2015 as esm2015
No suitable injection token for parameter 'sanitization' of class 'NgxGalleryPreviewComponent'.
no type or decorator

Angular Version

Angular CLI: 8.3.20
Node: 10.15.3
OS: win32 x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.20
@angular-devkit/build-angular     0.803.20
@angular-devkit/build-optimizer   0.803.20
@angular-devkit/build-webpack     0.803.20
@angular-devkit/core              8.3.20
@angular-devkit/schematics        8.3.20
@angular/cli                      8.3.20
@angular/http                     7.2.15
@ngtools/webpack                  8.3.20
@schematics/angular               8.3.20
@schematics/update                0.803.20
rxjs                              6.5.3
typescript                        3.5.3
webpack                           4.39.2

Hi Kolkov,
I got this issue in SSR Build. could you look in to it and please give solution to fix this issue.

ERROR in ./node_modules/@kolkov/ngx-gallery/fesm2015/kolkov-ngx-gallery.js Module build failed (from ./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js): TypeError: Cannot read property 'kind' of undefined at isAngularDecoratorMetadataExpression (D:\PC Theme\galexia\node_modules\@angular-devkit\build-optimizer\src\transforms\scrub-file.js:265:35) at checkNodeForDecorators (D:\PC Theme\galexia\node_modules\@angular-devkit\build-optimizer\src\transforms\scrub-file.js:77:21) at visitNodes (D:\PC Theme\galexia\node_modules\typescript\lib\typescript.js:16631:30) at Object.forEachChild (D:\PC Theme\galexia\node_modules\typescript\lib\typescript.js:16859:24) at transformer (D:\PC Theme\galexia\node_modules\@angular-devkit\build-optimizer\src\transforms\scrub-file.js:63:16) at transformSourceFileOrBundle (D:\PC Theme\galexia\node_modules\typescript\lib\typescript.js:67384:57) at transformation (D:\PC Theme\galexia\node_modules\typescript\lib\typescript.js:83586:24) at transformRoot (D:\PC Theme\galexia\node_modules\typescript\lib\typescript.js:83606:82) at Object.map (D:\PC Theme\galexia\node_modules\typescript\lib\typescript.js:499:29) at Object.transformNodes (D:\PC Theme\galexia\node_modules\typescript\lib\typescript.js:83593:30) at emitJsFileOrBundle (D:\PC Theme\galexia\node_modules\typescript\lib\typescript.js:84089:32) at emitSourceFileOrBundle (D:\PC Theme\galexia\node_modules\typescript\lib\typescript.js:84043:13) at forEachEmittedFile (D:\PC Theme\galexia\node_modules\typescript\lib\typescript.js:83832:34) at Object.emitFiles (D:\PC Theme\galexia\node_modules\typescript\lib\typescript.js:84026:9) at emitWorker (D:\PC Theme\galexia\node_modules\typescript\lib\typescript.js:89951:33) at D:\PC Theme\galexia\node_modules\typescript\lib\typescript.js:89912:66

Is there any way to show a loading animation (for preview image and thumbnails) while waiting for full image to load?

I want to use custom icons, ideally Google's Material icons which are available here. But I'm falling at the first hurdle, I've added the required element into the options array, but the icons aren't updating.

I'm using the original stackblitz here, and altering the options from this:

      {
        width: '600px',
        height: '400px',
        thumbnailsColumns: 4,
        imageAnimation: NgxGalleryAnimation.Slide
      },

to this:

      {
        width: '600px',
        height: '400px',
        thumbnailsColumns: 4,
        arrowPrevIcon: "fa fa-arrow-circle-o-left",
        imageAnimation: NgxGalleryAnimation.Slide
      },

But nothing is happening. Can anyone point me in the right direction?

I changed to Angular 9 . It didn't work until I added this to the css (which I found from downloading your project). I think you should add this to the CSS documentation, since this is one of the few differences from the original gallery:

.ngx-gallery { display: inline-block; margin-bottom: 20px; }

I have read the doc and I don't see an option to view thumbnails on preview, similar to Facebook image gallery that pops up on
images sent in conversations like the one below

Image Source

There is already a thumbnail carousel for the normal gallery, but I want to hide the thumbnails on normal gallery and instead show the thumbnail carousel on the preview/popup on the bottom.

Does it already have a feature like that? Maybe I have missed it?

Hi, thanks for this great library, but I want to report an issue in which the gallery is not rendered in page when imageAutoPlay is set to true which is by default. Removing the imageAutoPlay property renders again the gallery.

This is my gallery option

this.galleryOptions = [
      {
        thumbnails: false,
        height: "150px",
        width: "100%",
        thumbnailsRows: 1,
        thumbnailsColumns: 1,
        preview: false,
        imageArrows: false,
        // imageAutoPlay: true,
        // imageAutoPlayPauseOnHover: true,
      }
    ];

I just wan t to make sure if this is currently supported in angular universal?

Animation works properly when serve in normal angular app but when I try to build it to angular universal gallery is missing.

Thanks again. any insights would be appreciated.

Hi,
Would it be possible to add an event emitter when the user rotates the preview ?
Sometinhg like : (event: Event, index: number, rotatevelue: number) => void

It would allow to get the rotatevalue in order to save the image.
Thank you !

good morning,

is there any way to load only the small images before?

and when you click on the image, yes, search for the larger image?

this makes my system very slow when loading the gallery.

@kolkov Hi! Can I submit some pull requests? Is this project alive? I like this gallery. It's sad if it died 😞

We store images by their md5 hashes, and do not include an extension.
the NgxGalleryService determines file type based on extension only, and does not show images this way.
In case the file type cannot be determined, a white box is shown, as both *ngIfs evaluate to false.

It would be great if the file types could be overridden manually in the image object, or the system would default to using an image if the file type cannot be determined

Hi,

I noticed the plugin uses position left in order to animate where it is sliding towards.

This is a bad way of animating a sliding effect as it is not hardware accelerated and therefore is slower and worse for performance.

Please use:
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateX
instead.

For more information see the answer talking about composite, layout and paint layers in web browsers in this thread:
https://stackoverflow.com/questions/7108941/css-transform-vs-position

For more in-depth information see this google page:
https://developers.google.com/web/fundamentals/performance/rendering

Here is a free course about the subject in case you are interested:
https://www.udacity.com/course/browser-rendering-optimization--ud860

Is there a plan or how could I achieve error handling when using image (big) downloaded from url? spinner just keeps spinning even if i,e, 404 or 500 error is returned from backend.

I don't want to use global interceptors, just to show error on particular image (i.e. image could be removed or not accessible anymore).

ngx-gallery v 1.2.0 was released a few days ago with more (or potentially new) support for videos, but some of the assumptions made around the source cause existing images to no longer display.

#23 (particularly changes in ngx-gallery.service.ts) assumes that all source urls will end in .{fileExtension} in order to be classified as images or videos. There are a decent number of sources that do not necessarily list the file extension in the URL (placem.at, S3 signed urls), instead denoting the content in the content-type header.

Reproduction: https://stackblitz.com/edit/kolkov-ngx-gallery-qz12a9
The third image in the gallery uses a placem.at url, which functions correctly in <= 1.1, but no longer functions in 1.2

Let me know if you need more info! Great component overall!

In the original library:

    /deep/ {

        * {
            box-sizing: border-box;
        }
  ...

In this library:

* {
  box-sizing: border-box;
}

This make global box-sizing change after open the gallery which causes some css issues.

Good Morning

this library is too much.

but I have found problems with the links

this.galleryImages.push (
{
small: https://xxxx,
medium: https://xxxx,
big: https://xxxx
}
);

this is because I need to pass a token authorization (bearer).

how can i solve this problem of mine?

appreciate

Hey @kolkov.
First of all.
Great job with this one! 🤝 🍻

I didn't find anything in README about a package which was I think your inspiration.
https://github.com/lukasz-galka/ngx-gallery
I think it's almost a copy of this project with an update to the new angular version.
I think it's worth to mention the original author and give some credits for him.

I know that the original package is probably abandoned but still most of the works have been done by him.

Hi, i've setted with and height in galleryoptions, say w400 and h600, but the gallery came always bigger (img are big), there is a way to force a fixed size and have images adapted?

thanks

npm WARN @kolkov/[email protected] requires a peer of tslib@^1.9.3 but none is installed. You must install peer dependencies yourself.

hello.. my friend.. please you can correct?

Hi,

I'm trying to add a video into the gallery by using the device's camera. I want to display the video in the gallery and at the same time in the background upload it to the cloud.

The issue I'm having is that my URL's look like this:

https://firebasestorage.googleapis.com/v0/b/mycoolappname.appspot.com/o/AAU%2Fperson-media%2F20201031_040941_uploadFile?alt=media&token=aafc5d4c8

Even when I set the URL (to something like newVideo.mkv or uploadedVideo.mp4) and the Type of the object I'm still not able to get the videos to play. The browser records MKV videos, which i'm able to play using a standard video tag:

But the gallery won't play them. Any ideas?

i, i've made a vertical thumbnails row of images with the same index of ngx-gallery, if i click on it using the methods showNext and ShowPrev works flawless, but if i use show(index), nothing happens. Any suggestions?

thanks

If I sort the array of galleryImages, the new sort order is not reflected in the gallery.

Calling .sort on the array has no effect, but calling .splice works as expected.

How can I rearrange the images in the array and have it be reflected in the gallery at runtime?

I am actually using an array of a custom type that extends NgxGalleryImage and contains a property that I'm using to set the sort order. So it's actually more like:

// [images] input of <ngx-gallery/> tag points to this.property.galleryItems, 
// which extends NgxGalleryImage
// sortingArray contains an array of integers used to determine the new sort order
// of the property.galleryItems array

this.property.galleryItems.sort((a, b) => {
      let aIndex = this.sortingArray.indexOf(a.galleryItemID);
      let bIndex = this.sortingArray.indexOf(b.galleryItemID);

      if (aIndex < bIndex) {
        return -1;
      } else if (aIndex == bIndex) {
        return 0;
      }

      return 1;
});

And this does not rearrange the images in the gallery as I would expect it to.

Why is it expecting an array? Why is it not just an object with key/value pairs?

I want to show base 64 video in ngx-gallery, but its not working. the base64 images are working fine. the issue is when I give base64 video url , the ngx is taking it as image. but if i give it as normal video path it is working.

Can someone help me with base64 video urls .

Mobile only:
I have HammerJs activated so that the slideshow changes on swipe left/right. But now I can't scroll up and down a page (swipe up/down) when I touch the slideshow. I have to click outside of the slideshow to do this, and my slideshow takes up most of the width of a mobile screen so it makes for a bad user experience.

https://firecloak.net/cosplay/ochaco-uraraka-schoolgirl-bnha
^ I have Bootstrap's carousel and ngx-gallery on this page.
Bootstrap's carousel lets you scroll up/down the page when clicking in the Bootstrap carousel area. When I try to scroll up/down on ngx-gallery, nothing happens.

I'm assuming you have to do some kind of touch or scroll event to accomplish this. Maybe HammerJs part limits it to swipe left/right, so we have to add another event for swipe up/down? (Actually I have no idea how this would be implemented.)

I want to achieve SEO alt text and image tag inside this gallery how to achieve it?

When I have the fullWidth option set to true, I receive a ExpressionChangedAfterItHasBeenCheckedError (in dev mode).

PropertyComponent.html:5 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'width: 100%'. Current value: 'width: 1266px'. at viewDebugError (core.js:28793) at expressionChangedAfterItHasBeenCheckedError (core.js:28770) at checkBindingNoChanges (core.js:29758) at checkNoChangesNodeInline (core.js:44443) at checkNoChangesNode (core.js:44416) at debugCheckNoChangesNode (core.js:45377) at debugCheckRenderNodeFn (core.js:45309) at Object.eval [as updateRenderer] (PropertyComponent.html:5) at Object.debugUpdateRenderer [as updateRenderer] (core.js:45294) at checkNoChangesView (core.js:44251)

When I try reproduce the example of .README file I get this error:

ERROR TypeError: "url is undefined"
    validateUrl kolkov-ngx-gallery.js:29
    getBackgroundUrl kolkov-ngx-gallery.js:38
    getSafeUrl kolkov-ngx-gallery.js:684
    View_NgxGalleryImageComponent_1 NgxGalleryImageComponent.html:7
    Angular 56
    RxJS 5
    Angular 9
NgxGalleryImageComponent.html:2:2
    View_NgxGalleryImageComponent_1 NgxGalleryImageComponent.html:2
    Angular 15
    RxJS 5
    Angular 9

My problem is related with validateUrl function used on:

I have a gallery with two images. When I click the thumbnail of first image, preview shows the next one (second image).
I thinks preview index is not aligned with the thumbnail one. Could you check please?

Here are my settings and code:

"dependencies": {
    "@angular/core": "~9.1.0",
    "@kolkov/ngx-gallery": "^1.0.11"
}

  ngOnInit() {
    this.galleryOptions = [
      {
        "thumbnails": false,
        "previewCloseOnClick": true,
        "previewCloseOnEsc": true,
        "width": "100%",
        "height": ""
      },
    ];
   ...
  }

private updateGalleryImages() {
    if (this.fullMeasurementProject && this.fullMeasurementProject.measurementProject) {
      const right = this.fullMeasurementProject.measurementProject.pictureRight;
      const left = this.fullMeasurementProject.measurementProject.pictureLeft;

      const smallWidth = 240;
      const mediumWidth = 480;

      this.galleryImages = [
        {
          small: this.measurementService.getImageUrl(right, smallWidth),
          medium: this.measurementService.getImageUrl(right, mediumWidth),
          big: this.measurementService.getImageUrl(right)
        },
        {
          small: this.measurementService.getImageUrl(left, smallWidth),
          medium: this.measurementService.getImageUrl(left, mediumWidth),
          big: this.measurementService.getImageUrl(left)
        }
      ]
    }
  }

The measurementService is not responsible for inversion.

I tried to change the border size and was unsuccessful, i declare in my angular project this:

In my Typescript component .ts

this.galleryOptions = [
{
// max-width +800
width: '100%',
height: '700px',
thumbnailsColumns: 4,
imageAnimation: NgxGalleryAnimation.Slide,
//imageAutoPlay: true,
imageAutoPlayInterval: 4000,
imageAutoPlayPauseOnHover: true,
preview: false,
thumbnailsPercent: 20,
thumbnailMargin: 10,
thumbnailClasses: ['ngx-gallery-custom']
},
// max-width 800
{
breakpoint: 800,
width: '100%',
height: '600px',
imagePercent: 80,
thumbnailsPercent: 20,
thumbnailsMargin: 20,
thumbnailMargin: 20
},
// max-width 400
{
width: '100%',
height: '350px',
breakpoint: 400,
preview: false,
}
];

In my .sass component

.ngx-gallery-custom
border: 5px double #000;

When a thumbnail is selected and another one is chosen (skipping exactly one previous image), the middle image (that was supposed to be "skipped") appears sliding (transitioning) in background.

This bug can be seen here:
https://kolkov-ngx-gallery.stackblitz.io/

When we select the last image (the bird) and then choose the clouds image, the third image appears scrolling from left to right.

I am using Angular 9 (9.0.0-rc.7) and ngx-gallery v.1.0.9.

Issue #218 from the older repo states a similar problem! (lukasz-galka/ngx-gallery#218), so I'm recreating it here!

There is any plans to add videos in the gallery?

Hi there.

I encountered one situation when I can't download an image from the preview using the previewDownload button. Trying to download sends me to a new tab with this image. I can assume that the fact is that the download attribute of a link that contains an image does not contain a link to the image. Could you take a look at this problem, I think it's a quick task for you.

Example:

<a _ngcontent-c34="" aria-hidden="true" class="ngx-gallery-icon ng-star-inserted" download="" href="https://...response-content-type=image%2Fjpeg">
   <i _ngcontent-c34="" class="ngx-gallery-icon-content fa fa-arrow-circle-down"></i>
</a>

There's a note in the docs for this attribute: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

Best regards,
Artur

No releases and pull requests pending from more than one year on all of "kolkov" projects.
Better search for another libraries or check who forked them.

galleryImages: NgxGalleryImage[];

 this.data.images.forEach((item) => {
    tempArray.push({
      small: String(item.src),
      medium: String(item.src),
      big: String(item.src),
    });
  });
  this.galleryImages = tempArray;

Note: item.src is a base64 string

Images are not shown

i am using ngx-gallery with angular 9.1.

i am fetching images from web services and building url attaching it like below:

this.service.getAllImages('5ef814a570f45211f5b2b508').subscribe((res: any) => {
      res.forEach(img => {
        this.galleryImages.push({
          small: `/api/image/get/${img.imageid}/sm`,
          medium: `/api/image/get/${img.imageid}/md`,
          big: `/api/image/get/${img.imageid}`
        });
      });

    });

once i move arrow on gallery it shows images otherwise totally blank.