lukasz-galka/ngx-gallery

Angular image gallery plugin

ngx-gallery's Issues

Handle next and previus events

I'm trying to use the gallery but I can't run the next() or Previus() events. Could you tell me please how to use them with angular ?

Guide in usage has some errors

app.component.ts
I think we should import "OnInit" from '@angular/core' not from 'ngx-gallery'

angular universal

it not support angular universal

Error: Cannot find module 'ngx-gallery'

Slide problem

Slide should be only horizontal not vertical.
in terms of mobile, scroll is not working when I touched to scroll down on ngx-gallery.

how to make full screen when using inner component.

Dunno is this question has a weight , but

how to make full screen when using inner component.
In may app situation is like

 AppModule
      Sub Module   router outlet is here that restricting
           MainComponent
           Gallery  Component ngx-gallery is in this component view 

Close on click on overlay

Image galleries are typically navigated by opening an image and quickly closing it by pressing the close button, pressing ESC or clicking on the overlay. An option to close the image(preview) is not available AFAIK - correct me if I'm wrong.

btw: closing on overlay-click is not always preferred, so it could be a config option.

Show all image grid like 10 x 15 images

I need to create something like this http://oidamo.de/angular2-image-gallery/ but this one uses needs node command to be run before the it works i.e. doesn't work for dynamic images.

Is there a way to show just all the images as a grid i.e. if I have 150 images, show the grid of 10 x 15?

If not, is there is a way to invoke the method directly to open the modal? For example if I build custom grid using bootstrap, but when user click the image, invoke the function like select(5) { where 5 is index of image clicked. In this case component ngx-gallery will be there, but just hidden.

Super urgent, so yes or no question might be extremely helpful.

Ability to watch for changes

Hello,
Instead of having to inject the gallery component into my parent component, and appending

                                this.gallery.smallImages = this.galleryImages.map(img => img.small);
                                this.gallery.mediumImages = this.galleryImages.map(img => img.medium);
                                this.gallery.bigImages = this.galleryImages.map(img => img.big);
                                this.gallery.descriptions = this.galleryImages.map(img => img.description);

each time I update my gallery images, it would be nice if the component has a lifecycle hook "ngOnChanges."

StackOverflow for rationale: http://stackoverflow.com/questions/43742024/dynamic-images-with-angular-and-ngx-gallery?noredirect=1#comment74528706_43742024

Is it possible to incorporate index in the Images array ?

Thanks for the great Repo, just a suggestion if its possible to incorporate index in the Images array to load the default image on that particular index and not the first one always ?

Using Blob or SafeResourceUrl images

Hello, i'm stuck with displaying images with SafeResourceURL or Blob images, i don't have a direct link to the image like 'https://example.com/image.png', because i need to get an image from the API using several headers in the request

Please leave an example or describe how can i show gallery with that images

Preview needs to be based on fullsize of window.

The preview height is based on document height not window height.

If height is more than window's height as scroll, the positions of preview is wrong.

Could you fix it ?

AOT

Hi!

Very nice library and it works great in my application.
However when I try to build my webpack application with AOT, I receive the following message:

Module not found: Error: Can't resolve 'ngx-gallery/ngx-gallery.module' in '/Users/christophe/Projects/find-out/platform/src/www/.tmp/app' at factoryCallback (/Users/christophe/Projects/find-out/platform/node_modules/webpack/lib/Compilation.js:264:39) at factory (/Users/christophe/Projects/find-out/platform/node_modules/webpack/lib/NormalModuleFactory.js:247:20) at resolver (/Users/christophe/Projects/find-out/platform/node_modules/webpack/lib/NormalModuleFactory.js:65:21) at asyncLib.parallel.e (/Users/christophe/Projects/find-out/platform/node_modules/webpack/lib/NormalModuleFactory.js:138:21) at /Users/christophe/Projects/find-out/platform/node_modules/async/dist/async.js:3861:9 at /Users/christophe/Projects/find-out/platform/node_modules/async/dist/async.js:421:16 at iteratorCallback (/Users/christophe/Projects/find-out/platform/node_modules/async/dist/async.js:996:13) at /Users/christophe/Projects/find-out/platform/node_modules/async/dist/async.js:906:16 at /Users/christophe/Projects/find-out/platform/node_modules/async/dist/async.js:3858:13 at resolvers.normal.resolve (/Users/christophe/Projects/find-out/platform/node_modules/webpack/lib/NormalModuleFactory.js:130:23) at onError (/Users/christophe/Projects/find-out/platform/node_modules/enhanced-resolve/lib/Resolver.js:65:10) at loggingCallbackWrapper (/Users/christophe/Projects/find-out/platform/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19) at afterInnerCallback (/Users/christophe/Projects/find-out/platform/node_modules/enhanced-resolve/lib/Resolver.js:146:10) at loggingCallbackWrapper (/Users/christophe/Projects/find-out/platform/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19) at Resolver.applyPluginsAsyncSeriesBailResult1 (/Users/christophe/Projects/find-out/platform/node_modules/tapable/lib/Tapable.js:181:46) at innerCallback (/Users/christophe/Projects/find-out/platform/node_modules/enhanced-resolve/lib/Resolver.js:133:19) at loggingCallbackWrapper (/Users/christophe/Projects/find-out/platform/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19) at /Users/christophe/Projects/find-out/platform/node_modules/tapable/lib/Tapable.js:283:15 at /Users/christophe/Projects/find-out/platform/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:40:4 at loggingCallbackWrapper (/Users/christophe/Projects/find-out/platform/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19) at afterInnerCallback (/Users/christophe/Projects/find-out/platform/node_modules/enhanced-resolve/lib/Resolver.js:146:10) at loggingCallbackWrapper (/Users/christophe/Projects/find-out/platform/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19) at Resolver.applyPluginsAsyncSeriesBailResult1 (/Users/christophe/Projects/find-out/platform/node_modules/tapable/lib/Tapable.js:181:46) at innerCallback (/Users/christophe/Projects/find-out/platform/node_modules/enhanced-resolve/lib/Resolver.js:133:19) at loggingCallbackWrapper (/Users/christophe/Projects/find-out/platform/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19) at /Users/christophe/Projects/find-out/platform/node_modules/tapable/lib/Tapable.js:283:15 at innerCallback (/Users/christophe/Projects/find-out/platform/node_modules/enhanced-resolve/lib/Resolver.js:131:11) at loggingCallbackWrapper (/Users/christophe/Projects/find-out/platform/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19) at /Users/christophe/Projects/find-out/platform/node_modules/tapable/lib/Tapable.js:283:15 at resolver.doResolve.createInnerCallback (/Users/christophe/Projects/find-out/platform/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:44:6) resolve 'ngx-gallery/ngx-gallery.module' in '/Users/christophe/Projects/find-out/platform/src/www/.tmp/app' Parsed request is a module using description file: /Users/christophe/Projects/find-out/platform/package.json (relative path: ./src/www/.tmp/app) Field 'browser' doesn't contain a valid alias configuration after using description file: /Users/christophe/Projects/find-out/platform/package.json (relative path: ./src/www/.tmp/app) resolve as module looking for modules in /Users/christophe/Projects/find-out/platform/node_modules using description file: /Users/christophe/Projects/find-out/platform/package.json (relative path: ./node_modules) Field 'browser' doesn't contain a valid alias configuration after using description file: /Users/christophe/Projects/find-out/platform/package.json (relative path: ./node_modules) using description file: /Users/christophe/Projects/find-out/platform/node_modules/ngx-gallery/package.json (relative path: ./ngx-gallery.module) no extension Field 'browser' doesn't contain a valid alias configuration /Users/christophe/Projects/find-out/platform/node_modules/ngx-gallery/ngx-gallery.module doesn't exist .ts Field 'browser' doesn't contain a valid alias configuration /Users/christophe/Projects/find-out/platform/node_modules/ngx-gallery/ngx-gallery.module.ts doesn't exist .js Field 'browser' doesn't contain a valid alias configuration /Users/christophe/Projects/find-out/platform/node_modules/ngx-gallery/ngx-gallery.module.js doesn't exist .json Field 'browser' doesn't contain a valid alias configuration /Users/christophe/Projects/find-out/platform/node_modules/ngx-gallery/ngx-gallery.module.json doesn't exist as directory /Users/christophe/Projects/find-out/platform/node_modules/ngx-gallery/ngx-gallery.module doesn't exist looking for modules in /Users/christophe/Projects/find-out/platform/node_modules/node_modules using description file: /Users/christophe/Projects/find-out/platform/package.json (relative path: ./node_modules/node_modules) Field 'browser' doesn't contain a valid alias configuration after using description file: /Users/christophe/Projects/find-out/platform/package.json (relative path: ./node_modules/node_modules) using description file: /Users/christophe/Projects/find-out/platform/package.json (relative path: ./node_modules/node_modules/ngx-gallery/ngx-gallery.module) no extension Field 'browser' doesn't contain a valid alias configuration /Users/christophe/Projects/find-out/platform/node_modules/node_modules/ngx-gallery/ngx-gallery.module doesn't exist .ts Field 'browser' doesn't contain a valid alias configuration /Users/christophe/Projects/find-out/platform/node_modules/node_modules/ngx-gallery/ngx-gallery.module.ts doesn't exist .js Field 'browser' doesn't contain a valid alias configuration /Users/christophe/Projects/find-out/platform/node_modules/node_modules/ngx-gallery/ngx-gallery.module.js doesn't exist .json Field 'browser' doesn't contain a valid alias configuration /Users/christophe/Projects/find-out/platform/node_modules/node_modules/ngx-gallery/ngx-gallery.module.json doesn't exist as directory /Users/christophe/Projects/find-out/platform/node_modules/node_modules/ngx-gallery/ngx-gallery.module doesn't exist looking for modules in /Users/christophe/Projects/find-out/platform/src/www using description file: /Users/christophe/Projects/find-out/platform/package.json (relative path: ./src/www) Field 'browser' doesn't contain a valid alias configuration after using description file: /Users/christophe/Projects/find-out/platform/package.json (relative path: ./src/www) using description file: /Users/christophe/Projects/find-out/platform/package.json (relative path: ./src/www/ngx-gallery/ngx-gallery.module) no extension Field 'browser' doesn't contain a valid alias configuration /Users/christophe/Projects/find-out/platform/src/www/ngx-gallery/ngx-gallery.module doesn't exist .ts Field 'browser' doesn't contain a valid alias configuration /Users/christophe/Projects/find-out/platform/src/www/ngx-gallery/ngx-gallery.module.ts doesn't exist .js Field 'browser' doesn't contain a valid alias configuration /Users/christophe/Projects/find-out/platform/src/www/ngx-gallery/ngx-gallery.module.js doesn't exist .json Field 'browser' doesn't contain a valid alias configuration /Users/christophe/Projects/find-out/platform/src/www/ngx-gallery/ngx-gallery.module.json doesn't exist as directory /Users/christophe/Projects/find-out/platform/src/www/ngx-gallery/ngx-gallery.module doesn't exist

Has this module been tested with AOT? Without AOT (but still with webpack) it works without a problem.

ngx-gallery with aot build

Hi.
I use the component with webpack and AOT build. The scss not working. JIT build is ok.
Can you help me?

When clicking an image, the overlay isn't the full height of the screen.

Maybe a possible conflict with angular material?

ngx-gallery without angular-cli

Hello, I have a problem with the new version. In version 1.0.0 to import the library I indicated the path of the file with the extension "umd.js" in the file systemjs.config.js, but in the new version 1.1.0, this file does not exist and I can not import " Ngx-gallery ".
How should I import the lib? Bearing in mind that I do not use "angular-cli".

Using the same "Big" image prevents the preview from paging correctly

using the example this.galleryImages but editing it as shown below prevents the large image preview from loading the other images when pressing the left or right arrow:

this.galleryImages = [
  {
    small: 'https://placehold.it/900x696',
    medium: 'https://placehold.it/900x696',
    big: 'https://placehold.it/900x696'
  },
  {
    small: 'https://placehold.it/900x696',
    medium: 'https://placehold.it/900x696',
    big: 'https://placehold.it/900x696'
  },
  {
    small: 'https://placehold.it/900x696',
    medium: 'https://placehold.it/900x696',
    big: 'https://placehold.it/900x696'
  }
];

image mode on the phone

when click image to see image mode on the phone, it loads image in the middle of the screen ,that means i can not see image until i scroll it down.

Easy to click preview mode when slide.

Could you fix to run preview mode when I only click not swipe ?

I just tried sliding to see next slide of pictures, but preview is also running.

nglint fix

Hola man!
Please fix lint, cant push to develop, tnx
$ ng lint
Your global Angular CLI version (1.0.3) is greater than your local
version (1.0.0-rc.2). The local Angular CLI version is used.

To disable this warning use "ng set --global warnings.versionMismatch=false".

/node_modules/ngx-gallery/lib/ngx-gallery-preview.component.ts[14, 18]: Type boolean trivially inferred from a boolean literal, remove type annotation
/node_modules/ngx-gallery/lib/ngx-gallery-preview.component.ts[26, 20]: Type number trivially inferred from a number literal, remove type annotation
/node_modules/ngx-gallery/lib/ngx-gallery-preview.component.ts[28, 21]: Type boolean trivially inferred from a boolean literal, remove type annotation
/node_modules/ngx-gallery/lib/ngx-gallery-preview.component.ts[6, 15]: The selector of the component "NgxGalleryPreviewComponent" should have prefix "app" (https://goo.gl/cix8BY)
/node_modules/ngx-gallery/lib/ngx-gallery-animation.model.ts[2, 18]: Type string trivially inferred from a string literal, remove type annotation
/node_modules/ngx-gallery/lib/ngx-gallery-animation.model.ts[3, 19]: Type string trivially inferred from a string literal, remove type annotation
/node_modules/ngx-gallery/lib/ngx-gallery-animation.model.ts[4, 20]: Type string trivially inferred from a string literal, remove type annotation
/node_modules/ngx-gallery/lib/ngx-gallery-animation.model.ts[5, 18]: Type string trivially inferred from a string literal, remove type annotation
/node_modules/ngx-gallery/lib/ngx-gallery-image-size.model.ts[2, 19]: Type string trivially inferred from a string literal, remove type annotation
/node_modules/ngx-gallery/lib/ngx-gallery-image-size.model.ts[3, 21]: Type string trivially inferred from a string literal, remove type annotation
/node_modules/ngx-gallery/lib/ngx-gallery.component.ts[26, 22]: Type number trivially inferred from a number literal, remove type annotation
/node_modules/ngx-gallery/lib/ngx-gallery.component.ts[28, 20]: Type number trivially inferred from a number literal, remove type annotation
/node_modules/ngx-gallery/lib/ngx-gallery.component.ts[11, 15]: The selector of the component "NgxGalleryComponent" should have prefix "app" (https://goo.gl/cix8BY)
/node_modules/ngx-gallery/lib/ngx-gallery-arrows.component.ts[4, 15]: The selector of the component "NgxGalleryArrowsComponent" should have prefix "app" (https://goo.gl/cix8BY)
node_modules/ngx-gallery/lib/ngx-gallery-image.component.ts[6, 15]: The selector of the component "NgxGalleryImageComponent" should have prefix "app" (https://goo.gl/cix8BY)
/node_modules/ngx-gallery/lib/ngx-gallery-thumbnails.component.ts[7, 15]: The selector of the component "NgxGalleryThumbnailsComponent" should have prefix "app" (https://goo.gl/cix8BY)

Infinity scroll/slide

Hi.
How i can to set option to scrolling main/thumb images infinitely?

'Implicity has an any' error when following sample code

I'm following the sample code on the main page, and I'm getting
node_modules/ngx-gallery/lib/ngx-gallery.component.ts(175,28): error TS7006: Parameter 'first' implicitly has an 'any' type
.
node_modules/ngx-gallery/lib/ngx-gallery.component.ts(175,35): error TS7006: Parameter 'second' implicitly has an 'any
Alas I'm very new to Angular2/4 and not sure what's going on. Is this an Angular4 thing? I'm developing with Angular2.

ngx-gallery on Angular4

Hi,

Tried to install (npm install ngx-gallery --save) into the project with the following versions of angular:
"@angular/common": "4.1.2", "@angular/compiler": "4.1.2", "@angular/core": "4.1.2", .....

It complained with the following error:
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
`-- [email protected]

Am I right assuming that the ngx-gallery is compatible only with Angular 2?

breakpoint destroys settings

Hello,

I've been using your gallery for my project, and it works great!

I've noticed that

  this.galleryOptions = [
      {
         breakpoint: 800
      }
];

doesn't work. In fact, when combined with other settings, none of them apply.

Can't change default width and height

Hi, Lukasz
I can't find a way to change the default width and height. No matter what number I change the pixel for both parameters, they won't change anything in browser.
this.galleryOptions = [
{
"previewFullscreen": true,
"imageArrowsAutoHide": true,
},
{
"breakpoint": 500,
"width": "800px", <---------I tried to change all these numbers
"height": "600px", <---------I tried to change all these numbers
"thumbnailsColumns": 5
},
{
"breakpoint": 300,
"width": "100%", <--------I tried to change all these numbers
"height": "800px", <--------I tried to change all these numbers
"thumbnailsColumns": 4
}
];

But nothing happened, the size stays as default.
Meanwhile, is it possible to make the whole gallery auto resizeable when the browser size changed? Otherwise if the browser is very small and the gallery will overflow since it is fixed size. Many thanks in advance.

Thumbnails in preview

Is it possible to have thumbnails in the preview as well ?

Arrow Color

How to change the arrow color ?

How can i get an image?

I am new to angular development. I am trying to figure in your code, if there is a way to get the index and the images array. or an onclick event that can return me the image object of the selected image.

If there is an easy way to do it let me know. If not, please point me towards where i need to add stuff.

btw great work with the gallery!

Looking forward to your reply

Apply 'Contain' To Thumbnails Background-Size?

First, let me thank you for this excellent carousel.

Do you have any suggestions on how to apply the contain value to the background of the thumbnails? Is that even doable? I have a library of thumbnails that are of inconsistent size (but all of them 120px or less).

CSS is not my forte so any assistance would be appreciated.

Override Component CSS Class Z-Index

The .ngx-gallery-image.ngx-gallery-active CSS class sets the preview image div to a z-index of 1000. Unfortunately, another third-party library we're using also sets their look-ahead search component to the same index and in the collision the search dropdown loses. It needs to win so I need to either reduce or eliminate this property altogether.

Any suggestions on how to override this class?

Possible to add auto sliding?

Hi

Is it possible to add an option to auto sliding of the images?

Thanks.

how to add images dynamically for *ngfor loop

how to create multiple gallery in *ngfor loop in angular 2 project

¿How can i load images from a server? Async

I'm trying to load images from another server vía service, but i cant.
Is there any way to do this?

Support other icons

Currently this project support font awesome. Its a great icon library, but doesn't fit each and every design. Its a pity if your project is based on a different icon library (i.e. Material Icons, spectre.css, etc.) that the icons for this project are fixed.

Most modern icon frameworks depend on using class names for the elements, similar to Font Awesome. Therefor there's not a big point in only supporting Font Awesome. The classnames could be easily passed in a configuration, i.e.:
nextIconPreview: 'fa fa-arrow-circle-right'

The current implementation of this project seems to add additional style rules on the existing fa classes, that should be changed (imho) so that the position (and rotation) of the buttons are decoupled from the icons.

Remaining thumbnails count

Hi, thanks for your awesome component.
I have one feature request. Is it possible to add remaining thumbnails count?
For example: I have 10 pics and I configured that I want to see 3 thumbnails. I don't want to show slider arrows for thumbnails, but I want to see how many picts remaining. For this I want to show label "+6" on the last thumbnail. And when i click to last thumbnail modal picture opens. And one more thing, clicking on any thumbnail opens modal image also.
Thank you.

Setting for closing full-image preview by clicking on black wrapper

Hello, thanks for awesome plugin!
I need to closing preview by clicking on preview wrapper, is there a setting to do this?

Configure Thumbnail Arrow Interval

First, let me thank you for getting this fixed for SystemJS.

Is there a way to set the interval on the thumbnail arrows? For example, say I have a five thumbnail row. When I click on the arrow, I'd like it to go to the next five images rather than one at a time. Thoughts?

Pause Image Autoplay

Hello,

First, this is a great feature. Thank you for it.

I want to use imageAutoPlay, but I want also to pause it, when I am mouseover the current image, is this possible?

Thank you.
Have a good day,
Paul.

Unexpected value 'undefined' exported by the module 'NgxGalleryModule'

I got this on an Angular 4.4.3 app. [email protected]

Any idea what the fix for this would be?

Uncaught Error: Unexpected value 'undefined' exported by the module 'NgxGalleryModule'
at syntaxError (compiler.es5.js?524d:1694)
at eval (compiler.es5.js?524d:15556)
at Array.forEach ()
at CompileMetadataResolver.getNgModuleMetadata (compiler.es5.js?524d:15554)
at CompileMetadataResolver.getNgModuleSummary (compiler.es5.js?524d:15467)
at eval (compiler.es5.js?524d:15540)
at Array.forEach ()
at CompileMetadataResolver.getNgModuleMetadata (compiler.es5.js?524d:15525)
at JitCompiler._loadModules (compiler.es5.js?524d:26958)
at JitCompiler._compileModuleAndComponents (compiler.es5.js?524d:26931)
syntaxError @ compiler.es5.js?524d:1694
(anonymous) @ compiler.es5.js?524d:15556
CompileMetadataResolver.getNgModuleMetadata @ compiler.es5.js?524d:15554
CompileMetadataResolver.getNgModuleSummary @ compiler.es5.js?524d:15467
(anonymous) @ compiler.es5.js?524d:15540
CompileMetadataResolver.getNgModuleMetadata @ compiler.es5.js?524d:15525
JitCompiler._loadModules @ compiler.es5.js?524d:26958
JitCompiler.compileModuleAndComponents @ compiler.es5.js?524d:26931
JitCompiler.compileModuleAsync @ compiler.es5.js?524d:26860
PlatformRef.bootstrapModuleWithZone @ core.es5.js?de3d:4536
PlatformRef.bootstrapModule @ core.es5.js?de3d:4522
(anonymous) @ index.ts?c69e:4
(anonymous) @ main.js:3770
webpack_require @ main.js:20
(anonymous) @ main.js?8d23:1
(anonymous) @ main.js:3758
webpack_require @ main.js:20
(anonymous) @ main.js:3746
webpack_require @ main.js:20
(anonymous) @ main.js:63
(anonymous) @ main.js:66

ngx-gallery not display pictures

not display pictures ,but when i click blank ,it can show big picture. i dont know why.here is my code

<ngx-gallery [options]="galleryOptions" [images]="galleryImages"></ngx-gallery>

galleryOptions = [ { 'previewCloseOnEsc': true }, { 'breakpoint': 500, 'width': '300px', 'height': '300px', 'thumbnailsColumns': 3 }, { 'breakpoint': 300, 'width': '100%', 'height': '200px', 'thumbnailsColumns': 2 } ];
galleryImages = [ { big: 'http://192.168.1.108:8080/images/articles/30ef0f2c-092b-448a-a27a.png',medium :'http://192.168.1.108:8080/images/articles/30ef0f2c-092b-448a-a27a-cdcb4ca28ad9.png', small :'http://192.168.1.108:8080/images/articles/30ef0f2c-092b-448a-a27a-cdcb4ca28ad9.png'}];

quit gallery preview on clicking on overlay

Is it possible to quit the gallery not only by clicking on the x button and on ESC key
But also on the grey overlay zone as it is common in many viewers?

Setting for main-image div size

Hello, thanks for awesome plugin!
I need to set up gallery like this:

But how i can main image (red line) width, instead of set gallery (blue line) width?
imagePercent setting doest help with width.

Question about Async loading

Our project is using your great ngx-gallery. When we async images from database by calling apis, small and medium images work well. However, when clicking the preview image(big), the image did show up but the network showing the ngx-gallery component continuously calling the big image url which causes the browser super slow.

The safeResourceUrl for the async image we get is a dataURI: 'data:image/png;base64,iVB...'
Can you help us to resolve this issue?

code sample:
`
this.serviceCall.subscribe(

    imageData => {

      let blob = new Blob([imageData.blob()], { type: "image/png" });

      let reader = new FileReader();

      reader.onload = (event) => {

        this.imageUrl = reader.result;
        let elem = {
          small: this.imageUrl,
          medium: this.imageUrl,
          big: this.imageUrl
        };

        this.galleryImages.push(elem);
      };
      reader.readAsDataURL(blob);

    },
    (err) => console.log(err)
  );

`

Thanks a lot!

Where should I import hammarjs?

Hi, Lukasz
I'm new to Angular2. Where should I add the import "hammerjs";? And do I need to import like:
import { Hammerjs } from 'hammerjs';
Currently I can make the slide show work, but the hammer gestures and arrows are not applied.

webpack build warnings

Hi,
I use ngx-gallery 1.1.7 without problems. But for your information: a lot of warnings occure when building with webpack 3.3.0 and [email protected] :

`WARNING in ./node_modules/ngx-gallery/lib/ngx-gallery.component.ts
[32, 22]: Type number trivially inferred from a number literal, remove type annotation
[34, 20]: Type number trivially inferred from a number literal, remove type annotation
[52, 41]: Parentheses are required around the parameters of an arrow function definition
[156, 44]: Parentheses are required around the parameters of an arrow function definition
[157, 45]: Parentheses are required around the parameters of an arrow function definition
[158, 42]: Parentheses are required around the parameters of an arrow function definition
[159, 45]: Parentheses are required around the parameters of an arrow function definition
[166, 49]: Parentheses are required around the parameters of an arrow function definition
[167, 18]: Parentheses are required around the parameters of an arrow function definition
[178, 36]: Parentheses are required around the parameters of an arrow function definition
[180, 25]: Parentheses are required around the parameters of an arrow function definition
[189, 21]: Parentheses are required around the parameters of an arrow function definition
[190, 18]: Parentheses are required around the parameters of an arrow function definition
[197, 33]: Parentheses are required around the parameters of an arrow function definition
[138, 13]: Expected property shorthand in object literal ('{index}').
[13, 15]: The selector of the component "NgxGalleryComponent" should have prefix "jhi" (https://angular.io/styleguide#style-02-07)

@ ./node_modules/ngx-gallery/lib/index.js 1:0-40
@ ./src/main/webapp/app/images/images.module.ts
@ ./src/main/webapp/app/app.module.ts
@ ./src/main/webapp/app/app.main.ts
@ multi (webpack)-dev-server/client?http://localhost:9060 webpack/hot/dev-server ./src/main/webapp/app/app.main

WARNING in ./node_modules/ngx-gallery/lib/ngx-gallery.module.ts
[42, 1]: Consecutive blank lines are forbidden

@ ./node_modules/ngx-gallery/lib/index.js 2:0-37
@ ./src/main/webapp/app/images/images.module.ts
@ ./src/main/webapp/app/app.module.ts
@ ./src/main/webapp/app/app.main.ts
@ multi (webpack)-dev-server/client?http://localhost:9060 webpack/hot/dev-server ./src/main/webapp/app/app.main

WARNING in ./node_modules/ngx-gallery/lib/ngx-gallery-animation.model.ts
[2, 18]: Type string trivially inferred from a string literal, remove type annotation
[3, 19]: Type string trivially inferred from a string literal, remove type annotation
[4, 20]: Type string trivially inferred from a string literal, remove type annotation
[5, 18]: Type string trivially inferred from a string literal, remove type annotation

@ ./node_modules/ngx-gallery/lib/index.js 5:0-46
@ ./src/main/webapp/app/images/images.module.ts
@ ./src/main/webapp/app/app.module.ts
@ ./src/main/webapp/app/app.main.ts
@ multi (webpack)-dev-server/client?http://localhost:9060 webpack/hot/dev-server ./src/main/webapp/app/app.main

WARNING in ./node_modules/ngx-gallery/lib/ngx-gallery-image-size.model.ts
[2, 19]: Type string trivially inferred from a string literal, remove type annotation
[3, 21]: Type string trivially inferred from a string literal, remove type annotation

@ ./node_modules/ngx-gallery/lib/index.js 6:0-47
@ ./src/main/webapp/app/images/images.module.ts
@ ./src/main/webapp/app/app.module.ts
@ ./src/main/webapp/app/app.main.ts
@ multi (webpack)-dev-server/client?http://localhost:9060 webpack/hot/dev-server ./src/main/webapp/app/app.main

WARNING in ./node_modules/ngx-gallery/lib/ngx-gallery-layout.model.ts
[2, 27]: Type string trivially inferred from a string literal, remove type annotation
[3, 30]: Type string trivially inferred from a string literal, remove type annotation

@ ./node_modules/ngx-gallery/lib/index.js 7:0-43
@ ./src/main/webapp/app/images/images.module.ts
@ ./src/main/webapp/app/app.module.ts
@ ./src/main/webapp/app/app.main.ts
@ multi (webpack)-dev-server/client?http://localhost:9060 webpack/hot/dev-server ./src/main/webapp/app/app.main

WARNING in ./node_modules/ngx-gallery/lib/ngx-gallery-preview.component.ts
[16, 18]: Type boolean trivially inferred from a boolean literal, remove type annotation
[36, 20]: Type number trivially inferred from a number literal, remove type annotation
[38, 21]: Type boolean trivially inferred from a boolean literal, remove type annotation
[7, 15]: The selector of the component "NgxGalleryPreviewComponent" should have prefix "jhi" (https://angular.io/styleguide#style-02-07)

@ ./node_modules/ngx-gallery/lib/ngx-gallery.module.ts 25:38-80
@ ./node_modules/ngx-gallery/lib/index.js
@ ./src/main/webapp/app/images/images.module.ts
@ ./src/main/webapp/app/app.module.ts
@ ./src/main/webapp/app/app.main.ts
@ multi (webpack)-dev-server/client?http://localhost:9060 webpack/hot/dev-server ./src/main/webapp/app/app.main

WARNING in ./node_modules/ngx-gallery/lib/ngx-gallery-helper.service.ts
[22, 30]: Parentheses are required around the parameters of an arrow function definition

@ ./node_modules/ngx-gallery/lib/ngx-gallery.component.ts 14:35-74
@ ./node_modules/ngx-gallery/lib/index.js
@ ./src/main/webapp/app/images/images.module.ts
@ ./src/main/webapp/app/app.module.ts
@ ./src/main/webapp/app/app.main.ts
@ multi (webpack)-dev-server/client?http://localhost:9060 webpack/hot/dev-server ./src/main/webapp/app/app.main

WARNING in ./node_modules/ngx-gallery/lib/ngx-gallery-arrows.component.ts
[4, 15]: The selector of the component "NgxGalleryArrowsComponent" should have prefix "jhi" (https://angular.io/styleguide#style-02-07)

@ ./node_modules/ngx-gallery/lib/ngx-gallery.module.ts 22:37-78
@ ./node_modules/ngx-gallery/lib/index.js
@ ./src/main/webapp/app/images/images.module.ts
@ ./src/main/webapp/app/app.module.ts
@ ./src/main/webapp/app/app.main.ts
@ multi (webpack)-dev-server/client?http://localhost:9060 webpack/hot/dev-server ./src/main/webapp/app/app.main

WARNING in ./node_modules/ngx-gallery/lib/ngx-gallery-image.component.ts
[7, 15]: The selector of the component "NgxGalleryImageComponent" should have prefix "jhi" (https://angular.io/styleguide#style-02-07)

@ ./node_modules/ngx-gallery/lib/ngx-gallery.module.ts 23:36-76
@ ./node_modules/ngx-gallery/lib/index.js
@ ./src/main/webapp/app/images/images.module.ts
@ ./src/main/webapp/app/app.module.ts
@ ./src/main/webapp/app/app.main.ts
@ multi (webpack)-dev-server/client?http://localhost:9060 webpack/hot/dev-server ./src/main/webapp/app/app.main

WARNING in ./node_modules/ngx-gallery/lib/ngx-gallery-thumbnails.component.ts
[7, 15]: The selector of the component "NgxGalleryThumbnailsComponent" should have prefix "jhi" (https://angular.io/styleguide#style-02-07)

@ ./node_modules/ngx-gallery/lib/ngx-gallery.module.ts 24:41-86
@ ./node_modules/ngx-gallery/lib/index.js
@ ./src/main/webapp/app/images/images.module.ts
@ ./src/main/webapp/app/app.module.ts
@ ./src/main/webapp/app/app.main.ts
@ multi (webpack)-dev-server/client?http://localhost:9060 webpack/hot/dev-server ./src/main/webapp/app/app.main
`

Change Background/Color of Transition Arrows?

We have a lot of white images (biological specimen photos), so having white arrows makes them hard to find when trying to change images with a mouse. Is there a way to change the color of the arrows, or even the color of the arrow backgrounds so they can be seen against white images?

I see options for enabling/disabling and changing their shapes, but no color references. Please advise.

Ability to swipe images by keyboard

Hi,

I am using this plugin and it's working great. But i am stuck at one position, i need to swipe images next or previous by keyboard arrow buttons when image are open by click, is it possible ? Please let me know, what i have to do if i want to implement this feature.

Thanks

Cannot find module "ngx-gallery" - ASP.NET Core 2 Angular 4 template

Hi @lukasz-galka ,

When I try to use the library in the new ASP.NET Core 2 Angular template (VS 2017) the module cannot be loaded. The template uses webpack, more specifically:

There is a webpack.config.vendor.js file where you declare the 3rd party libraries. For yours this is the relevant parts;

const nonTreeShakableModules = [
    'bootstrap',
    'bootstrap/dist/css/bootstrap.css',
    'es6-promise',
    'es6-shim',
    'event-source-polyfill',
    'font-awesome/css/font-awesome.css',
    'ngx-gallery/lib',
    'jquery',
];

const serverBundleConfig = merge(sharedConfig, {
        target: 'node',
        resolve: { mainFields: ['main'] },
        entry: { vendor: allModules.concat(['aspnet-prerendering']) },
        output: {
            path: path.join(__dirname, 'ClientApp', 'dist'),
            libraryTarget: 'commonjs2',
        },
        module: {
            rules: [ { test: /\.css(\?|$)/, use: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] } ]
        },
        plugins: [
            new webpack.DllPlugin({
                path: path.join(__dirname, 'ClientApp', 'dist', '[name]-manifest.json'),
                name: '[name]_[hash]'
            })
        ],
        externals: [nodeExternals({
            whitelist: ['/^ngx-gallery/']
        })]
    });

As you can see I have excluded ngx-gallery but still doesn't work, I get the following errors (part of them) when I run webpack --progress

ERROR in [at-loader] ./node_modules/ngx-gallery/lib/ngx-gallery-helper.service.ts:29:9
    TS2322: Type 'Function[] | undefined' is not assignable to type 'Function[]'.
  Type 'undefined' is not assignable to type 'Function[]'.

ERROR in [at-loader] ./node_modules/ngx-gallery/lib/ngx-gallery-preview.component.ts:81:13
    TS2322: Type 'number' is not assignable to type 'null'.

ERROR in [at-loader] ./node_modules/ngx-gallery/lib/ngx-gallery-preview.component.ts:96:27
    TS2345: Argument of type 'null' is not assignable to parameter of type 'number'.

ERROR in [at-loader] ./node_modules/ngx-gallery/lib/ngx-gallery.component.ts:39:5
    TS2322: Type 'undefined' is not assignable to type 'number'.

ERROR in [at-loader] ./node_modules/ngx-gallery/lib/ngx-gallery.component.ts:40:5
    TS2322: Type 'undefined' is not assignable to type 'number'.

ERROR in [at-loader] ./node_modules/ngx-gallery/lib/ngx-gallery.component.ts:57:9
    TS2322: Type 'number | undefined' is not assignable to type 'number'.
  Type 'undefined' is not assignable to type 'number'.

ERROR in [at-loader] ./node_modules/ngx-gallery/lib/ngx-gallery.component.ts:157:9
    TS2322: Type '(string | SafeResourceUrl | undefined)[]' is not assignable to type 'string[] | SafeResourceUrl[]'

  Type '(string | SafeResourceUrl | undefined)[]' is not assignable to type 'SafeResourceUrl[]'.
    Type 'string | SafeResourceUrl | undefined' is not assignable to type 'SafeResourceUrl'.
      Type 'undefined' is not assignable to type 'SafeResourceUrl'.

ERROR in [at-loader] ./node_modules/ngx-gallery/lib/ngx-gallery.component.ts:159:9
    TS2322: Type '(string | SafeResourceUrl | undefined)[]' is not assignable to type 'string[] | SafeResourceUrl[]'

  Type '(string | SafeResourceUrl | undefined)[]' is not assignable to type 'SafeResourceUrl[]'.

ERROR in [at-loader] ./node_modules/ngx-gallery/lib/ngx-gallery.component.ts:160:9
    TS2322: Type '(string | undefined)[]' is not assignable to type 'string[]'.
  Type 'string | undefined' is not assignable to type 'string'.
    Type 'undefined' is not assignable to type 'string'.
......
......

node -v: v6.11.2

Is there anything I can to to fix this?

Thanks

How to import this library using SystemJS?

SEO optimizations for preview mode

In order to improve SEO and site navigation I'd like to have url routing for the zoomed in image. It basically means that whenever you select an image, the URL would change into a unique URL that can be used for navigation (browser history), deeplinks and sharing (i.e. facebook). I'm not sure what the best solution is to achieve this.

One idea that comes to mind is adding output/inputs that can be used by the outer component to do the routing and select the selected image. That will keep the library clean and focussed on its main task. Something like:

1. image lib loads (default behavior)
2. If the user selects the image an output will be send, so the outer component can navigate and sends the input to the image library (see 3)
3. image lib components checks if there's an input, telling which is the active gallery image. If there's an active image, the image will be selected and the modal shows the image

The output/input would be configurable.

Interesting to hear your feedback.

Support for Shortcuts?

Hi,
this looks like a great project to me, thanks! From documentation I haven't seen the ability to use shortcuts, i.e. ESC for closing the preview image, arrows to navigate through the images (both in normal mode as well as preview mode).

I'm used to those shortcuts and I believe many end-users as well. It helps to speed up navigation a lot.