Skip to content
Home

Installation Guide

Here is short guide how to implement jaipho gallery. Follow this steps, and in best case you'll have your images gallery optimized iPhone version in just 15 minutes.

Upload Files

Download and unzip distribution package.
Showing images on iPhone requires whole screen, so it will require page for itself. Use the index.html as template, rename it as you need e.g. jaipho.php, igallery.php, iphone-gallery.jsp...Also rename the list template list.html if needed.
Upload it to your server, together with jaipho folder. "jaipho" folder contains javascript source, style sheet and design required images.
Default settings excepts that both index.html and jaipho source folder are in the same directory. If you need it different, change value of BASE_URL constant in index.html.

Implement your images mechanism

On the bottom of index.html is javascript block which runs the gallery. By default there are 2 test images used to be shown.
As you can see, jaipho expects images to be loaded into Jph_Dao object.
Here is example how it can be in some PHP case

var dao = new Jph_Dao();

<?php
define( 'JAIPHO_THUMB_MIN_SIZE', 75);
define( 'JAIPHO_SLIDE_MAX_SIZE', 480);

$images = $images_source->GetGalleryImages( $_GET['gallery_id']);
for ($i=0; $i<count( $images); $i++)
{
 echo  "dao.ReadImage( ".$i.", '".$image->GetSrc( SLIDE_MAX_SIZE)."', '".$image->GetThumbSrc( THUMB_MAX_SIZE)."', '".$image->GetTitle()."', '".$image->GetDescription()."');";
}

?>

Optimal thumbnails image size is that neither the with or height is smaller than 75px. For slides, neither the height or width should be more than 480px for iPhone and 1024px for iPad.
If you have larger images, they will be shown as good as optimal, only the load time will be longer.

Multiple galleries

In this case you should use list.html template too. In this file, you should list all your galleries and link them to main template (index.html) . Do not forget to pass some gallery identifier e.g. index.html?gallery_id=mygal.

Detect iPhone users

Jaipho is iPhone optimized gallery, so as final step you have to detect will you show the original gallery link, or the new iPhone optimized one.
Here is PHP example.

<?php
if (stristr($_SERVER['HTTP_USER_AGENT'],'iPhone')
 || stristr($_SERVER['HTTP_USER_AGENT'],'iPod')
 || stristr($_SERVER['HTTP_USER_AGENT'],'iPad'))
 $base_link = 'index.html'.'?gallery_id='.$gallery_id;
else
 $base_link = 'my-gallery.php?gallery_id='.$gallery_id;
?>
<a href="<? echo $base_link.'?'.$url_arguments ?>">Image Gallery</a>

Startup modes

This link will open first slide in your gallery. You can also start your gallery in thumbnails or slide show mode. Here is the list of all different link types.

  • index.html - the first slide
  • index.html#1 - the second slide (first slide has index 0)
  • index.html#slideshow - the first slide and starts slide show
  • index.html#thumbs - opens the gallery thumbnails

As I said, default link (with no hash) will by default open first slide. You can change this behavior too by setting DEFAULT_STARTUP_MODE property to one of values: GALLERY_STARTUP_THUMBNAILS, GALLERY_STARTUP_SLIDER, GALLERY_STARTUP_SLIDE_SHOW.

PHP implementation example

Pipho is a PHP implementation of Jaipho. No matter if you are not using php, nor planning to implement Pipho, it is reccomended to sneak into it and check how actual implementation is working.

Bookmark/Search this post with:
Permalink

Comments

Love jaipho, but...

September 9, 2011 by Craig (not verified), 1 year 40 weeks ago
Comment id: 577

I'm having some difficulty.

For some reason I can get it work great on Safari 5.1 (user agent: iphone 4.3.3) and the iPhone 4 simulator, but not on my actual iPhone 4 (4.3.3).

Any ideas what would cause this??

How to trace a problem

September 10, 2011 by Tole, 1 year 40 weeks ago
Comment id: 578

Really strange. Try to enable Javascript console on your iPhone (Settings/Safari/Developer). Is in there any javascript error reported? Also try to look for javascript errors with your Safari 5.1 (no matter if it works OK). If you don't find the problem this way, please write back some more info about symptoms (black screen, toolbars are on).

How to make an image clickable with URL

July 11, 2011 by vanessa (not verified), 1 year 49 weeks ago
Comment id: 548

Hello,

i would like to make an image cliquable with an "href="" function
I need to place some pictures with a link for a video in my gallery

any suggestions?

thanks !

RE: How to make an image clickable with URL

July 13, 2011 by Tole, 1 year 48 weeks ago
Comment id: 549

Well, the easiest would be to put a complete "a href=..." link in image description. Haven't tried it but i think it should work.
Other solutions would include some basic Javascript modifications.

actual download template for 2 or more galleries

May 25, 2011 by Knikol (not verified), 2 years 3 weeks ago
Comment id: 520

everything is great, I love this but being on the designer side of things I m quite confused, but I do know enough to follow directions but your instal section on multiple galleries is not made for newbornes .....hope you can help out in teaching or maybe droping a template[ MULTIPLE GALLERIES]for us Im am sure it would resolve my question ..............alot of us are left with when trying to follow u[p on what your saying on multiple gallery ............I am sure its clear as day what you say ...but newbornes sometime cant seem to see the clarity...............once again thank you its been a life saver to come to this site.

The easiest way to setup Jaipho

May 25, 2011 by Tole, 2 years 3 weeks ago
Comment id: 523

I understand your problems completely.
The easiest way to get full featured Jaipho is to download and install Pipho. Pipho is a example how to use Jaipho with PHP.

question about the code in application

April 14, 2011 by KJ (not verified), 2 years 9 weeks ago
Comment id: 493

I guess I post wrong place in previous comment...? Therefore I will post again here...
sorry about to spam......I don't mean it....shouldn't have posted it on php article side

I am doing a project for my company in a iphone application

My question is how can I use Jaipho to have a 2 or multiple different category of gallery????
For example....you will have car and bike 2 category...and when you click each category...
it will just show different pics from different folder??

I actually copy what does the Jaipho have in the header from jaipho/index.html to my index.html.......
and also copy the body what does jaipho have in the body from jaipho/index.html to my index.html.....

but i don't know ....the gallery only shows up in the first category....but nothing appears in my second category........

is it because of the java script conflict?....and how can I solve it??

I already upload my code into my server
maybe if you can check my source code in iphone.houseofwu.com/kj/index.html

btw....sometimes the first category won't show up too if you click too quick after you enter the first homepage.....I guess maybe you need like 2 second to load all of the java script or data?.....if you do know how to solve it too...it will be very helpful....

I will do very appreciate of you help

best regard,
KJ

RE: question about the code in application

April 15, 2011 by Tole, 2 years 9 weeks ago
Comment id: 494

I updated the article with remark about implementing multiple galleries mechanism. Does this solves your problem?
Have you tried to check, or even better install Pipho implementation?

Problem gallery amb update IOS 4.2

March 6, 2011 by mac (not verified), 2 years 15 weeks ago
Comment id: 450

Problem with viewing gallery, turning the phone with the latest updated version of IOS in particular with the 4.2.

iOS 4.2

March 11, 2011 by Tole, 2 years 14 weeks ago
Comment id: 458

I could not notice any problem with Jaipho on iOS 4.2. I have tried it on iPhone3g, iPhone3gs and iPhone4.
Does this problem occurs on www.jaiphodemo.info too, or just on your installation?

turm

March 12, 2011 by Anne (not verified), 2 years 14 weeks ago
Comment id: 462

Hi,
i got the same problem I guess...
The gallery works great and is really fun! tanks for that, but whenever I turn to Landscape mode it remains in the normal mode -> looks like a zoom in... when I zoom out afterwards it recognizes its in landscape mode and adjusts the settings.

on the way back (from landscape to normal mode) its 100% working.

I use Iphone 4 with iOS 4.1 and it concerns not only my server, but your demo version as well... always the same...

If you can help... please do! :)
kisses,
Anne

iphone 4 safari bug

March 13, 2011 by Tole, 2 years 14 weeks ago
Comment id: 464

Well, it seems that we are experiencing some iPhone 4 related bug. So far I did not found official statement, and I did not found any way to workaround it. I'll try to research it little bit more in next few days.

Hi Was wondering if anyone

March 31, 2011 by maxelcat (not verified), 2 years 11 weeks ago
Comment id: 484

Hi

Was wondering if anyone had managed to solve this issue - we here are finding that its great in portrait, but when you rotate the images don't "scale" correctly. Using an iPhone 4

back link

December 29, 2010 by Nico Boots (not verified), 2 years 24 weeks ago
Comment id: 379

Thanks for the script. It works perfectly! I have only one problem with the "back" button in the topbar.
I have a 4-lingual site and each of the different language sites must direct to the same slide show. But if a visitor presses the "back" link it should return him to his own language page where he came from. I have tried to solve this as follows, using PHP:

At the beginning of the session:
<?php $_SESSION['from_app_page'] = $_SERVER['HTTP_REFERER']; ?>

and as the href for the button "back":

href="<?php echo $_SESSION['from_app_page'] ?>">Apartment

This does not work: the $_SESSION parameter is filled with the url of the Jaipho thumbnail page which is in view, and not with the previous page. My conclusion is that during the viewing of the slide show there is a reload of the page and the original referral is lost.
Do you now how I can solve this?

RE: back link

December 29, 2010 by Tole, 2 years 24 weeks ago
Comment id: 380

There is no any page reloading on gallery page (index.php in Pipho).
Only referral mess can be if you are using gallery list page too (list.php in Pipho) .
You can also check what is happening if you turn on firebug or something similar in your browser, which can display all http requests.

back link

December 29, 2010 by Nico Boots (not verified), 2 years 24 weeks ago
Comment id: 381

I have only used the index page from the jaipho-0.54.00 folder, with some adaptation (adding inks to pictures and renaming button and title in topbar)
The session variable code iI have placed placed on the top of the page, and the referral link in the section dealing with the thumbnails (line 124). As far as I am aware in the code for the index page, there is no link specified to the list page.

You mention index.php in Pipho. Should I have used Pipho?

RE: back link

December 31, 2010 by Tole, 2 years 24 weeks ago
Comment id: 383

No, there is nothing wrong in using a Jaipho only.

Generally, I don't see any problem in your approach, That means that in this matter you are dealing with a some system or a configuration issue,
Best method for tracing it is to trace http requests in some firebug like solution

Integration with JQTouch?

October 6, 2010 by Modjo (not verified), 2 years 36 weeks ago
Comment id: 312

Did anyone was able to integrate it with JQTouch?
How to?
Please post

Any way to make the photo do

September 7, 2010 by Thomas (not verified), 2 years 41 weeks ago
Comment id: 276

Any way to make the photo do the FLIP effect when tapped?

RE: Flip effect

September 7, 2010 by Tole, 2 years 40 weeks ago
Comment id: 277

There is no such feature built in. I guess it could be developed and I can give you a hand. It requires intermediate/advanced javascript and css knowledge.

By the way this is the most

September 10, 2010 by Thomas (not verified), 2 years 40 weeks ago
Comment id: 300

By the way this is the most awesome slideshow script for the iphone...I am trying it on my iPad this weekend once I set up the script on the server and will try it on Android next week when I get the new Samsung and Droid2...so I can let you know how it works on those devices as well...Thanks for everything. Really nice work you have here. (Help me with the flip???) You can email me direct or skype me...

Pinch Zoom?

September 4, 2010 by Steve (not verified), 2 years 41 weeks ago
Comment id: 273

This script is awesome ! I've been looking for something like this for a very long time, thanks so much for this.
It seems to be missing only 1 thing unless I didn't see it, how to enable pinch zoom?
Thanks

RE: Pinch Zoom?

September 6, 2010 by Tole, 2 years 41 weeks ago
Comment id: 275

Well, there is no zoom feature yet. It is planned but before it I plan to release Andorid version and WorderPress plugin - I think that in there is much more audience.
There is also another reason that zoom is not top priority: quite poor CPU performance in 1st (original) and 2nd iPhone (3g) generations could make zoom quite unusbale.
You'll know what I'm talking about if you try the jqtouch based photo gallery at http://samshull.com/jqtouch-r148/demos/main/ with those older iphones. On the other hand it works nice with iphone 3gs.

Pinched Zoom

September 6, 2010 by Elijah (not verified), 2 years 41 weeks ago
Comment id: 274

@ Steve
I have to agree with you on the Pinched Zoom.

@Tole
I've been using your tools for a while and have also watched your blog but I never stopped to thank you for making everyones lives much easier. You are a true genius.

Is there going to be Pinched Zoom inthe near future. It's so widely used on this platform.

Smooth scrolling

August 31, 2010 by Smoothscrolling (not verified), 2 years 42 weeks ago
Comment id: 271

Hi,

Thanks for your awesome script.

Is there a parameter I could change to make the sliding more smoothly?

Thanks a lot

RE: Smooth scrolling

August 31, 2010 by Tole, 2 years 41 weeks ago
Comment id: 272

No, there is no such parameter.
Maybe in future it will be improved. but I don't expect much. Even a native applications are not always smooth, and at last this is an javascript running in browser.

Image folder...

August 8, 2010 by Jahkda (not verified), 2 years 45 weeks ago
Comment id: 233

Hi everyone !

Thanks to this awesome script ! I think it works very fine when I'll understand where I must put both my pictures and yhumbs ?

Sorry for this stupid question ! Hope I'll got a smart answer...

RE: Image folder...

August 9, 2010 by Tole, 2 years 45 weeks ago
Comment id: 235

You can put your images anywhere you want to, as long as it is viewable by web browser - if you paste the url in your browser, browser should be able to display it. When you manage to do this, just use those urls like this:

var dao =       new Jph_Dao();
dao.ReadImage( 1,'http://mysite.com/photos/slide1.jpg','http://mysite.com/photos/thumb1.jpg','','');
dao.ReadImage( 2,'http://mysite.com/photos/slide2.jpg','http://mysite.com/photos/thumb2.jpg','','');
....

If you need auto resizing, and thumbs creation check the Pipho - http://www.jaipho.com/pipho

I must put each picture here

August 9, 2010 by Jahkda (not verified), 2 years 45 weeks ago
Comment id: 236

I must put each picture here ?

Unfortunatly phipho doesn't work on my server (my fai server) cause not it's supporting php5 :'(

I try to fix that with a "cheat" but it seems doesn't work...

I meant ech picture link in

August 10, 2010 by Jahkda (not verified), 2 years 45 weeks ago
Comment id: 237

I meant ech picture link in line ?

Transition Fade out/in

July 16, 2010 by albert (not verified), 2 years 48 weeks ago
Comment id: 183

hi,
your script is great and I'm starting working with it (pipho-iui)...
Can we change the way the images are display:
Now on click it change image
i wish to add a transition effect as fade out and in when changing image.
if it is possible, please explain how
by advance, thank you

RE Transition Fade out/in

July 18, 2010 by Tole, 2 years 48 weeks ago
Comment id: 219

Well, I had on mind multiple effects, but as you can see, didn't succeed to make it.
In this current design, you should do a next to things to achieve that
.- replace webkitTransition with some webkit opacity transormation
- in JphSlider_Slider.prototype.SelectSlide set the opacity to 0%, and set timeout for some method which will set the opacity back to 100%

Anyway implementing this requires a little bit more knowledge of webkit features and how Jaipho currently works

dont load all the files

May 19, 2010 by JaBaT (not verified), 3 years 4 weeks ago
Comment id: 154

Hi,
I like and im using in my web page. Is a perfect gallery.
Only has a problem, i have 31 images and only load about 20, the rest is blak. In PC is OK but on iphone no.

You can see here (http://www.jabat.org/iphone/fotodeldia) be carefull, ADULT CONTENT.
I were thinking the problem is the connection, but with wifi is the same.

Thanks and sorry for my english.

resize your images

May 20, 2010 by Tole, 3 years 4 weeks ago
Comment id: 156

Some of images you are displaying are extremely large - 1 MB. So when total images sum comes near 5MB (iPhone limit for web page), it just stops loading next ones. Too large images are also reason why the image sliding is slow.
Just resize your images and everything will bi all right.

Hello Tole! Ive been

May 30, 2010 by Jon (not verified), 3 years 3 weeks ago
Comment id: 161

Hello Tole!
Ive been wrestling with the issue of images stopping loading for over a month now..
My iphone app runs in full screen mode so I prevent page reload and just keep loading images. Around 200 images or so they will stop loading.
I wasn't aware of the 5mb cap, is there any way around this? Perhaps assigning old images to null? I dont think iphone has garbage collection so I dont know if this will work..
Any ideas would be appreciated.
Thanks!

5 MB iPhone limit

May 30, 2010 by Tole, 3 years 3 weeks ago
Comment id: 162

I actualy solved the issue in 0.52 - http://www.jaipho.com/content/jaipho-052-javascript-history-patch - with configuration varijable SLIDE_MAX_IMAGE_ELEMENS (default is 50)
The engine is working in the way that this value contains max number of DOM image elements. If there is larger amount of images in gallery, the old objects are reused. Feature is tested, but not in App mode (fullscreen).
Are you using at least 0.52 version?

Thanks, The problem is that i

May 25, 2010 by JaBaT (not verified), 3 years 3 weeks ago
Comment id: 157

Thanks,
The problem is that i cant resize the images.
My gallery is getting images from internet automatically.
I didnt know that 5mb limits. But i think is not the problem, if I put the same images in a html all the images load perfectly.
A great solution will be a button to get reload only one image in the gallery, because if you reload now, reload all the gallery and the problem continue.

end script

May 7, 2010 by Uchi (not verified), 3 years 6 weeks ago
Comment id: 143

Hi,
Thanks for this wunderfull script. It is exactly what i'm was looking for.
I'm using it to build a web based app for Iphone.
It is functioning verry well. One question remains as i do not understand much from
javascript. I want a buttun back in the top toolbar wich end the jaipho script and turning back
in my app to the previous page.
Is there any way to do this?

Regards, U

Back link

May 7, 2010 by Tole, 3 years 6 weeks ago
Comment id: 144

Hi U,
Back link is html issue, and it is placed in html file (index.html in original Jaipho package).

There is one commented out, back link in that file right now. Just search for :

                        <td class="wing">
                        <!--
                                <a class="button" href="">
                                        Back
                                </a>
                        -->

Remove comments, and fill in the href attribute with your back link url.

Link back to index

July 16, 2010 by albert (not verified), 2 years 48 weeks ago
Comment id: 182

hi,
i solved that problem wich work perfectly with pipho.
but I cann't find any solution for back button when using : pipho-iui
do you have a solution for me ?
urgent, thanks

RE: Link back to index

July 20, 2010 by Tole, 2 years 47 weeks ago
Comment id: 222

Your link has to have target attribute set to _webapp

 <a target="_webapp" href="http://yoursite.com/">Home</a>

That's required by included iUI library.

Hello, Quick question, i see

December 21, 2009 by Jonc (not verified), 3 years 25 weeks ago
Comment id: 80

Hello, Quick question,
i see from a previous comment u noted not to use frames due to the pipho frame not having the meta viewport, causing zoom out - is there any way to get around this ? Been pouring through the css trying to compensate for the zoom but cant get even - i cant find anything in the js for the zoom even tho for the first second the frame loads its perfect then zooms out..
Thanks and btw besides my troubles, awesome app

Frames and zooming

December 23, 2009 by Tole, 3 years 25 weeks ago
Comment id: 83

I'm not sure that I understand what exactly do you need, but here are few things regarding frames and zoom
- frames are not meant to be used with Jaipho. Honestly I don't see how can it be used together (besides for desktop browsers, like it is used on jaiphodemo.info)
- currently there is no zoom support in any way
- css contains all sizes used for layout, and all are hardcoded to exact values to fit for iPhone screen size

Hope this helps

web app mode

December 8, 2009 by dWreck (not verified), 3 years 27 weeks ago
Comment id: 77

hello, i really enjoy jaipho. I was curious if there was a way to enable support for web app mode without the safari nav bars if the website is added to the home screen? everything else works flawlessly, thank you so much!

RE: web app mode

December 8, 2009 by Tole, 3 years 27 weeks ago
Comment id: 78

Check out the article on http://benlo.com/jaipho/
But, have to say this does not work perfectly. Even the screen is higher in app mode, Jaipho can't use it. Jaipho has screen sizes hardcoded in css.
I'm working on next version which should be able to optimally use every screen size.

loop slideshow?

September 16, 2009 by Brian Goosen (not verified), 3 years 39 weeks ago
Comment id: 49

I don't see any parameter to loop the slideshow? Would that be impossible to do?

RE: loop slideshow

September 16, 2009 by Tole, 3 years 39 weeks ago
Comment id: 50

Right now there is no parameter for enabling loop, but it will be added in future versions.
Until that, here is the quick fix.
In Jaipho javascript source file replace existing method with this one:

 JphSlider_SlideShow.prototype._RollSlideshow    =    function()
 {
    if (this.mrSlider.IsLast())
         this.mrSlider.SelectSlide( 0);
     else
         this.mrSlider.Next();
   
    if (this.IsActive())
        this._RequestNext();      
 }

Safari on my iPhone still zooms out my jaipho gallery

August 6, 2009 by Nicole (not verified), 3 years 45 weeks ago
Comment id: 16

Hi. I love your gallery and really want my gallery to work like your demo. For some reason safari on my iphone is not displaying my gallery at full screen. The html file has the following:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

Is there something I need to add to the html, or do I need to change something in the javascript or css?Any suggestions? Thanks.

Please visit my site on an iphone to see what I mean. Thanks
http://nptd.co.nr

Do not use frames

August 6, 2009 by Tole, 3 years 45 weeks ago
Comment id: 17

Nicole,
Your page uses frames, and that page does not have viewport meta tag which is reason for zoom out.

If you try to open n iPhone the value from frame src attribute http://nicoletdesign.home.comcast.net/~nicoletdesign/jaipho.html everything works OK.

Move your iPhone detection in page that generates frame (not in one which embeds the flash)

Do not use frames

August 7, 2009 by Nicole (not verified), 3 years 45 weeks ago
Comment id: 18

Thanks! I also tried using the main url http://nicoletdesign.home.comcast.net instead of nptd.co.nr on my iphone and the ipnone detection went to the gallery in full screen. It only seems to zoom out when I use the .co.nr redirecting url. I'll take the flash and frames off my main page and just direct desktop user to the flash portfolio page and iphone users to the jaipho gallery. Thanks for the quick response ^_^