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 jaipho.html as template, rename it as you need e.g. jaipho.php, igallery.php, iphone-gallery.jsp...
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 jaipho.html and jaipho source folder are in the same directory. If you need it different, change value of BASE_URL constant in jaipho.html.

Implement your images mechanism

On the bottom of jaipho.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.
If you have larger images, they will be shown as good as optimal, only the load time will be longer.

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'))
 $base_link = 'jaipho.html'.'?gallery_id='.$gallery_id;
else
 $base_link = 'my-gallery.php?gallery_id='.$gallery_id;
?>
<a href="<? echo $base_link.'?'.$url_arguments ?>">Watch 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.

  • jaipho.html - the first slide
  • jaipho.html#1 - the second slide (first slide has index 0)
  • jaipho.html#slideshow - the first slide and starts slide show
  • jaipho.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 app.mDefaultMode property to one of values: GALLERY_STARTUP_THUMBNAILS, GALLERY_STARTUP_SLIDER, GALLERY_STARTUP_SLIDE_SHOW.
Example of starting slideshow by default will be:

var app    =    new Jph_Application( dao);
app.mDefaultMode    =    GALLERY_STARTUP_SLIDE_SHOW;
app.Init();
app.Run();        

Bookmark/Search this post with:
Permalink

Comments

Transition Fade out/in

July 16, 2010 by albert (not verified), 1 week 6 days 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, 1 week 4 days 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), 10 weeks 1 day 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, 10 weeks 5 hours 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), 8 weeks 4 days 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, 8 weeks 4 days 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), 9 weeks 2 days 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), 11 weeks 6 days 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, 11 weeks 6 days 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), 1 week 6 days 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, 1 week 2 days 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), 31 weeks 3 days 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, 31 weeks 1 day 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), 33 weeks 2 days 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, 33 weeks 2 days 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), 45 weeks 1 day 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, 45 weeks 1 day 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), 51 weeks 19 hours 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, 51 weeks 8 hours 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), 50 weeks 6 days 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 ^_^

Thanks!

June 19, 2009 by Darryl (not verified), 1 year 5 weeks ago
Comment id: 11

Thats for taking the time to build this. Nice feature for my photos...ill see how many ppl use it.

Now i just need to get a video version....

header

May 17, 2009 by guest (not verified), 1 year 10 weeks ago
Comment id: 6

first of all, GREAT guide and service. I implemented it to something i am working on but it has a header on top. When the iPhone is rotated the header takes up space and i would like to be able to scroll it up and down. There's just way too much code to go through and i was wondering if you could help me out. 1000 thanks

Enabling vertical scroll

May 27, 2009 by Tole, 1 year 9 weeks ago
Comment id: 7

I'm glad you like it.
For solving your problem, you just need to set in Javascript BLOCK_VERTICAL_SCROLL variable to false. This parameter is introduced in version 0.51. You can read more about configuration settings in "JAIPHO Configuration" page.

how do i install ...confused

May 2, 2009 by shrey (not verified), 1 year 12 weeks ago
Comment id: 3

hi
the demo is great..... but im a super noob!
i have gallery based on wordpress cms how do i integrate it with this?
any help would be appreciated
thank you

Jaipho and WordPress

May 2, 2009 by Tole, 1 year 12 weeks ago
Comment id: 4

Although I have plans to make integration with WordPress and Drupal, right now I can not help you in that matter. I have almost no experience with those two, so it will take me a lot of time to accomplish that, and there are also much features I plan to do with Jaipho itself first.

I think that it would be best for you to contact your gallery provider or their support forum.
If you make it works, I would be happy if you share it, and maybee we can put some post on it.

Awesome!

April 15, 2009 by Blimey (not verified), 1 year 15 weeks ago
Comment id: 2

I'm using SlideShow Pro for regular browsers and wanted some way to show the same images to iPhone users and what you have hear is awesome. I just tried the demo and you can't tell it's not a native app. Well done!!!

:)

March 22, 2009 by Romano (not verified), 1 year 18 weeks ago
Comment id: 1

This looks awesome, much luck in future :)
Greetings.