Hybrid View

  1. #1
    Sencha User
    Join Date
    Jun 2010
    Location
    France
    Posts
    44
    Vote Rating
    0
    ludm is on a distinguished road

      0  

    Question how to include pinch in a Carousel ?

    how to include pinch in a Carousel ?


    Hello,
    First of all Sencha is a great idea / project!

    I've made an app with 2 tabs composed of 2 Carousel, it works fine.

    I want to add the pinch function on the images in the Carousel, Iv'e made like this, but it doesn't works:
    Code:
     
    items: [{
    title: 'Image 1',
    html: '<div id="picture"><img src="photos/miami/miami-beach01.jpg" /></div>'
    }, {
    ....
    With the event
    Code:
    	
    Ext.fly('picture').on({
        	pinchstart : function(e, t) {
        	      this.startScale = this.scale;
        	},
    	            
        	pinch : function(e, t) {
        	       this.scale = e.scale * this.startScale;
        	       t.style.webkitTransform = 'scale(' + this.scale + ')';
        	},
    	            
        	scope: {scale: 1}
        });
    What's wrong with my code ?

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    10
    TommyMaintz will become famous soon enough TommyMaintz will become famous soon enough

      0  

    Default


    It is hard to answer without seeing this code in context. My first guess would be that you are trying to bind the event listener before the component is rendered (and thus before the picture element exists).

  3. #3
    Sencha User
    Join Date
    Jun 2010
    Location
    France
    Posts
    44
    Vote Rating
    0
    ludm is on a distinguished road

      0  

    Default


    With this code it works in a simple page but not in the carousel, so I wonder if it doesn't come from the carousel
    Code:
    var page2 = new Ext.Component({
            title: 'Pinch',  // Name that appears on this tab
            cls: 'page2',    // The CSS class. Lets you style elements on the timeline.
            scroll: 'vertical', // Make it vertically scrollable
    html: '<div id="picture"><img src="photos/miami/miami-sunrise-2.jpg" /></div>',
        });

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    10
    TommyMaintz will become famous soon enough TommyMaintz will become famous soon enough

      0  

    Default


    It might have something to do with the Carousel intercepting some of the touch events. This is a very specific case that I haven't tried or ran into yet. There are some things on our list that have high priority right now, but I definitely want to come back to this and see if we can get this to work. Is there a way you can work around this functionality for now?

  5. #5
    Sencha User
    Join Date
    Nov 2007
    Posts
    2
    Vote Rating
    0
    bobh is on a distinguished road

      0  

    Default


    Hello. Just checking if any progress has been made on including a pinch function in a carousel -- I'd like to see a Sencha Touch photo album viewer that implements some of the functionality in the native "Photos" app on the iPad. Specifically, swiping left or right to view the next or previous photo, and pinching to zoom-in/out on the photo.
    TIA.

  6. #6
    Ext User
    Join Date
    Jun 2009
    Posts
    72
    Vote Rating
    0
    elkidos is on a distinguished road

      0  

    Default


    +1 to be able to pinch images within a Carousel!

Similar Threads

  1. Carousel on Android
    By VinylFox in forum Sencha Touch 1.x: Bugs
    Replies: 3
    Last Post: 21 Jun 2010, 2:05 PM
  2. gxt carousel
    By superjames in forum Ext GWT: Discussion
    Replies: 1
    Last Post: 13 Nov 2009, 5:13 AM
  3. Carousel
    By doron447 in forum Ext: Q&A
    Replies: 8
    Last Post: 9 Jul 2009, 1:25 AM
  4. extjs carousel ?
    By nightowl in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 13 Jan 2009, 12:18 PM

Thread Participants: 7

Tags for this Thread