murhafsousli / ngx-gallery Goto Github PK
View Code? Open in Web Editor NEWAngular Gallery, Carousel and Lightbox
Home Page: https://ngx-gallery.netlify.app/
License: MIT License
Angular Gallery, Carousel and Lightbox
Home Page: https://ngx-gallery.netlify.app/
License: MIT License
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'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
};
Slideshow should wait until image is loaded before going to the next image, re implement the slideshow feature
Use MutationObserver
instead of DOMSubtreeModified
in GallerizeDirective
x
)- [ ] bug report -> please search issues before submitting
- [X] feature request
- [ ] question
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?
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
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
x
)- [ ] bug report -> please search issues before submitting
- [ ] feature request
- [ ] question
Modal gallery covers whole height on mobile, therefore user can't exit once in gallery.
- [X] bug report
macOS (high sierra), osX ( v9, v11)
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
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.
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 ?
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:
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 :)
...
x
)- [x] bug report -> please search issues before submitting
- [ ] feature request
- [ ] question
macOS Sierra
@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
When src-full
being added to <img>
tag, bug appears.
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>
No idea.
By the way, can you make responsive implementation of lightbox? And is there any documentation about GalleryConfig
?
Thanks!!
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'
windows 10
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
- [X] bug report
- [X] feature request
macOS Sierra
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
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!
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.
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.
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
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!
x
)- [x ] bug report -> please search issues before submitting
- [ ] feature request
Windows 10
node: 9.0.0
npm: 5.5.1
angular: 4.4.4
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.
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.
The library to work with aot (and rollup)! :)
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
I would expect the modal to remain fullscreen, but I cannot get it to do so.
when Double click on Thumbnails on https://murhafsousli.github.io/ng-gallery/#/basic
we have result:
how fix it?
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:
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.
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
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?
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.
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
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]),
x
)- [x] bug report -> please search issues before submitting
- [ ] feature request
- [ ] question
All
Try to resize the browser window. It is not rearranging the slider
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.
x
)- [ ] bug report -> please search issues before submitting
- [ ] feature request
- [x] question
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,
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?
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!
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?
- [x] bug report
- [ ] feature request
- [ ] question
All (Windows 10, Windows 8.1, iOS 11.2.2, Android 8.0, Android 6.0.1 tested)
Angular CLI: 1.6.3
Node: 8.9.0
Angular: 5.1.3
If there is only 1 image in gallery and you swipe to the left or right control arrows disappear and starts endless loading.
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 ?
- [ ] 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 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.
Make it optional to activate gestures
x
)- [X] bug report
- [ ] feature request
- [ ] question
using @ngx-gallery/core version 2.0.0-beta.4
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.
Gestures (swiping) should also work on ios
- [X] bug report
- [ ] feature request
- [ ] question
iOS 11.2.2/Android 8.0/Android 6.0.1
-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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.