1. #11
    Sencha User
    Join Date
    May 2008
    Posts
    19
    Vote Rating
    0
    samsonasu is on a distinguished road

      0  

    Default


    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

  2. #12
    Touch Premium Member hotdp's Avatar
    Join Date
    Nov 2010
    Location
    Denmark
    Posts
    603
    Vote Rating
    14
    hotdp will become famous soon enough

      0  

    Default


    Quote Originally Posted by samsonasu View Post
    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?

  3. #13
    Sencha - Training Team mrsunshine's Avatar
    Join Date
    Sep 2008
    Location
    Germany - Darmstadt
    Posts
    691
    Vote Rating
    12
    mrsunshine will become famous soon enough

      0  

    Default


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

  4. #14
    Sencha User
    Join Date
    Nov 2010
    Posts
    407
    Vote Rating
    6
    gkatz is on a distinguished road

      0  

    Default


    @mrsunshine
    what's the github url?
    thanks

  5. #15
    Sencha Premium Member
    Join Date
    Jan 2011
    Location
    London, UK
    Posts
    50
    Vote Rating
    2
    welshcathy is on a distinguished road

      0  

    Default


    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.

  6. #16
    Sencha User
    Join Date
    Nov 2010
    Posts
    407
    Vote Rating
    6
    gkatz is on a distinguished road

      0  

    Default


    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...

  7. #17
    Sencha User
    Join Date
    Dec 2011
    Location
    Brazil
    Posts
    106
    Vote Rating
    0
    Perdiga is an unknown quantity at this point

      0  

    Default


    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')"

  8. #18
    Sencha User
    Join Date
    Mar 2012
    Posts
    6
    Vote Rating
    0
    Cacofoniks is on a distinguished road

      0  

    Default


    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

  9. #19
    Sencha User
    Join Date
    Mar 2012
    Posts
    6
    Vote Rating
    0
    Cacofoniks is on a distinguished road

      0  

    Default


    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:

    Code:
    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!

  10. #20
    Sencha User
    Join Date
    Jan 2012
    Location
    New York, NY
    Posts
    5
    Vote Rating
    0
    dphunkt is on a distinguished road

      0  

    Default


    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:

    Code:
    {
        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
            }
        ]
    }