wittlock / ngx-image-zoom

Angular component for zoomable images
https://wittlock.github.io/ngx-image-zoom/
MIT License
134 stars 64 forks source link

width and height with 0px #51

Open giovannidias1 opened 4 years ago

giovannidias1 commented 4 years ago

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>
wittlock commented 4 years ago

Hi, I just released 0.5.0 with Angular9 support where I tweaked the image sizing a bit. Does the problem still exist in that version?

And when you say dynamic image, do you mean dynamic in that it's generated by server code rather than being a static image? Or do you mean dynamic in that you change what image is being shown?

giovannidias1 commented 4 years ago

The 2 ways both server and how to change it. I will test the new version. Thanks

Himato commented 4 years ago

I had the same problem, so I downloaded the library's to figure it out ... And, I had to change this line in the ngx-image-zoom.component.html to a fixed size ...

<div #zoomContainer class="ngxImageZoomContainer" [style.width.px]="this.thumbWidth" [style.height.px]="this.thumbHeight">

I don't think that the method responsible for assigning the width and the height is working properly.

softronsts commented 4 years ago

Screenshot_20200512-192135_Slack

Could you fix this problem?

To make it work we are editing subject file in mode_modules.

Looking forward to your update.

mksmanjit commented 4 years ago

Any Update on this? or any workaround, i am stuck because of this

DgarciarDev commented 4 years ago

Hi, This is working for me...

its a manual solution, but its urgent now:

I'm using "ngx-image-zoom": "^0.6.0", Angular 9 and DOM elements:

in my html:

<lib-ngx-image-zoom id="elevatezoomBig" mode="hover" [thumbImage]="imgPrincipal" [fullImage]="imgPrincipal"></lib-ngx-image-zoom>

in my TS file:

ngAfterViewInit() { var c = document.getElementById("elevatezoomBig").children[0]; c.removeAttribute("style"); c.setAttribute("style", "imgContainer"); }

... and in my css file:

.imgContainer{ width: 100% !important; height: auto !important; }

i'm not sure if is a best practice, but is a solution for me

Regards,

saeed-abdul-rahim commented 3 years ago

My workaround was: Going to styles.css file in your angular project and add:

.ngxImageZoomContainer {
    width: auto !important;
    height: auto !important;
}