View Full Version : Jarvus.mobile.PinchCarousel

2 Jul 2011, 11:08 PM
For your pinching pleasure: http://mobile.jarv.us/pinch/demo.html
Source code on GitHub: https://github.com/JarvusInnovations/Jarvus.mobile.PinchCarousel

- Feed it an array of image URLs or a store
- Pinch to zoom in and zoom out
- Double tap to zoom in
- Carousel swipe is disabled while zoomed in, zoom back out to swipe to another image

Some known kinks remain:
- Loading spinner isn't centered
- If you zoom out off-center, the image will be clipped
- The image may jump if your pinch is imperfect, I believe this is from a lack of tolerance in Sencha Touch's pinch gesture detection... there is no jumping in the iOS simulator where pinches are always perfectly synced
- Pinch only works on iOS devices

If you have any suggestions / ideas for improvement, please share!

5 Jul 2011, 5:23 AM
my god.
I forgot how important this feature is.
I am sure with the help of the community you will be able to resolve all the constraints/problems you currently have.
most of my app is an image carousel. and without the pinch it is not the same.
only thing I would also love to see is loading of the images take place only when needed. I dont mind scrolling an image into a loading spinner and wait for the image to load.
thanks for the extension!

BTW. i hope pinch 2 zoom should will be a part of touch 2.0...

27 Jul 2011, 2:42 AM
r u still working on this plugin? or did you reach a dead end?

11 Dec 2011, 8:05 AM

The sudden 'image jumps' when trying to pinch happens, as far as I checked, when two events (touch and pinch) struggle between them. Sencha should've covered this situation in their implementation, but sadly they haven't.

Here's more technical details about (possibly) the culprit:

Maybe someone (Jarvys?) would like to override that function and introduce a working solution?


11 Dec 2011, 10:38 AM
Jacky told me at Senchacon that ST2s gesture system is all new and won't have these problems, I haven't given it a try myself yet though.

There's more of a technical discussion going on over in this thread I started before I got the release version working: http://www.sencha.com/forum/showthread.php?137632-mostly-working-pinch-zoom-image-carousel-help-perfect-it!&p=688687#post688687

11 Dec 2011, 11:18 AM
Thanks for the reply.
For a very nice pinch-zoom implementation, including the math, you may want to take a look at iScroll 4. The guy got the zoom to bounce back (and forth) when the contents are too small or too big. I think this is a nice start for you...

In any case, I'd be very happy to receive S2 soon. If I was at Sencha, I'd have probably pushed built-in pinch/zoom functionality in S2... This would just fix so much problems for the developers.


20 Dec 2011, 12:14 AM
can anyone explain the delay:10 part in the activate method of the mageViewer? I understand what it does I just want to understand why...

20 Dec 2011, 11:10 AM
One of the features of ImageViewer is applying a mask to the viewing area while the image loads.

In my experience if you apply a mask to a component directly during its afterrender/activate event it gets sized/positioned incorrectly even though the element is rendered. Inserting the 10ms delay is my habitual solution to that, deferring the mask until after the layout is fully realized

I would appreciate some feedback if anyone knows if this is a good or bad way to deal with this. My understanding is that the amount of time delayed doesn't matter, but it's necessary to use a timeout in order to queue the code to run after the current callstack finishes executing and the browser does its reflow. I've spotted sencha code usingsetTimeout(0, ...) in a couple places I think for the same reason. If the 10ms is actually creating a reliance on a race though I'd rather find a better event to hook to

20 Dec 2011, 1:39 PM
I'd love ro get an answer for the part about not being able to Zoom on small images(dont want to double post - see thread in link below)
Thanks in advance.
I have written something similar ro the imageviewer some time ago (no zoom though) and i remember using the loading spinner as the html for starters not waiting for any event. I think the user experience was slightly better