mostly working pinch-zoom image carousel -- help perfect it!

[armode]

I thougt so, but I was not able to use just the Imageviewer

Another usage example for that case would be a great help, thanks!!!

[themightychris]

I just posted expanded examples to the GitHub repo, here's the one for a standalone image viewer: https://github.com/JarvusInnovations...ple-image.html

I found a bug in the ImageViewer component that may have been causing your trouble -- it was waiting for an "activate" event to initialize itself. This keeps unseen images from loading in the carousel but had the side effect of keeping the image from loading at all if the viewer wasn't contained in a card layout

ImageViewer now initializes itself afterrender instead, and has a config option initOnActivate which if true causes it to wait for activate instead. The PinchCarousel component has been consequently updated to supply initOnActivate=true when it instantiates viewers.

Edit: market version is updated as well: http://market.sencha.com/addon/jarvu...-pinchcarousel

[gkatz]

Hi; love this plugin...
does the original image size determine the max zoom size I can pinch to? it seems like I cant 'pinch to zoom' small images...
also, can some one please explain the delay:10 thing? why is a delay needed?
thanks.

[mbalsam]

This works almost perfectly. There's only one thing that spoils the experience: the moment you stop pinching the image it jumps out of place and then quickly jumps back. It's only for a few milliseconds but gives you the impression of flickering. The reason can probably be found in the part where the scroller is adjusted. If this was fixed this would be a pretty nice component.

[armode]

Hi Chris,

thanks for the quick bug fix and the advanced examples, that helped me alot and your component works fine for me.
It seems that PNGs and GIFs can not be displayed on an iOS device, Android and Safari for Win works fine. Any idea how to fix that?
On Android phones it seems that the pinching gestures don't work, just the double tap function works on mine...

Thx again for sharing this great component with us!!!

[lalbihari]

but this is not working in multi screen devices.
have u checked????.........

[armode]

but this is not working in multi screen devices.
have u checked????.........

what do you mean with 'multi screen devices'?

I have found a solution how to show PNGs or GIFs inside the component, actually there's no bug in the component, it's a problem on iOS devices. There seems to be a 'magic' resolution border of about 5 Megapixels; if the image is bigger than that size, the bowser just show a question mark respectivly the component can't load the image. Maybe the 5MP border changes on different iOS devices, in my case an iPhone 4. Any idea, if it is possible to show bigger images on iOS devices???

Still didn't find a solution how to get the pinching gestures to work on Android phones...

[gkatz]

Hi;
is there a port to sencha touch 2 in the works? anything planned? maybe even something based on Ext.Image?

[themightychris]

re: pinch on android
it's not going to happen, at least not on current devices... the browser doesn't pass multitouch events

re: sencha 2 port
i'm going to tackle it soon, I just started getting the hang of ST2. Basing it on Ext.Image is a good idea

[Winnie Lam]

Thanks for the great plug-in, it is really nice and helpful.

I can't get the viewer work if I am using the store. I am storing the image path as 'Path' in the store and assign the store to the pinch-carousel by

 view.carousel.store = App.stores.floorPlanStore;

I have already updated the two fields in PinchCarousel.js.

,imageField: 'Path'
,previewField: 'Path'


Can anyone please kindly advise? Thanks a lot.

Ext.regModel('FloorPlan', {
    idProperty: 'Code',
    fields: [
        {name:'TypeCode', type:'string'},
        {name:'Code', type:'string'},
        {name:'Description', type:'string'},
        {name:'Path', type:'string'}
    ]
});

this.store = new Ext.data.Store({
            autoLoad: true,
            model: 'FloorPlan'
        });


this.carousel = new Jarvus.mobile.PinchCarousel({
            fullscreen: true,
            /*
            images: [
                'http://placekitten.com/800/600'
                ,'http://placekitten.com/1024/600'
                ,'http://placekitten.com/2048/1024'
            ],
            */
            store: this.store,
            imageField: 'Path',
            previewField: 'Path'
        });