Pinch Zoom Scrollable Image

[samsonasu]

Thanks for posting this, it's great! You should consider put it on github to encourage other contributions. I think it's easier to collaborate on something like github.

I modified it a bit to handle a different use case for when the container needs to be sized different from the initial image and also added a couple small feature like maximum zoom-out level and better support for non-multitouch devices. Let me know if you'd like my version, or post on github and I'll fork it

[hotdp]

Thanks for posting this, it's great! You should consider put it on github to encourage other contributions. I think it's easier to collaborate on something like github.

I modified it a bit to handle a different use case for when the container needs to be sized different from the initial image and also added a couple small feature like maximum zoom-out level and better support for non-multitouch devices. Let me know if you'd like my version, or post on github and I'll fork it

Hi,
I would love to see your solution?

[mrsunshine]

i will put it on github asap and yes i like to see you solution as well

[gkatz]

@mrsunshine
what's the github url?
thanks

[welshcathy]

Hiya,

Just read this thread this morning - then came across this really good explanation of how to pinch-zoom using matrix transformations -- if anyone is interested in replacing the use of scrollers.

http://www.youtube.com/watch?v=lcD9CF0bxyk

Details on the matrix transforms start at around 12mins.
It's a talk by Stephen Woods a Flickr frontend engineer.

[gkatz]

Hiya,

Just read this thread this morning - then came across this really good explanation of how to pinch-zoom using matrix transformations -- if anyone is interested in replacing the use of scrollers.

http://www.youtube.com/watch?v=lcD9CF0bxyk

great f'ing video.
I wonder if the algorithm works as explained...

[Perdiga]

Did you have same sample using your carousel to help me ? i am getting the error "TypeError: 'undefined' is not an object (evaluating 'this.getActiveItem().getScrollable().getScroller')"

[Cacofoniks]

I am sorry to be so newbie, but I can not hide and help it

In a Touch 2 MVC app context, where should I put the custom class? ...and is it possible to use this class as an Ext.carousel.Carousel item?

Thanks!!!

Petros

[Cacofoniks]

Hi dphunkt and guys, this is an amazing post. Thank you for sharing the code!!

I am getting into some trouble though. I get an error when I try to swipe the carousel:

Uncaught TypeError: Object [object Object] has no method 'getScrollable' in the JS console.

i am not sure if I use it correctly though; i have added your code to a new file PinchCarousel.js under sdk/src/carousel and added this to Main.js:

Ext.define("pinchtest.view.Main", {
    extend: 'Ext.carousel.pinchcarousel',


    requires:[
    'Ext.Img'
    ],


    config:{
        xtype:'slideshow',
        autoMaximize:true,
            items: [
                {
                    
                    xtype:'image',
                    src:'resources/images/Zakkum003.jpg'




//                    html: '<img src="resources/images/Zakkum003.jpg" />'


                },
                {
                    xtype:'image',
                    src:'resources/images/Zakkum003.jpg'
//                    html: '<img src="resources/images/Zakkum003.jpg" />'


                }
            ]}
//    }
});

Any chance that you could maybe spot the error?

Thanks a bunch!

[dphunkt]

Cacofoniks, you'll want to wrap each of your image objects inside an Ext.Container since Ext.Image doesn't have a scrollable property. Something like this:

{
    xtype: 'container',
    //layout: 'auto',
    scrollable: {
        direction: 'both',
        directionLock: false,
        indicators: false,
        momentumEasing: {
            momentum: {
                acceleration: 60,
                friction: 0.3
            },
            bounce: {
                acceleration: 30,
                springTension: 0.3
            }
        }
    },
    items: [
        {
            xtype: 'image',
            //mode: '',
            cls: 'carousel-item-img',
            width: '320px',
            height: '240px',
            //centered: true,
            style: {
                '-webkit-background-size': 'contain',
                '-webkit-backface-visibility': 'hidden',
                '-webkit-perspective': '1000',
                '-webkit-transform': 'translate3d(0, 0, 0)'
            },
            src: src
        }
    ]
}