ngx-image-zoom icon indicating copy to clipboard operation
ngx-image-zoom copied to clipboard

width and height with 0px

Open giovannidias1 opened this issue 4 years ago • 7 comments

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>

giovannidias1 avatar Feb 03 '20 20:02 giovannidias1

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?

wittlock avatar Feb 23 '20 20:02 wittlock

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

giovannidias1 avatar Feb 24 '20 22:02 giovannidias1

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.

Himato avatar Apr 28 '20 08:04 Himato

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.

softronsts avatar May 12 '20 11:05 softronsts

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

mksmanjit avatar Jun 19 '20 10:06 mksmanjit

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,

DgarciarDev avatar Aug 29 '20 18:08 DgarciarDev

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

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

saeed-abdul-rahim avatar Oct 19 '20 13:10 saeed-abdul-rahim