kolkov / ngx-gallery Goto Github PK
View Code? Open in Web Editor NEWA simple responsive native gallery component for Angular 8+.
Home Page: https://ngx-gallery.kolkov.ru/
License: MIT License
A simple responsive native gallery component for Angular 8+.
Home Page: https://ngx-gallery.kolkov.ru/
License: MIT License
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
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
Is there any way to show a loading animation (for preview image and thumbnails) while waiting for full image to load?
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
The "thumbnailsSwipe" property has no effect. Swiping is not possible when I set it.
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 .
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
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
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
How do I embed YouTube videos into the slider?
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
There is any plans to add videos in the gallery?
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) .
@kolkov Hi! Can I submit some pull requests? Is this project alive? I like this gallery. It's sad if it died 😞
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?
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.
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.
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.
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!
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
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).
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
"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
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
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.
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 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:
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!
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)
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 !
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.
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.
I want to achieve SEO alt text and image tag inside this gallery how to achieve it?
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:
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?
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
Currently the contribution guidelines returns a 404:
https://github.com/kolkov/ngx-gallery/blob/master/CONTRIBUTING.md
Any chance this can be updated please?
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 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.)
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!
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
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.
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
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?
Why is it expecting an array? Why is it not just an object with key/value pairs?
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.
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.
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
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?
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.)
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.