Can't reduce the 'thumbImage' size

[gopal-augment]

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.

[wittlock]

Thanks for the report. I'll add it to my list and look into it as soon as I can find the time to give this project some more attention. :)

[psined1]

+1

[aceleghin]

+1

[evertonl1ma]

+1

[nanduzz]

+1

[ME-Studio]

Any update? It will be great if we're allowed to add certain styling to thumbnail image.

[wittlock]

This is next in line for me to develop. Life is kind of crazy with work and travel lately though so my time and energy has been a bit limited. But as soon as I get back to it, this one is top of the list.

[megh10256]

Resizing of thumb image is developed or still in process? And how much time it will take if it under process? It would be really helpful if done sooner, because i am depending on your library.

[alexraju91]

Just an update. This cannot be done simply using css as it will cause problems to zoomed image. It seems like to make this happen, one need to update the library itself.

[veeru1087]

I am just trying to add more weight in here. I am one of those who needs this feature.

[veeru1087]

Hello again! I took a look at the code, this is really nice work! I appreciate your efforts!

This issue is more of a bug. It seems we can do a little tweak where you are calculating thumb width and height. You are taking natural width and height of image, which most of the time are not accurate (when we fit the image to a container of lesser width or height).

private calculateRatioAndOffset() { this.thumbWidth = this.imageThumbnail.nativeElement.naturalWidth; this.thumbHeight = this.imageThumbnail.nativeElement.naturalHeight;

When I changed naturalWidth and naturalHeight to "width" and "height" respectively, and when I took of assigning thumbWidth and thumbHeight to parent (in HTML), it worked well. I am sending in a pull request. I am not sure if this has any side effects. But I tested by having thumbImage reduced through css, it still zooms correctly. Cheers!

[wizicer]

Thanks @wittlock for this great component, thanks @veeru1087 for the fix. It works perfectly in my environment. As the repo holds a .npmignore to make directly reference github repo in package.json difficult. I just made small changes to make it easy to reference github repo before this change merged into npm package: https://github.com/wizicer/ngx-image-zoom Which you can use:

$ npm i wizicer/ngx-image-zoom#master --save

[jocafi]

Hi @wittlock, this is a great Angular component, but I uninstalled it due to this missing feature. But what me and most of developers need is to pass information to the class attribute of the thumb image.

Maybe a new property called thumbImageClass . I am using responsive size for my image with a css class = "width: 100% ; height: 100%"

Thanks and good luck !

[gvsakhil]

Is the issue cleared???

[CarlosTorrecillas]

Would be nice to have this available

[w1lltj]

Hi @wittlock , Thank you very much for great Angular component. Appreciate the effort! Just a request for help though. I also face similar issue as the rest regarding to "thumbImage" size. I have tried solution provided by @veeru1087 . It works perfectly (Thanks @veeru1087 !!). Could you help to approve the PR created by @veeru1087 please 🙏

Thanks!!

[Dperperidis]

I managed to fix it with ::ng-deep

::ng-deep .ngxImageZoomContainer > img{ max-height: 450px!important; }

[Guilospanck]

Thanks @Dperperidis , it worked very well for me!

[wittlock]

@Guilospanck No improvement with the latest releases? I did merge the PR mentioned above in this thread. It did break some of my tests though so I altered it some further. But version 0.4.0 is basically exactly that PR. 0.4.1 is slightly reverted. Does either of those work for you without the ::ng-deep fix?

I could really use some good simple and small examples of what is not working and with which version it's broken. I'll try to find a solution that works for as many use cases as possible but I'm struggling a bit with understanding this one.

[batsulirh]

@wittlock I'm having this issue and can explain my example. I'm pulling images directly from an API url in thumbImage, and the resolution of the photo is 3120 x 4160. No matter what I try to do to override the .ngxImageZoomContainer class with a new height and width, it does not respond. Even changing the height and width of all divs to 400px on the page just to test did not help, the image just loads to the full size. I'm currently getting it to work with the ng:deep fix suggested above but would prefer not to rely on it forever. Hope this helps

[wittlock]

@batsulirh Yeah, I think that makes sense. Thank you. I'll add it as one of my little test cases and try to work out a solution.

I think I was too locked into thinking about my own original use case that made me write this library which is the reverse, I had an image that was like 600x400, with no "high resolution" available and wanting to be able to zoom in on it anyway.

[MickL]

@wittlock Am I wrong or is it not possible to have an responsive image? I mean something like: max-width: 100%; height: auto;.

I am currently about to integrate this module into my project, but if this does not work i cant use it. Additionally I want it to fit in the parent container also with the height.

[crazy-grizzly]

@MickL , I did this with manual image dimensions calculation and setting them to ngx-image-zoom wrapper. Here's my code below, maybe it will help someone 🤔 It works fine on my personal project with images with different dimensions(width > height and height > width)

tempalte

    <div
      *ngIf="!isLoading"
      class="modal-photo-details__photo"
      [ngStyle]="{width: zoomContainerWidth+'px', height: zoomContainerHeight+'px'}"
      (click)="isZoomActive = true"
      (mouseleave)="isZoomActive = false"
      @fadeIn
    >
      <ngx-image-zoom
        [thumbImage]="src"
        [fullImage]="src"
        [zoomMode]="'click'"
        [enableScrollZoom]="true"
      ></ngx-image-zoom>
    </div>

component:

  private calculateZoomContainerDimensions(image: HTMLImageElement): void {
    const imageAspectRatio = image.width / image.height;

    const maxAvailableWidth = this.photoZoomWrapper.nativeElement.scrollWidth;
    const maxAvailableHeight = this.photoZoomWrapper.nativeElement.scrollHeight;

    let zoomContainerWidth = maxAvailableWidth;
    let zoomContainerHeight = zoomContainerWidth / imageAspectRatio;

    if (zoomContainerHeight > maxAvailableHeight) {
      zoomContainerHeight = maxAvailableHeight;
      zoomContainerWidth = zoomContainerHeight * imageAspectRatio;
    }

    this.zoomContainerWidth = zoomContainerWidth;
    this.zoomContainerHeight = zoomContainerHeight;
  }

scss:

.modal-photo-details {
  &__photo {
    ::ng-deep {
      .ngxImageZoomFullContainer {
        border-radius: 5px !important;
      }

      .ngxImageZoomContainer {
        width: 100% !important;
        height: 100% !important;

        > img {
          max-width: 100% !important;
          max-height: 100% !important;
          border-radius: 5px;
        }
      }
    }
  }
}

[noveltieng]

The method below works for me. I have only tested with angular 7. Add the following code in style.css. Replace app-testComponent with the component selector's name.

app-testComponent .ngxImageZoomContainer > img { max-width: 900px !important; max-height: 650px !important; }

[abhishek-wh]

Thanks @Dperperidis

[dhruvg0001]

Why hello - I was playing around with this issue trying to fix it within the package itself.

I managed to fix how it displayed in the screen, but in an attempt to fix the zooming - I got something stranger and for my particular needs better than the original.

The picture now shows up on the screen perfectly fitting the container. Did so with a few inputs, a few if commands, and an appropriate scaling.

But now instead of only zooming in on the area you choose - the entire image pops out, and you move around it using the mouse. The mousewheel will zoom in and out.

Strangely better than what I expected. I don't know how I did the second part, and I'm too scared to ruin it. I implemented rotating for my older img file and will be attempting to do it to this as well.

As soon as rotating is up, I'll upload the branch. Again, I have no idea what I did - but it's working well.

[AlwinPonnan]

I managed to fix it with ::ng-deep

::ng-deep .ngxImageZoomContainer > img{ max-height: 450px!important; }

worked like a charm for me do try , i was stuck for about a week @Dperperidis

[edn9]

I want to thank first the creator and to you @crazy-grizzly for the help, I was having trouble with the plugin too (last Angular 10), the resize was not working showing the image fullscreen. Also, I want to say that if you use a transparent png image you gotta put this to make it work properly:

 .ngxImageZoomFull {
                    background: white !important;
                }

SCSS:

.modal-photo-details {
    &__photo {
        ::ng-deep {
            .ngxImageZoomFullContainer {
                border-radius: 5px !important;
            }

            .ngxImageZoomContainer {
                width: 100% !important;
                height: 100% !important;

                > img {
                    max-width: 100% !important;
                    max-height: 100% !important;
                }
                .ngxImageZoomFull {
                    background: white !important;
                }
            }
        }
    }
}

HTML:

<div class="modal-photo-details__photo" [ngStyle]="{width: zoomContainerWidth+'px', height: zoomContainerHeight+'px'}">
                                            <lib-ngx-image-zoom [thumbImage]="yourImageHere">
                                            </lib-ngx-image-zoom>
</div>

[bithiBD]

I want to thank the owner of ngx-image-zoom. A great work!!!

If we have same image for both Thumbnail and FullresImage, no need to extend or smaller the size of the image. I have just increase the magnification from 1 to bigger size (in my code, I used 3 instead of 1).

<lib-ngx-image-zoom [thumbImage]=myThumbnail [fullImage]=myFullresImage [magnification]="3" [enableScrollZoom]="true" [enableLens]="true" [lensWidth]="200">