Ionic-framework: Implement zoom in the Slider

[mhartington]

_From @kitkimwong on December 27, 2015 10:23_

i am using the example in :
https://github.com/driftyco/ionic2/tree/master/ionic/components/slides/test/basic

And i want to pinch to zoom the image in the Slider so that i add the class ion-scroll-zoom in the slides. But it seems not work.

<ion-slides [options]="extraOptions" id="slider" style="background-color: black" class="ion-scroll-    zoom">
  <ion-slide *ngFor="#image of images">
    <img data-src="{{getImageUrl(image)}}" slide-lazy>
  </ion-slide>
</ion-slides>

_Copied from original issue: driftyco/ionic2#816_

[mhartington]

_From @brandyscarney on December 28, 2015 15:42_

This is not added yet, but the way to do it would be to add the zoom property to the ion-slides:

<ion-slides [options]="extraOptions" id="slider" zoom>

[mhartington]

_From @kitkimwong on December 28, 2015 16:0_

@brandyscarney I tested "zoom" with the example:
https://github.com/driftyco/ionic2/tree/master/ionic/components/slides/test/basic

But it is not work, tested in android 4.4.4 and 5

[mhartington]

_From @kitkimwong on December 28, 2015 16:11_

Ok, thank you for your reply. Wait your team's good news.

[mhartington]

_From @brandyscarney on December 28, 2015 16:13_

:+1: I'm going to reopen this issue to get it added.

[FuzzyTree]

will the zoom option also be added to v1 or will it only be available in v2?

[applecat]

Zoom in slider is very important feature for apps that publish magazines.
Is there any other way to enable pinch-to-zoom in ionic slider now? Maybe with ion-scroll? I try, but ion-scroll not seems to work as expected.

[jgw96]

Hello @applecat ! A fix for this issue is slated for the next release, beta.7. Thanks for using Ionic!

[ghprod]

@jgw96 hi Justin ,when beta 7 will be available? Thanks

[jgw96]

@ghprod you can expect it soon (;

[applecat]

Hi. Beta 7 is ready, but It seems that zoom options has disappeared from the Slide component docs:
http://ionicframework.com/docs/v2/api/components/slides/Slides/
Does this mean that there will be no zoom in ionic2 slider?

[GavinHellyer]

Cannot get Zoom to work on anything, beta.7 or beta.8... Does anyone know how to get pinch to zoom working?

[brightpixels]

Hello, I can't get the zoom as well. Is it included yet?

[jgw96]

Hello @brightpixels it is not included yet, but we do have it marked for beta.9 so you can expect it sometime soon unless something changes ( which does happen (: ) Thanks for using Ionic!

[brightpixels]

@jgw96 thanks. But I just had a look at beta.9 roadmap and I can't see it in the list: https://github.com/driftyco/ionic/milestones/2.0.0-beta.9. Am I looking in the right place to see the upcoming beta.9 features?

[jgw96]

Hey @brightpixels it is the last on the list on page two of the beta.9 milestone issues. You can also see that it's added to the milestone by looking on the right side of this page. Thanks!

[chandanch]

Hello Is the zoom feature available now for slides?.

[chandanch]

I tried
<ion-slide *ngFor="let sliders of imageforSliders" zoom> ........
but did not work, Is there any alternative for pinch & zoom?

[nickwinger]

is it implemented now with beta.10 ? i can't see it in the docs.

[arsenslyusarchuk]

Really need zoom of image for Ionic2

[LufoX11]

+1 I think this is like a "required" featured. Is there any other component (not including an external component) to perform this? I'm on beta 10 and it's still missing.

[HendrikGrobler]

I don't quite get why zoom is being added to Slides specifically? Surely it would make more sense to be able to make any image zoomable?

[arsenslyusarchuk]

right, but slides (galley) definitely should have that

[arsenslyusarchuk]

@jgw96 Why is that removed from milestone?

[jigsaxis]

Now beta@11 out any update on This?

[GuiCarneiro]

Any updates?

[grapemix]

We still want this feature badly. Although performance is still in my top wish list.

[jigsaxis]

I also want this, it's a very important, ionic team please update this asap..

Meantime I found one useful link for zoom image https://tonicdev.com/npm/ionic-img-viewer
Might be helpful for some one meantime..

[applecat]

Is there any news on that feature?
I'll try to use Framework7's Photo Browser with Cordova without Ionic at all for displaying magazine's images.

[AlgirdasVZ]

So any updates on the issue? Is this feature planned for the production version of Ionic 2?

[AbrahamLopez10]

Having this feature would be awesome. And it could be used for single images by just being able to add a "lock" option to the slider, so that it doesn't respond to slide gestures, but does respond to pinch to zoom.

[shahidmughal]

This issue is open for almost one year. When this will be fixed?

[GavinHellyer]

I have managed to get a work around for this, created a Directive for Pinch Zoom - Pan, and then some small tweaks to the Slider allows you to pinch to zoom and pan without it destroying the Slider.

I am using HammerJS: npm install --save-dev hammerjs

Directive:

import { Directive, ElementRef } from '@angular/core';

declare var Hammer;

@Directive({
    selector: '[zoom-pan]'
})
export class ZoomPanDirective {
    private element: any;

    public isZoomed: boolean;

    constructor(el: ElementRef) {
        this.element = el.nativeElement;
        this.setZoomed(false);

        this.hammerIt(this.element);

    }

    private setZoomed(zoomed) {
        this.isZoomed = zoomed;
        this.element.setAttribute('zoomed', this.isZoomed);
    }

    private hammerIt(elm) {
        let hammertime = new Hammer(elm, {});
        hammertime.get('pinch').set({
            enable: true
        });
        let posX = 0,
            posY = 0,
            scale = 1,
            last_scale = 1,
            last_posX = 0,
            last_posY = 0,
            max_pos_x = 0,
            max_pos_y = 0,
            transform = '',
            el = elm;

        hammertime.on('doubletap pan pinch panend pinchend', (ev) => {
            if (ev.type === 'doubletap') {
                transform =
                    'translate3d(0, 0, 0) ' +
                    'scale3d(2, 2, 1) ';
                scale = 2;
                last_scale = 2;
                try {
                    if (window.getComputedStyle(el, null).getPropertyValue('-webkit-transform').toString() !== 'matrix(1, 0, 0, 1, 0, 0)') {
                        transform =
                            'translate3d(0, 0, 0) ' +
                            'scale3d(1, 1, 1) ';
                        scale = 1;
                        last_scale = 1;
                    }
                } catch (err) { }
                el.style.webkitTransform = transform;
                transform = '';
            }

            // pan
            if (scale !== 1) {
                posX = last_posX + ev.deltaX;
                posY = last_posY + ev.deltaY;
                max_pos_x = Math.ceil((scale - 1) * el.clientWidth / 2);
                max_pos_y = Math.ceil((scale - 1) * el.clientHeight / 2);
                if (posX > max_pos_x) {
                    posX = max_pos_x;
                }
                if (posX < -max_pos_x) {
                    posX = -max_pos_x;
                }
                if (posY > max_pos_y) {
                    posY = max_pos_y;
                }
                if (posY < -max_pos_y) {
                    posY = -max_pos_y;
                }
            }

            // pinch
            if (ev.type === 'pinch') {
                scale = Math.max(.999, Math.min(last_scale * (ev.scale), 4));
            }
            if (ev.type === 'pinchend') { last_scale = scale; }

            // panend
            if (ev.type === 'panend') {
                last_posX = posX < max_pos_x ? posX : max_pos_x;
                last_posY = posY < max_pos_y ? posY : max_pos_y;
            }

            if (scale !== 1) {
                transform =
                    'translate3d(' + posX + 'px,' + posY + 'px, 0) ' +
                    'scale3d(' + scale + ', ' + scale + ', 1)';
            }

            if (transform) {
                el.style.webkitTransform = transform;
            }

            if (scale <= 1) {
                this.setZoomed(false);
            } else {
                this.setZoomed(true);
            }
        });
    }
}

Slider:

public options: any = {
    onSliderMove: (event: any) => this.allowedToSlide(event)
};

private allowedToSlide(swiper) {
    let slideIndex = this.sliderControl.getActiveIndex();
    let slide = swiper.slides[slideIndex];
    let zoomPan = slide.querySelector('[zoom-pan]');
    let isZoomed = (zoomPan.getAttribute('zoomed') !== 'false');

    if (isZoomed) {
        swiper.lockSwipes();
    } else {
        swiper.unlockSwipes();
    }
}

I know it would be better in a repo so you can view it, but this is currently in an on-going project, anyways I hope that snippet of code helps someone until this gets resolved!

[ghprod]

@GavinHellyer wow thats cool, i think Ionic team should hire you :+1:

[shahidmughal]

@GavinHellyer Thanks for your solution. Hope Ionic team fixes this issue as it has been lingering for quite sometime.

[kitkimwong]

Ha, I am the one who open this issue from December 27, 2015.
Now It is 2016 December and I return back to look whether this issue is solved although I had given up to use ionic2 .
It is sad that if there is no official solution about this problem because this is the basic component for any app.

But anyways, thanks a lot for the hard work of all the Ionic team, and glad to see this great framework look so awesome. :)

Cheers!

[ghprod]

@kitkimwong do you have any recommendation other than ionic?

[shahidmughal]

@kitkimwong - Try solution presented by @GavinHellyer. It works like a
charm. Ping me if you need further help.

On Sat, Dec 10, 2016 at 8:07 AM Ferri Sutanto [e-mail]
wrote:

@kitkimwong https://github.com/kitkimwong do you have any
recommendation other than ionic?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/driftyco/ionic/issues/5039#issuecomment-266218693,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAm-ah4j3i7SsBfDUbgy2oVE8upzYtipks5rGs5dgaJpZM4HHUDQ
.

[applecat]

@ghprod I can recommend to use Framework7 instead of Ionic. Ionic/Ionic2 is great, but F7 have a lot of ready to use components, it really fast, easy to use (no need to learn Angular/Angular2 for example), and have many other features.

In Framework7 you can use Swiper Slider and Photo Browser for slider with zoom feature.

I have successful experience with F7. We have created two apps in a few month. For comparison, we have invested one year in Ionic1 app development, and our app was almost ready, but it had some serious performance issues on old mobile devices. We decided migrate app to Ionic2, invest many time to learn all this new Angular2 conceptions, but migration was a very time-consuming. And Ionic2 does'n have components we need -- Zoom in Slider and Messages component. And with F7 we can create our apps in short time period. Hope this helps somebody.

[pausalvi]

@GavinHellyer @shahidmughal
Where should [zoom-pan] be attached? ion-contect? ion-slides? ion-slide?
Thanks in advance.

[GavinHellyer]

Slider:
<ion-slide *ngFor="let image of images"> <img [src]="image.url" zoom-pan /> </ion-slide>

CSS:
.slide-zoom { display: block; position: relative; overflow: hidden; width: 100%; height: 100%; }
.slide-zoom img { display: block; position: absolute; top: -50%; bottom: -50%; left: 0; right: 0; margin: auto; max-width: 100%; max-height: 100%; width: auto; height: auto; }

I hope that helps

[danielehrhardt]

Anything new?

[vassallocarlo]

+1

[mhartington]

We are working on adding this feature. For now, I am locking this issue.

[jgw96]

This issue was moved to driftyco/ionic-feature-requests#114