wittlock/ngx-image-zoom

Angular component for zoomable images

ngx-image-zoom's Issues

Can't Apply zooming on Canvas Elements

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.

Configuration for lens appearance needed

There's no way to configure the appearance of the lens.

XML-encoded inline SVG-images not working

XML-encoded inline SVG-images aren't working due to security checks.

compatibility with flexbox and transform

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.

width and height with 0px

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>

Offset is miscalculated in more complex web layouts

Haven't quite narrowed it down yet as to what makes it break, needs investigating.

an accessor cannot be declared in an ambient context

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);

Angular CLI 7 Version

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

Feature request: lens result outside image container <--> Amazon style zoom

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?

Scroll zoom in conjunction with 'toggle' mode

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.

"ERROR: An unhandled exception occurred: No projects support the 'serve' target." when trying to serve project

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!

CSS cursor has no effect inside NgbModal

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.

Build Error - Cannot read property 'kind' of undefined

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

Width and Height of the image

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.

angular ivy support

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;

Zoom image referencing old image if image url changes

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

Support Rotation of image with library

Cases:

1. The Zooming is working fine for the 0 deg rotation rendered image
2. Once i rotate the image, the lens location is still stick to the same

Problem:

1. How to integrate library with the rotated image？

when the version >9.0.0 the component is lose efficacy

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 ？

Improper zoom cursor calculation on ROTATED images

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.

click on button outside image zoom in and zoom out

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 :)

External Url's Can't be accessed

Trying to access images from external URL, but library is trying to access image from localhost.

Ivy peer dependencies #refactor_for_angular9

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

usage with background image

How can I make it work with background image?

Zoom does not scroll with the page

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.

Cannot redeclare block-scoped variable ngDevMode

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!

I keep getting - tag may already be closed error in console

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.

demo project

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>

Issue in top and left values

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">

Angular 9 shared module import

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]>;
...
}

Possible to make it work with just the thumbImage?

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?

Lens gets wrong location when it is used inside <ng-template>

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

Issue with server side Rendering

ERROR TypeError: this.imageThumbnail.nativeElement.getBoundingClientRect is not a function

Update image parameter types

Image parameters can now be SafeUrl | SafeResourceUrl as well, so should update them as well as the documentation to reflect this.

Template parse error

<ngx-image-zoom
    [thumbImage]=https://i.imgur.com/jnRTmfe.jpg
    [fullImage]=https://i.imgur.com/z9yzdPO.jpg
>
</ngx-image-zoom>

ngx-image-zoom not working in component children

I made a web application using angular 8.
when I was using ngx-image-zoom 0.4.1, it didn't work on the children components.

Feature request: New zoom mode

As per title, is it possible for the "click" zoom mode to return to original size during the second click.

Current behaviour:

1. Click on image, image zoom
2. Click on image again, nothing happens
3. Move out from image, goes back to original size

Desired behavior:

1. Click on image, image zoom
2. Click on image, goes back to original size

zooming effect is not working in mobile screen

The zooming effect is not working on the mobile screen. In the computer screen its works perfectly

Can't reduce the 'thumbImage' size

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.

Lense position is calculated incorrectly inside modal popup dialog when vertical scroll is present on the viewport

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.

Can't bind to 'scrollParentSelector' since it isn't a known property of 'ngx-image-zoom'.

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?

problem with image blobs

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

Feature Request: export a directive also for the native img tag

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.

source code from demo

Hello,

is it possible to publish the source code from the demo "https://wittlock.github.io/ngx-image-zoom/" ?

Image zoom not working for dynamic data

When we try to get dynamic data of images (from ngx store), zoom doesn't work anymore...

"ngx-image-zoom#zone.js@^0.8.4" doesn't satisfy found match of "[email protected]"

Can you upgrade zone.js to be able to work with Angular 8.

Not compatible with Angular universal

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.

Multiple <ngx-image-zoom> elements on one page

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"

Template parse error: Can't bind to 'thumbImage' since it isn't a known property of 'ngx-image-zoom'.

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?

Pan image with toggle zoom

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?

Zoom modes that aren't inner zoom

Such as the popout window or appearing in a specified container.