Skip to content

Download Jaipho

jaipho-0.55.00.zip
160.42 KB
view

Download Pipho

pipho-1.02.01.zip
153.85 KB
view

Support Jaipho

Jaipho beta is a free script and we hope that you enjoy using it. If you do, here is a way that you can show us that you appreciate the hard work that we've done for you!





Home

JAIPHO beta - Javascript image gallery for iPhone

March 21, 2009 by Tole

One of the most impressive iPhone achievements is the Photos application. Taking advantage of big screen, gestures, gyroscope and most important: extra good user interface it is just miles away from ordinary cell phones.
There is one more another iPhone killer feature: Safari browser. It actually made for first time in history, mobile surfing really usable. You can browse the mobile, as well as standard websites and enjoy in it.

But what is the situation when you are browsing some web images gallery?
Mobile sites I found mainly had just plain next/forward buttons, resized images to optimal size but usually you had to scroll images to see them in whole. Anyway that are actually good solutions. In most cases not iPhonized at all, but still usable.
Galleries on standard websites are different story. You have to both scroll and resize screen to actually see the selected image. Another level of unusability is added by javascript based solutions. Opened in browser on your PC, they are great, but with iPhone, usually after you manage to go to next slide (if you manage it at all) you will give up from further watching.

After long search finally I found three iPhone optimized galleries which are based on Photos application (links should be accessed with iPhone):

Finally something usable, only problem was that those solutions are "in house" projects and you can not download them use on your own website.

Idea was born: to make javascript component which will be easy to implement on any site, and which will give iPhone users native experience when they are surfing the web galleries.

And now, few months later, here is the JAIPHO in fully functional beta release. It is iPhone optimized web gallery and, your iPhone users will finally get what they are expecting to. You can use it for free and implement it on your web, mobile or iPhone site.

Here is a short features and advantages list:

  • Full iPhone optimized experience including images sliding effect and finger gestures
  • Both, thumbnails and full screen modes
  • Language independent. It is written in Javascript. You can use it with php, jsp, asp, ...
  • Published under LGPL. You can use it for free even on commercial sites.
Bookmark/Search this post with:
Permalink

Comments

number of images in gallery

July 5, 2011 by Anonymous (not verified), 30 weeks 5 days ago
Comment id: 539

hi there - awesome app.

I'm 99.99% completed a mini website gallery using your awesome script but I've noticed that if I add more than 20 images in a gallery, when i click on a thumbnail image greater than 19 the site redirects to the thumbnails of another gallery. I have setup 3 galleries for example summer.html, winter.html, archive.html. So selecting image #22 in archive will take me to the summer gallery instead of the slideshow images for archive starting at #22.

Is there a limit to the number of images that can be shown?

thank you.

George

RE: number of images in gallery

July 6, 2011 by Tole, 30 weeks 4 days ago
Comment id: 540

There is no limit in number of images. E.g. my test gallery has 140 images.
Your problem is related to something else. Got somewhere live demo of it? You can send the link through the contact form.

... terrific idea. Is there a

June 24, 2011 by GJ (not verified), 32 weeks 2 days ago
Comment id: 537

... terrific idea.

Is there a way to do without the thumbnails, and just start at the first full-sized image ?

regards,

GJ

Yes there is. Please check

June 25, 2011 by Tole, 32 weeks 1 day ago
Comment id: 538

Yes there is. Please check the http://www.jaipho.com/content/installation-guide

void landscape

May 25, 2011 by Knikol (not verified), 36 weeks 4 days ago
Comment id: 519

First thing first................ great script, I been looking for days nothing but confusion on the net, anyway my question is how do I make it so it only works in portrait since my project involves portrait images, landscape will take from the presentation I have in mind......................so I only want it to be native portrait and and orientated sideways nothing happens...................[ for Iphone & Ipad ].............once again great contribution to the web world,

RE: void landscape

May 25, 2011 by Tole, 36 weeks 3 days ago
Comment id: 522

No it can not be done. There in no technical possibility to disable orientation change in iPhone's browser.

How to enlarge the thumbnails

May 11, 2011 by Gilles (not verified), 38 weeks 3 days ago
Comment id: 510

could you tell me how to enlarge the thumbnails, they are quite unreadable and unusable on iphone, they are far too small.
thanks in advance,
Best,
Gilles

RE: How to enlarge the thumbnails

May 12, 2011 by Tole, 38 weeks 2 days ago
Comment id: 512

You can change it in css, by changing the .thumbnail selector width proeperty. Default is 75px.

iPad site dimensions

March 14, 2011 by Justin Brimacombe (not verified), 46 weeks 6 days ago
Comment id: 465

Hi, still loving this slideshow. Fantastic!

Is there a reason for the gap at bottom of ipad version? I checked the demo and it also has this gap at the bottom of the page in slide section.

Do you have a css that doesn't have the gap at bottom? Some secrete experimental version : )

Thanks

RE: iPad site dimensions

March 22, 2011 by Tole, 45 weeks 4 days ago
Comment id: 476

Sorry on late answer. I had a rough week.

Yes, seems that the iPad version is not perfect. It has hardcoded size values, which is not suitable for safari on iPad.
Later versions with android support will have this one fixed.

Right now, you can adjust jaipho-ipad.css file.
For this, I guess that the "slider-toolbar-bottom" css selector is enough.
If you have to adjust something other, just look for the top properties and play with them.

ipad version

November 30, 2011 by Justin (not verified), 9 weeks 4 days ago
Comment id: 632

Hi, hope this week is treating you better! Wondered if you had bought out a version with resized values. Whatever I change in the jaipho-ipad.css file seem to expand the page past screen dimension for some reason. Evidently I have no idea what I'm doing...

Thanks

RE: ipad version

December 1, 2011 by Tole, 9 weeks 3 days ago
Comment id: 633

Seems that same week is hitting me again and again ;)

No, the auto resizing version is still not done. I guess it will take me two months more to finish it (zoom feature took much more time than i originally planned).
Are the symptoms same on jaiphodemo.info too?
If so, i'd recomend to keep it that way until I release the fixed version.

Sorry to hear that! In which

December 4, 2011 by Justin (not verified), 9 weeks 4 hours ago
Comment id: 635

Sorry to hear that! In which case I will not add to it and wait till new version.

Just so you know it's the iPad version only. It's possible to see the white gap at bottom on http://www.ipad-emulator.com/ using your original unaltered download. iPhone version works perfectly on jaiphdemo.info.

It can wait though. Auto resize sound fantastic!!!

Thanks

Adding multiple galleries

January 19, 2011 by Justin Brimacombe (not verified), 1 year 2 weeks ago
Comment id: 401

Thank you! I am a novice and your tutorial is very easy to follow.

I maybe doing this very wrong! I am trying to add multiple galleries and have simply duplicated the code to make addition gallery. As in:

http://74.220.219.65/~justinb2/test/menu.html

It kinda works but when you turn the phone horizontal the text increases in size. This does not happen when there is only one...?

Any help would be much appreciated!

Sorry if this appears twice!

Thanks

RE: Adding multiple galleries

January 19, 2011 by Tole, 1 year 2 weeks ago
Comment id: 402

Well you have several issues on your pages.

1. Remove #1 from your links to galleries (it opens it on second slide)

2. I'm not sure why the gallery title is resided. Try to revert css file to original, and try to re modify it step by step again

3. In your fashion.html, beauty.html and celebrity.html, you have to change javascript code which defines gallery images.

                var dao =       new Jph_Dao();

                dao.ReadImage( 0,'1.jpg','1t.jpg','','');
                dao.ReadImage( 1,'3.jpg','3t.jpg','','');
                dao.ReadImage( 2,'4.jpg','4t.jpg','','');
                dao.ReadImage( 3,'6.jpg','6t.jpg','','');
             ......
             .....

Adding multiple galleries

January 20, 2011 by Justin Brimacombe (not verified), 1 year 2 weeks ago
Comment id: 403

Thank you so much for all the help! I have fixed points 1 and 3. I am waiting until I know I can get it to work before populating fully.

Point 2 is still a problem. The text still increases in size when iphone rotates to landscape.
http://74.220.219.65/~justinb2/test/menu.html. I have created another test file with original download untouched. The only thing I have altered is the list file duplicating ul area, http://74.220.219.65/~justinb2/test2.list.html. The text increases in size here as well. So I do not think it is the css. Only one ul and text remains correct size. Strange? Is there anything that can fix this?

At the risk of sounding really dumb ~ are you meant to have both css in single page? If so, I'm missing something as the images are to big now on iphone. Or, should I create two separate site? One for iphone and one for ipad.

Following no from that last point. Should it be one or the other scrollTo also (below)? Am I meant to have both on a single page?

scrollTo(0,1);
var or_mngr = new JphUtil_OrientationManager( 320, 480); // iPhone version
var or_mngr = new JphUtil_OrientationManager( 768, 1024); // iPad version

RE: Adding multiple galleries

January 23, 2011 by Tole, 1 year 1 week ago
Comment id: 409

Got to admit that documentation lacks in the matter of iPad implementation. Right now the best is to check the pipho implementation.
In short, when there is a iPhone user on, you include only default css. When it is iPad, turn on additional for iPad (yes, in this case there are 2 css files in one page)
OrientationManager part is separate for iPhone and separate for iPad.

Adding Multiple galleries

February 9, 2011 by Justin Brimacombe (not verified), 51 weeks 3 days ago
Comment id: 414

Thanks again for all the help. Still trying to figure the below out (corrected link). Do you have any ideas how I might control text size when orientation is horizontal?

The text still increases in size when iphone rotates to landscape.
http://74.220.219.65/~justinb2/test/menu.html. I have created another test file with original code untouched including css. The only thing I altered is the list file duplicating ul area, http://74.220.219.65/~justinb2/test2/list.html. The text still increases in size when iphone is rotated to horizontal/ landscape. Strangely if you do not duplicate ul the text remains correct size. Strange?

This is the last bit I need to solve to implement multiple galleries!

BTW, would you happen to know why the contact details at bottom float 1cm from bottom? I used following css. I think it has something to do with min-height: 427px but I do not understand how to alter this without changing the page layout.

#footer {
position: absolute;
bottom: 0;
}

Thx

RE: Adding multiple galleries

February 10, 2011 by Tole, 51 weeks 2 days ago
Comment id: 416

You have to duplicate li part. As result, you will have multiple li inside single ul tags.
I tried the links with my iPhone, and it seems that you're always serving iPad specific parts (css, and OrientationManager).

Adding multiple galleries

February 12, 2011 by Justin Brimacombe (not verified), 51 weeks 1 day ago
Comment id: 417

Here is a more up to date link, http://74.220.219.65/~justinb2/test. I attempted to implement single ul containing multiple li but the text still seems to increase in size when iphone is turned horizontal.

Any other suggestions would be much appreciated,
Thank you!!!

RE: Adding multiple galleries

February 14, 2011 by Tole, 50 weeks 6 days ago
Comment id: 418

Try to overwrite your modified jaipho.css with the original one and check is the problem still there.

Adding multiple galleries

February 15, 2011 by Justin Brimacombe (not verified), 50 weeks 5 days ago
Comment id: 422

Yes, the problem is still there. Included is a link to the original downloaded code not modified with addition li. The text increases in size when iphone is rotated horizontally.

http://74.220.219.65/~justinb2/test2/list.html

RE: Adding multiple galleries

February 16, 2011 by Tole, 50 weeks 3 days ago
Comment id: 424

Strange. It must be something stupid that we both are missing.
Try to add this to css file

html {
    -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}

Adding multiple galleries

February 19, 2011 by Justin Brimacombe (not verified), 50 weeks 1 day ago
Comment id: 428

Success, fantastic! I would never have guessed.

And, thank you for all your help along the way!!!

Finished site:

http://74.220.219.65/~justinb2/iphone

Good work!Keep it on!

July 23, 2010 by gjugo (not verified), 1 year 28 weeks ago
Comment id: 226

Good work!Keep it on!

in app ?

February 16, 2010 by Roland (not verified), 1 year 50 weeks ago
Comment id: 114

Hi there,

Cool script ! definitely, thanks for that.

Does anyone knows if that can be embedded in an iPhone app (and not only used in a web app) ?

Thanks in advance !
Roland

its just for web..

May 18, 2010 by rob (not verified), 1 year 37 weeks ago
Comment id: 152

its just for web, really don't need it for an app, you have the full API in xcode for that.

RE: in app ?

February 16, 2010 by Tole, 1 year 50 weeks ago
Comment id: 115

Hi,
I guess it could be embedded in app. Haven't tried, but I know that apps can run Safari frame.
I don't expect that it will be 100% optimized and you'll probably have to adjust size values in css file.

Tole

Hello, thanks for this great

June 25, 2010 by iNoize (not verified), 1 year 32 weeks ago
Comment id: 172

Hello,
thanks for this great script.

I try to run this in fullscreen mode.
But if i change the site for example from index to galery or back it opens a new safari window.
How can i fix it ?

And ho i can usw the php code from examle ? where is the path of the images ?

Tnx

Running in full screen mode

June 25, 2010 by Tole, 1 year 32 weeks ago
Comment id: 173

You can check full screen working example at the http://benlo.com/jaipho/

Regarding the example, I'm not sure what example do you think at? I guess you checked the http://www.jaipho.com/content/installation-guide