Hi!

It looks like this project is quite abandoned now :( The current release version is not supported by Angular 5 and there is no update about it from the project owner, see #21 (comment).
I can see forks with lot of new commits:

• https://github.com/Kuchasz/ps-photo-gallery
• https://github.com/slavik990/ng-gallery
• https://github.com/kuwas/ngx.gallery.ts

Guys, don't you want to join forces somehow? I am pretty sure these things could be useful for other ng-gallery users as well. I would be happy to see a new release :)

Hello, really nice library. I was looking at your demo site with modal example and thumbnails images are not correct size as in other browsers. Is there any up coming fix for this one? Thanks in advance!

I've used this library with angular 4.x and included hammerjs but the gesture support isn't working. My assumption would be that I would be able to swipe left/right on tablet/mobile devices but I've tried on ipad/iphone. I assumed it was my app but I've also tried it with the demo provided and both the basic and modal versions show the same problem/behaviour.

Am i mis-understanding the gesture support or is there anything specific to do once hammerjs is included?

ps. this is my GalleryConfig (note the "gestures: true" at the end)....

export const galleryConfig: GalleryConfig = {
style: {
background: '#121519',
width: '1200px',
height: '900px'
},
animation: 'fade',
loader: {
width: '50px',
height: '50px',
position: 'center',
icon: 'oval'
},
description: {
position: 'bottom',
overlay: false,
text: true,
counter: true
},
bullets: false,
player: {
autoplay: false,
speed: 3000
},
thumbnails: false,
navigation: true,
gestures: true
};

Hi there, the feature is awesome in general. I used the modal version of the gallery https://murhafsousli.github.io/ng-gallery/#/modal but it actually opens with a popup animation. Is it possible to change the animation effect of the modal? I want it to slide down for example.

- [x] bug report 
- [ ] feature request
- [ ] question

OS and Version?

All (Windows 10, Windows 8.1, iOS 11.2.2, Android 8.0, Android 6.0.1 tested)

Versions

Angular CLI: 1.6.3
Node: 8.9.0
Angular: 5.1.3

Repro steps

If there is only 1 image in gallery and you swipe to the left or right control arrows disappear and starts endless loading.

Hey great implementation for gallery in ng,
I'm trying to figure out how to create basic component to be on customize configuration and when I click on one of the images it will open the lightbox modal with another set of configuration.

thanks.

Bug Report or Feature Request (mark with an x)

- [X] bug report
- [ ] feature request
- [ ] question

Versions

using @ngx-gallery/core version 2.0.0-beta.4

Repro steps

Here is a small and simple demo app (https://angular-g6hsdp.stackblitz.io/.)
The gestures (swiping) work for me on desktop browser and also on an android device.
But NOT on ios devices.

Desired functionality

Gestures (swiping) should also work on ios

...

Bug Report or Feature Request

- [X] bug report
- [X] feature request

OS and Version?

macOS Sierra

Versions

Angular CLI: 1.5.0
Node: 8.7.0
OS: darwin x64
Angular: 5.0.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

angular/cdk: 5.0.0-rc.1
angular/cli: 1.5.0
angular/flex-layout: 2.0.0-beta.10-4905443
angular/material: 5.0.0-rc0
angular-devkit/build-optimizer: 0.0.33
angular-devkit/core: 0.0.21
angular-devkit/schematics: 0.0.37
ngtools/json-schema: 1.1.0
ngtools/webpack: 1.8.0
schematics/angular: 0.1.7
typescript: 2.4.2
webpack: 3.8.1

Repro steps

Close button issue:
just click on the close button from the gallery overlay and if you have some link, button with an action, even the gallery itself behind the close button it triggers automatically, the only fix that i could find without changing the source code was in my .css changed the position absolute atribute for position fixed, then the problem stops.

Loader missing issue:
the loader is missing, i dont know which kind of file is.. img,svg,gif so i cant fix the console error saying that "loader", in this case oval is not found.

Please tell me where i can find the loader, Thanks!

Hey there,

I have multiple gallerys and depending on the folder you click you see some images and the gallery gets injected with some images. The problem is the modal always opens on top of the page. So if I scroll down and open a gallery it always looks like nothing happened. I always need to scroll up to see the modal with the images.

Any ideas on this one?

I'm using Angular 4.
Can't resolve '@angular/animations' in node_modules/ng-gallery/component/gallery-modal'.

Also how do I install the typings ?

Is it possible to add features like zoom in and out an image, rotate it, mirror effect? It would be great. It's a great work, thank you very much.

Setting the width and height too 100% doesn't work. I would like the lightbox to be full screen.

Using the fluid generator, light box will not appear.

In the file "ng-gallery/src/component/gallery/gallery.component.scss" the style defines a height of 500px. This is fine as a default, however when I am placing the gallery as a tool I am unable to override the size of "gallery-main" in my css. Three possible solutions:

1. Simply remove the height from the style so that it will inherit whatever the parent is. (I favor this.)
2. Make it so that the bounding container respects the image size specified.
3. Provide bounding size properties.

This is a huge issue for me at the me at the moment, and I will not be able to use the project, and I really like it. Please advise :) And thank you for a great product.

Bug Report or Feature Request (mark with an x)

- [x ] bug report -> please search issues before submitting
- [ ] feature request

OS and Version?

Windows 10

Versions

node: 9.0.0
npm: 5.5.1
angular: 4.4.4

Repro steps

I'm unable to use this library with an AOT & Rollup configuration. I see the below error when the project is built with rollup. The angular compilation step (ngc) occurs without errors.

The log given by the failure

events.js:193
      throw er; // Unhandled 'error' event
      ^
Error: Could not resolve '../../../../node_modules/ng-gallery/ng-gallery.ngfactory' from temp\aot\TypeScript\Core\app.module.ngfactory.js
    at error (C:\Users\Dave\Documents\Code Repository\dashboards.squaredup.com\UmbracoCommunity.Core\node_modules\rollup-stream\node_modules\rollup\dist\rollup.js:185:14)
    at then.resolvedId (C:\Users\Dave\Documents\Code Repository\dashboards.squaredup.com\UmbracoCommunity.Core\node_modules\rollup-stream\node_modules\rollup\dist\rollup.js:9804:8)
    at <anonymous>
Process terminated with code 1.

Desired functionality

The library to work with aot (and rollup)! :)

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [X] feature request
- [ ] question

Desired functionality

Currently a click on an image indicates a navigation request. I would like to differentiate beetween navigation and click. (means only a click on navigation icons do navigation)
e.g. I would like execute "custom logic" on a click (e.g. open a new window with a certain URL etc.)

How can this be achieved?

Make it optional to activate gestures

it is working completely fine in normal ng serve, but after building for production using ng build --prod or ng build --prod --aot it is not working, how to solve this ?

when Double click on Thumbnails on https://murhafsousli.github.io/ng-gallery/#/basic
we have result:

how fix it?

Use MutationObserver instead of DOMSubtreeModified in GallerizeDirective

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [ ] feature request
- [x] question

OS and Version?

Linux (Mint 18.2 Cinnamon 64-bit)

I've just installed the module with npm but according to the documentation, I couldn't find
@ngxgallery/lightbox and @ngx-gallery/gallerize, please update the docs..
My regards,

- [X] bug report

OS and Version

macOS (high sierra), osX ( v9, v11)

Versions

Angular CLI: 1.6.2
Node: 9.3.0
OS: darwin x64
Angular: 5.2.0
... common, compiler, compiler-cli, core, forms, http
... platform-browser, platform-browser-dynamic, platform-server
... router

@angular/animations: 5.2.1
@angular/cdk: 5.1.0
@angular/cli: 1.6.2
@angular/flex-layout: 2.0.0-beta.12
@angular/language-service: 5.2.1
@angular/material: 5.1.0
@angular-devkit/build-optimizer: 0.0.40
@angular-devkit/core: 0.0.27
@angular-devkit/schematics: 0.0.50
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.2
@schematics/angular: 0.1.15
@schematics/schematics: 0.0.15
typescript: 2.4.2
webpack: 3.10.0

Repro steps

Open the lightbox gallery on any device (it will open the overlay gallery) then try to close the gallery clicking the close button (the default red circle shaped button with an X). There is que thing, if i have any link or clickable item (even the image that triggers the lightbox gallery) behind the overlay it will do a click on that thing, like its going through the button and the overlay so its clicking the item behind.

in this case, it has the log out button behind so when i close the lightbox im logged out.

in this case, i have the hamburger icon to toggle the side menu and then i close the gallery toggles on the side menu.

Modal gallery covers whole height on mobile, therefore user can't exit once in gallery.

Warning: Can't resolve all parameters for GalleryService in /node_modules/ng-gallery/service/gallery.service.d.ts: (?). This will become an error in Angular v5.x

Hi, if you run AOT or build -prod, you'll see this warning on @[email protected].

I couldn't find myself what is not resolved, but I thought openning this issue will get some more help. Thanks

Hide the navigation on small screens based on gallery width instead of the CSS media solution

If a gallery has only one image, I see navigation controls, and if I click on a navigation conrol, I will see an infinitiy loading indicator. I use the latest version of the gallery.
I attached an image and the source.

ng-gallery-one-image-nav-bug.zip

Hi, nice library. I was just testing it, but there's one feature I'm missing.
Is there any way you'd consider adding video playback? i.e: from YouTube/Vimeo.

Thanks

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request
- [ ] question

OS and Version?

macOS Sierra

Versions

@angular/cli: 1.3.0
node: 8.4.0
os: darwin x64
@angular/animations: 4.4.6
@angular/cdk: 5.0.2
@angular/common: 4.4.6
@angular/compiler: 4.4.6
@angular/core: 4.4.6
@angular/forms: 4.4.6
@angular/http: 4.4.6
@angular/platform-browser: 4.4.6
@angular/platform-browser-dynamic: 4.4.6
@angular/router: 4.4.6
@angular/cli: 1.3.0

@angular/compiler-cli: 4.4.6
@angular/language-service: 4.4.6

Repro steps

When src-full being added to <img> tag, bug appears.

The log given by the failure

Can't bind to 'src-full' since it isn't a known property of 'img'. ("class="photo" *ngFor="let photo of photos">
      <figure>
        <img src="{{ photo.thumbnail }}" [ERROR ->]src-full="{{ photo.original }}" alt="" title="" />
        <figcaption></figcaption>
      </figure>

Desired functionality

No idea.

Mention any other details that might be useful

By the way, can you make responsive implementation of lightbox? And is there any documentation about GalleryConfig?

Thanks!!

Slideshow should wait until image is loaded before going to the next image, re implement the slideshow feature

After setup i get this message when im loading the page with the gallery

GalleryNavComponent.html:2 ERROR TypeError: Cannot read property 'length' of undefined
at Object.eval [as updateDirectives] (GalleryNavComponent.html:2)
at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:12784)
at checkAndUpdateView (core.es5.js:12122)
at callViewAction (core.es5.js:12485)
at execComponentViewsAction (core.es5.js:12417)
at checkAndUpdateView (core.es5.js:12128)
at callViewAction (core.es5.js:12485)
at execEmbeddedViewsAction (core.es5.js:12443)
at checkAndUpdateView (core.es5.js:12123)
at callViewAction (core.es5.js:12485)

What is causing this? I am loading my images async, can that be the problem?

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request
- [ ] question

OS and Version?

All

Versions

Repro steps

Try to resize the browser window. It is not rearranging the slider

I would expect the modal to remain fullscreen, but I cannot get it to do so.

Step 1 in "Installation" chapter throw for me error. Application can't start on initial page. Added all that described in app.module.ts.
Without (or if just comment) all for 'BrowserAnimationsModule ' and 'GalleryModule' - application starts fine.

This is the screenshot with error in console:
https://www.screencast.com/t/JDRxjEuFfno

Any suggestions?

UPD. The error was even with only 'BrowserAnimationsModule'. Updated my 'systemjs.config.js', added:
'@angular/material': 'npm:@angular/material/bundles/material.umd.js', '@angular/cdk': 'npm:@angular/cdk/bundles/cdk.umd.js', '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js', '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js', '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
And application have started work. After that tried uncomment all for 'GalleryModule' and got the same error again. Any other dependencies that should be added?

hallo,i cant resolved this problem is there someone can help me how to solve this is problem?
please...

thank you

Hi,
I'm currently trying to get my angular project to work with SSR. One of the modules that causes errors when used on the server is ng-gallery. I get several "Unexpected token export" and "Unexpected token import" errors. There is an issue regarding this problem at angular/angular-cli#7200. The verdict seems to be, that the modules causing the error have to be changed to conform to the angular package format. I'm not sure what that would mean for this package. The issue should be fixable in the build process, as it seems to be an issue of targeting commonjs.

- [X] bug report
- [ ] feature request
- [ ] question

OS and Version?

iOS 11.2.2/Android 8.0/Android 6.0.1

Versions

• online demo: https://murhafsousli.github.io/ng-gallery/#/lightbox
  +on my localhost:
  Angular CLI: 1.6.3
  Node: 8.9.0
  Angular: 5.1.3

Repro steps

-Online demo- Lightbox simply not working on mobile devices(cant open images in lightbox, screen turns darker, but not showing anything at all)
-localhost
-- iOS - on first try opens the images, but after closing and reopening the image is black, but after swiping on the next image and back displays correctly
-- Android 8.0/6.0.1 (Samsung galaxy S7 and Galaxy Note - freezes often, huge delay between swiping, and clicking on close button when other button is "behind" on UI it calls both events.

Currently ng-gallery is only usable for images (at least as far as I understand)

But it would be very useful when it could be used for more than just images (videos, ordinary content etc.)

Do you plan such a feature??

TIA

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [ ] feature request
- [ x ] question

One quicke question, I implemented demo step by step and from module I'm getting error
error TS2304: Cannot find name 'GalleryConfig'

OS and Version?

windows 10

Versions

Angular CLI: 1.5.0
Node: 6.11.2
OS: win32 x64
Angular: 5.0.5
... core

@angular/animations: 5.0.1
@angular/cdk: 5.0.4
@angular/cli: 1.5.0
@angular/common: 5.0.1
@angular/compiler-cli: 5.0.1
@angular/compiler: 5.0.1
@angular/forms: 5.0.1
@angular/http: 5.0.1
@angular/language-service: 5.0.0
@angular/platform-browser-dynamic: 5.0.1
@angular/platform-browser: 5.0.1
@angular/router: 5.0.1
@angular-devkit/build-optimizer: 0.0.32
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.35
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.1
typescript: 2.4.2
webpack: 3.8.1

Repro steps

The log given by the failure

Desired functionality

Mention any other details that might be useful

is it possible?

now i try use:

if (isPlatformBrowser(this.platformId)) {
            this.gallery.load(this.images);
        }

but when creating prod build:

__metadata$1("design:paramtypes", [KeyboardEvent]),

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [ ] feature request
- [ ] question

OS and Version?

Versions

Repro steps

The log given by the failure

Desired functionality

Mention any other details that might be useful

Hi,

i implemented the gallery in my own project, the gallery worked initialy, but today the open function of the ligthbox stop working, the ligthbox opened but doesn't show any images. the counter is in 0

- [ ] bug report -> please search issues before submitting
- [x] feature request
- [ ] question

Hello !
Is there a way to have multiple galleries on the same page ?

Thank you for you work !

Is there an event/callback for when the modal version of the gallery is closed regardless of how it is closed?
(e.g. if closed using escape key, red cross button or clicking outside of the modal).

How can I detect/hook into the modal close event?

Hiya,

When I attempt to install your library using npm on a copy of the Angular 2 seed, running version 4.1.0-beta.0, I continue to run into this error:

"(SystemJS) Module not already loaded loading "../../Observable" as http://localhost:5555/Observable."

Which stops the app from running. I've followed you start up instructions closely, and when I remove GalleryModule from app.module, the app runs perfectly.

What am I missing?

Thanks!

Hey there ;)

Great & easy component, but I would expect to be able to load the modal component, fill it with images and then only wait for my command to display it (Ex: gallery.set(x)), but keyboardInput is triggered when component is first loaded but not visible, hence popping up untimely with keys 37, 39, 13 & 27...

Any mean to disable this at component load?

Thanks

Ive got very obnoxious problem - I need the gallery modal at the app.component and because it constantly listens to keyboard inputs, every time user presses ENTER (or other keys) modal window opens.

Is there any way how to solve this or rather how to disable keyboard navigation all together?

Thanks