Porting Jaipho to iPad

April 19, 2010 by Tole

In last few weeks, there were few inquiries through contact form, regarding the porting Jaipho to work with iPad. Well, I plan to publish iPad release, but I'm heavily loaded with obligations so it will take me at few months to over it.

If you cant wait next release, here is the guide for doing it yourself. I haven't tried it, so there is no demo. Anyway, I think that the basic adaptation shouldn't be so hard.

Sizes

When one works javascript application for Safari, main difference between iPhone and iPad is screen size. So, if you want that Jaipho works on iPad, only thing you have to do is change sizes&positions of gallery elements.
In Jaipho, sizes are defined (hard coded) in css and on two paces in javascript application logic.

css:
- height of tool bars, top positions, min-width, min-height, width of slides
- just go through file and replace it one by one

js:
- JphSlider_Slider.prototype._GetSlideWidth() method gets the width of single slide (including space between slides)
- for iphone was 320+20 or 480+20 in landscape mode
- the space between (20) is defined in css selector "#slider-container .space"
- change this values according to iPad
- In private method JphUtil_OrientationManager.prototype._CheckOrientation() change the hardcoded value of screen width 320, to 768

After this you should have yourself a basic iPad optimized javascript image gallery working.
Only problem is that it is again hard coded, so you'll have to have two installations of it. One for iPhone and separate for iPad.

Running the iPhone and iPad at once

Again easiest solution. Create 2 css files, and by determining the user-agent header, pick one which you'll include.
Hard coded sizes that are used in javascript part, you can replace with some constants defined in user agent test block.
User agent testing block can be done both in php and javascript.

Permalink