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

Hello, Quick question, i see

December 21, 2009 by Jonc (not verified), 11 weeks 2 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, 10 weeks 6 days 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), 13 weeks 1 day 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, 13 weeks 21 hours 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), 25 weeks 2 hours 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, 24 weeks 6 days 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), 30 weeks 6 days 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, 30 weeks 6 days 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), 30 weeks 5 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), 37 weeks 5 days 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), 42 weeks 3 days 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, 41 weeks 13 hours 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), 44 weeks 4 days 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, 44 weeks 4 days 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), 47 weeks 19 hours 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), 50 weeks 3 days ago
Comment id: 1

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