wittlock / ngx-image-zoom Goto Github PK
View Code? Open in Web Editor NEWAngular component for zoomable images
Home Page: https://wittlock.github.io/ngx-image-zoom/
License: MIT License
Angular component for zoomable images
Home Page: https://wittlock.github.io/ngx-image-zoom/
License: MIT License
hi, doesn't this library work with image blobs? my photos are store in DB using Gridfs and can safely show them using <img [src]="_DomSanitizationService.bypassSecurityTrustUrl(thumb)">
but i get console error when i try this:
<ngx-image-zoom
[thumbImage]=_DomSanitizationService.bypassSecurityTrustUrl(thumb)
></ngx-image-zoom>
WARNING: sanitizing unsafe URL value SafeValue must use [property]=binding: data:text/xml;base64,/9j/4QbwRXhpZgAATU0AKgAAAAgABwESAAMAAAABAAEAAAEaAAUAAAABAAAAYgEbAAUAAAABAAAAagE ...
and
unsafe:SafeValue must use [property]=binding: undefined (see http://g.co/ng/security#xss):1 GET unsafe:SafeValue must use [property]=binding: undefined (see http://g.co/ng/security
am i doing something wrong here?
thank you
I made an Angular CLI Lib of your lib:
https://github.com/kernelport/ngx-image-zoom-dev
And add options styleWidth and styleHeight to scale the 'thumbImage' size
This was an feature request in #6
It is not possible to make a pull request because it is a new project. But you can review this commit:
kernelport/ngx-image-zoom-dev@9ae8110
New version 0.5.1 - breaks during ng build. We were using "ngx-image-zoom": "^0.4.1", in package.json - which now on the build got updated to version 0.4.2
1. If 'ngx-image-zoom' is an Angular component and it has 'scrollParentSelector' input, then verify that it is part of this module.
2. If 'ngx-image-zoom' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("th]="200"
[lensHeight]="100" [maxZoomRatio]="2" [enableScrollZoom]="true" [magnification]="0.3" [ERROR ->][scrollParentSelector]="scrollParentSelector">
</ngx-image-zoom>
<img [src]="image" #originalImag")
Any idea how to resolve this?
As per title, is it possible for the "click" zoom mode to return to original size during the second click.
Current behaviour:
Desired behavior:
I am using canvas element to display background images and draw some stuffs which is possible on canvas only,and then i want to zoom that canvas images. But with this library it isn't possible. How it can be done? Can any 1 please explain it.
This version of CLI is only compatible with Angular versions ^8.0.0-beta || >=8.0.0 <9.0.0,
but Angular version 9.0.0 was found instead.
When can I update it ?
My code:
<ngx-image-zoom [thumbImage]=https://www.dorisleslieblau.com/system/item_attachments/images/000/048/075/list/contemporary-modern-rug-flat-weave-18x13-n11587.jpg>
maybe i am blind, but dont know whats wrong.
There's no way to configure the appearance of the lens.
ERROR TypeError: this.imageThumbnail.nativeElement.getBoundingClientRect is not a function
Hello,
is it possible to publish the source code from the demo "https://wittlock.github.io/ngx-image-zoom/" ?
So I have <ngx-image-zoom [thumbImage]="selectedImage" [zoomMode]="'hover'" [magnification]="2" [enableLens]="true" [maxZoomRatio]="3" [enableScrollZoom]="true" ></ngx-image-zoom>
for which selectedImage
is a variable that I tend to change. After changing it, the hover still shows the zoomed image of the first referenced image
Haven't quite narrowed it down yet as to what makes it break, needs investigating.
Hello and thank you for the component,
In our project, we use the zoom into a pop-up but we have an issue with the scroll.
Version : 0.3.1
Description :
Open a pop-up with a scroll. (the scroll is not on the main window but in a secondary div for example).
When you scroll down, the lens or the zoom image won't follow the pointer.
Expected behaviour : The lens follow the cursor after scrolling.
I made a fix in a fork. If the solution is ok for you, feel free to accept my Pull Request or to discuss about a better solution.
Is there a way to allow the panning of the image using the mouse when you're using the 'toggle' setting, like we have when using the 'click' setting?
My UI requires the toggle style of zooming, but then there doesn't appear to be a straightforward way to pan around the image other than zooming back out and toggling in on a different part of the image?
Hello, I am facing an issue with the zoom. Whenever I click on the image at a different position, it always zooms the image from the top. I checked through the HTML code, the top and left values for ngxZoomImageContainer remain zero. In short, the top and left are not changing.
Code:
<ngx-image-zoom
[zoomMode]="'click'"
[enableScrollZoom]="true"
[maxZoomRatio]="5"
[thumbImage]="img"
[fullImage]="img">
When we try to get dynamic data of images (from ngx store), zoom doesn't work anymore...
After instalation when trying to import i am getting forRoot() is not showing. So i removed that tried to run then i am getting following error
After installation and adding to the module, when i build it the following error is occuring
ERROR in node_modules/ngx-image-zoom/lib/ngx-image-zoom.component.d.ts:52:9 - error TS1086: An accessor cannot be declared in an ambient context.
52 set setThumbImage(thumbImage: string);
~~~~~~~~~~~~~
node_modules/ngx-image-zoom/lib/ngx-image-zoom.component.d.ts:53:9 - error TS1086: An accessor cannot be declared in an ambient context.
53 set setFullImage(fullImage: string);
Hi I am trying to integrate your image zoom plugin in my gallery plugin. But the zoom lens gets wrong location, any idea?
Here is a stackblitz
How can I make it work with background image?
I have cloned this repository and created my own branch. After 'npm i' I try and start the project by either ng serve, npm start, or yarn start, but instead I am returned this console error:
[error] Error: No projects support the 'serve' target. at ServeCommand.initialize (/Users/user/proj/ngx-image-zoom/node_modules/@angular/cli/models/architect-command.js:53:19) at async ServeCommand.validateAndRun (/Users/user/proj/ngx-image-zoom/node_modules/@angular/cli/models/command.js:124:9) at async Object.runCommand (/Users/user/proj/ngx-image-zoom/node_modules/@angular/cli/models/command-runner.js:201:24) at async default_1 (/Users/user/proj/ngx-image-zoom/node_modules/@angular/cli/lib/cli/index.js:62:31)
I made sure the project names matched up in the angular.json and package.json following the advice of some help via google, but I still get this error.
Any help is appreciated!
How to set the initial width and height of the image with this library? I'm trying to set lib-ngx-image-zoom style but it is not working.
I've got an ngx-img-zoom component setup like this:
<ngx-image-zoom
[thumbImage]="www.link-to.img"
[fullImage]="www.link-to-full.img"
zoomMode="toggle"
[enableScrollZoom]=true>
</ngx-image-zoom>
My intent is to use the toggle mode to zoom to the full image, and then the scroll function to adjust the zoomAmount and the location of the zoomed-in portion.
However, it seems that scroll zoom zooms in on the component as if it was hovering over the thumbImage: if I click to toggle-zoom into the lower-left corner of the thumbImage, move the cursor to the top-right part of the currently zoomed-in fullImg and then scroll, the component displays a part of the fullImg that the cursor would have been hovering over on the thumbImg.
I hope that explanation got through correctly. It leads to quite an unintuitive user experience.
The zooming effect is not working on the mobile screen. In the computer screen its works perfectly
I have the following in my component's scss file where I'm using ngx-image-zoom:
.ngxImageZoomFullContainer {
cursor: zoom-out;
}
.ngxImageZoomThumbnail {
cursor: zoom-in;
}
However, in Chrome 83.0.4103.116, the cursor still displays as an arrow when hovering over the image, whether zoomed in or out.
I'm using this in conjunction with a carousel that uses flexbox and transform to display/animate the slides, and the zoom only works on the first slide. After a bit of digging I've found that newLeft needs to be set differently depending on the left value, so something like this:
if(left > 0){ newLeft = Math.max(Math.min(left, this.thumbWidth), 0) }else{ if(this.thumbWidth + left > 0){ newLeft = Math.max(Math.min(this.thumbWidth + left, this.thumbWidth), 0); }else{ newLeft = Math.max(Math.min(this.thumbWidth-(Math.abs(left)-this.thumbWidth), this.thumbWidth), 0); } }
This is the example that worked in my case.
I'm getting an build error when running ng build --prod
ERROR in ./node_modules/ngx-image-zoom/fesm5/ngx-image-zoom.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 (/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:265:35)
Running Angular 8
If you import NgxImageZoomModule in shared module, the console show error that BrowserModule is imported twice or more.
Console error
Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.
I think that it happened because ngx-image-zoom import BrowserModule...
File: ngx-image-zoom.module.d.ts
...
import * as ɵngcc2 from '@angular/platform-browser';
export declare class NgxImageZoomModule {
static ɵmod: ɵngcc0.ɵɵNgModuleDefWithMeta<NgxImageZoomModule, [typeof ɵngcc1.NgxImageZoomComponent], [typeof ɵngcc2.BrowserModule], [typeof ɵngcc1.NgxImageZoomComponent]>;
...
}
See this example: https://stackblitz.com/edit/angular-osmsac
if you click on first card image, modal will open where you can zoom the image and you can see that lense position is correct. However if you scroll down to card #15 or #20 and do the same, the lense will open at the bottom of the thumbnail this time and it's no longer following cursor - it's stuck in it's vertical position.
When image is rotated and the user zooms, cursor calculation rotates with image, causing improper cursor calculation.
ex. Image is rotated 180 degrees, cursor calculation is flipped 180 degrees. Moving mouse UP on a 180 degree rotated image will move the cursor DOWN.
I believe this issue is related to the setZoomPosition() function.
I need this for about 500 products and each product has 5 different images. If i need two copies of each image to link then that is a lot of images. Is there a way to have it work just the same by having only 1 image? or is there a magical way of including the same image with a different size in the code?
I couldn't reduce the size of 'thumbImage' width and height, I think there is no option for that. Please add those option for customise the size of 'thumbImage' width and height.
Such as the popout window or appearing in a specified container.
I'm getting this message when running my angular 9 project.
ERROR in The target entry-point "ngx-image-zoom" has missing dependencies:
- @angular/core
- @angular/common
I've installed the package through npm, then import it in the ts module where I want to use it:
And then in the html component I've used its tags:
When I do the npm start I get this error through the console where 'thumbImage' and 'fullImage' are not recognised as properties from ngx-image-zoom.
Any ideas why could this be happening?
Component looks amazing, having trouble getting it going, though. I've installed v0.3.3 this morning and the project fails to compile with:
Cannot redeclare block scoped variable ngDevMode
This is the same issue as described in Angular issue 21925 (angular/angular#21925) which is, in turn, linked to issue 21670 (angular/angular#21670). Some have resolved this by installing a slightly older version of Angular.
I've rolled Angular back to 5.1.3 and 5.0.0 which both build, but I now get the following run time error:
ERROR Error: StaticInjectorError[Renderer2]:
StaticInjectorError[Renderer2]:
NullInjectorError: No provider for Renderer2!
Hi,
it would be a great new feature to add a new mode which follow the same pattern as amazon.com zoom feature.
What you think about?
Hi
Instead of scroll button inside the image to zoom in and zoom out
I want to make two buttons
1)Click on Zoom-in button( Zoom in the image)
2)Click on Zoom-out (Zoom out the image )
Please Guide me :)
Trying to access images from external URL, but library is trying to access image from localhost.
XML-encoded inline SVG-images aren't working due to security checks.
Image parameters can now be SafeUrl | SafeResourceUrl as well, so should update them as well as the documentation to reflect this.
I'm trying to make a dynamic image of the server be shown with zoom or it is there but it is not shown
<ngx-image-zoom
[thumbImage]="content.items[0].mediaPath"
></ngx-image-zoom>
If I put e.g. 5 elements (all with the same settings) on one page, the first and second work as expected.
Starting from the third, the component does not work anymore.
On the third, it seems that the coordinates of the crosshair are being miscalculated.
In 4 and 5 no crosshair is there.
The options are:
zoomMode="hover-freeze"
enableScrollZoom="True"
enableLens="True"
lensWidth="200"
lensHeight="200"
magnification="0.5"
Cases:
Problem:
Can you upgrade zone.js to be able to work with Angular 8.
Hi. When running the app on the server, I get the following error:
ERROR ReferenceError: document is not defined
The problem is here , Of course I can hide the component by platformId
in my side , But maybe a fix for this would be very useful.
This will allow the developer to pass in custom css styling to the image.
I am not able to set the width and height of the image, the width and height seems to be derived from the dimensions of the hosted thumbnail.
I did a short test in a minimal angular cli project.
https://github.com/kernelport/ngx-image-zoom-test/blob/master/src/app/app.component.html#L7
It works when the options are provided witout [].
It is a typo in the Readme or an API change in angular?
This is working:
<ngx-image-zoom
thumbImage="https://wittlock.github.io/ngx-image-zoom/assets/thumb.jpg"
fullImage="https://wittlock.github.io/ngx-image-zoom/assets/fullres.jpg"
></ngx-image-zoom>
This not:
<ngx-image-zoom
[thumbImage]="https://wittlock.github.io/ngx-image-zoom/assets/thumb.jpg"
[fullImage]="https://wittlock.github.io/ngx-image-zoom/assets/fullres.jpg"
></ngx-image-zoom>
ERROR in node_modules/ngx-image-zoom/index.d.ts:4:23 - error NG6005: NgxImageZoomModule.forRoot returns a ModuleWithProviders type without a generic type argument. Please add a generic type argument to the ModuleWithProviders type. If this occurrence is in library code you don't control, please contact the library authors.
4 static forRoot(): ModuleWithProviders;
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.