Zoom-area crashes inside of an ion-slide

[Ahmadre]

I got my zoom-area inside of an ion-slide, but when i apply that on my image, the image is displayed on the bottom of the screen and isn't centered anymore. So my slide will break, when i apply an zoom-area :(

can you help me?

[leonardosalles]

@Ahmadre thanks for this issue. It is planned to the next big release, will be released in the next few days, keep you eyes in this issue.

[Ahmadre]

@leonardosalles great thanks. now I wrapped the swiper-zoom-container outside my image, until you fix that, because i played around with the css, but it's a desaster, i just can't repair it ^^

[leonardosalles]

@Ahmadre no problems dude, it is already fixed now zoom area should work with all ionic elements, like card and others. I am finishing some new features to release it together.

[ahboyboy]

@leonardosalles any specific date for this new release? I am facing the ion-scroll issue too

[Ahmadre]

For your information:

This is how the images appear. My Code is:

<ion-slides #slides (ionSlideDidChange)="checkSlidePos()" pager>

        <ion-slide *ngFor="let image of images">
            <!-- <div class="swiper-zoom-container"> -->
              <zoom-area>
              <img id="galimg" src="{{imagePrefix}}{{image.filename}}" />
              </zoom-area>
            <!-- </div> -->
        </ion-slide>

    </ion-slides>

[jose-cabrera]

Hi! when will be the next big release? i'm having the exact same problem as @Ahmadre.

[leonardosalles]

It is planned to July. I am doing it from scratch to make better performance.

[pistou]

Any quick fix / clue for it? PLEASE I need it now, not in July tbh..

[leonardosalles]

It is not planned to be inside an ion-slide, fixes will be not applied for that because it's a new feature that I am added to this new version. But feel free to submit a PR with this feature for actual version.

[Ahmadre]

@pistou He's doing this for FREE! So chill out

[pistou]

Here is my trick:

home.html

<div #zoomWrapper class="zoom-wrapper">
    <zoom-area>
        <img [src]="path" [class]="asset.attributeClass" #zoomImg />
    </zoom-area>
</div>

home.ts

@ViewChild('zoomWrapper') zoomWrapper: ElementRef;
@ViewChild('zoomImg') zoomImg: ElementRef;

ngOnInit() {
    if (this.zoomWrapper && this.zoomImg) {
        // this is to set the container's height equal to the img's displayed height
        this.zoomWrapper.nativeElement.style.height = this.zoomImg.nativeElement.clientHeight + 'px';
    }
}

home.scss

.zoom-wrapper {
    zoom-area {
        width: inherit !important;

        ion-content {
            width: inherit !important;
            background-color: transparent;

            .scroll-content {
                width: inherit !important;
                padding: 0 !important;

                .zoom {
                    width: inherit !important;
                    position: absolute !important;
                }
            }
        }
    }
}

[Ahmadre]

@pistou I'll give it a try 🤔

[pistou]

It works in my case.. But it's super hacky IMO