Emulate iPhone Gallery Image View
Goal
I'm trying to build an app that emulates the iPhone gallery's image view. Right now all I'm trying to do is:
- Scale the image to fit the view
- Allow pinching to zoom
- Allow scrolling zoomed images
- Allow double-tapping to zoom
Current Code
Right now I'm doing:
var imageView = Titanium.UI.createImageView({
url: '../images/demo.jpg',
top: 0
});
var b = imageView.toBlob();
var w = (320 / b.width);
var scrollView = Titanium.UI.createScrollView({
width: 320,
contentWidth: b.width,
contentHeight: b.height,
zoomScale: w,
contentOffset : {x: 0, y: 0},
maxZoomScale: 5,
minZoomScale: w
});
Which gets me somewhat close. The image is scaled to the right size, and pinch/scroll work, but…
Problems
- The image loads off the screen—you have to scroll to view it (it's just to the right of the screen)
- The scrollable area is larger than the image when zoomed out (if the image is zoomed to fit the screen, you can scroll it off the screen)
- There's no double-tapping
Now, I can implement double-tapping myself, but I'm surprised that the image view can't handle this standard behavior. The other two issues I can't quite figure out… Anyone?
5 Answers
-
There is a wonderful open-source version at Codeboxed.
-
Did you ever get this working Chris?
I've been working with basic image manipulation myself, and I can't figure out pinch/zoom in a sane manner.
-
I figured I would add some of the code I used for displaying the photo gallery I created:
This code has a bug in which the 0th photo is placed below the 4th photo…
To display the tiled thumbnails (inside for loop, c is the increment):
var photoWidth = 75; var photoPadSide = 4; var leftPixels = 0; switch (c%4) { case (1): leftPixels = (photoWidth*0) + (photoPadSide*0) + photoPadSide; if ((c/4)>0){ topPixels=60+(photoWidth*((c/4)-1)+photoPadSide*((c/4)-1)); } else { topPixels=64+photoPadSide; } break; case (2): leftPixels = (photoWidth*1) + (photoPadSide*1) + photoPadSide; break; case (3): leftPixels = (photoWidth*2) + (photoPadSide*2) + photoPadSide; break; case (0): leftPixels = (photoWidth*3) + (photoPadSide*3) + photoPadSide; break; default: leftPixels = (photoWidth*0) + (photoPadSide*0) + photoPadSide; if ((c/4)>0){ topPixels=60+(photoWidth*((c/4)-1)+photoPadSide*((c/4)-1)); } else { topPixels=64+photoPadSide; } } -
I'm also looking for something similar to this.
Has anyone come up with a good code base for this?
-
I have wrote a easy to use plug-in that will just accomplish this, you find the plug-in over here http://codecanyon.net/item/titanium-gallery-module/167909 or check http://kiwiii.nl