Skip to content
Home » Installation Guide

Using Jaipho with iUI

August 9, 2009 by Tole

iUI demo image gallery

In this article, we will step by step integrate Jaipho, Pipho and iUI. Purpose of this article is to see how to use Jaipho/Pipho in multi galleries environment, and how to implement a different designs.

The whole source which cames out as result of this steps is attached to post.
Live demo can be found at http://www.jaiphodemo.info/pipho-iui/.

Summarized, we will create iUI based page which will contain list of all our galleries (index.php), and we will change Jaipho based page to fit the iUI digg sample design (gallery.php).

Here are the steps:

1. Install Pipho

Create new Pipho installation on your web server. Try it and make sure that it works. You can use as help installation guide on www.jaipho.com/pipho.

2. Add iUI and gallery list page

Download iUI from projects source site http://code.google.com/p/iui/downloads/list (this article is using iUI v 0.30)
Unpack it and upload only source sub folder. Your webroot folder should look like this:

...
iui/
jaipho/
library/
photos/
index.php

Rename Pipho's index.php into gallery.php. From iUI samples folder, copy digg/index.html into your webroot and rename it to index.php. This will be your gallery list page.
Fix the paths to static iUI resources in head tag of the page, to fits to your environment. Test it with your browser and make sure that new index.php is displayed ok.

3. Implement multiple galleries listing (index.php)

In this step, we will add Pipho logic for listing your photo galleries into iUI based page.

Add configuration block at the beginning of the index.php. This is same block as found at the beginning of Pipho's index.php, so you can also put it in some config.php and use it for both pages (index.php and gallery.php). This block sets up the includes for required classes, and configures Pipho. It is essential for every page where you want to use Pipho.

<?php
    // INCLUDE PATH
    set_include_path(
        'library' . PATH_SEPARATOR .
        get_include_path());
   
    // PIPHO VALUES
    define('PIPHO_PHOTOS_FOLDER', 'photos');    
    define('PIPHO_FORCE_WRITE', false);    
   
    define('PIPHO_SLIDE_RESIZE_ENABLED', true);
   
    define('PIPHO_SORT_GALLERIES_ENABLED', true);
    define('PIPHO_SORT_GALLERIES_SORT_TYPE', SORT_REGULAR);    
    define('PIPHO_SORT_GALLERIES_REVERSE', false);
   
    define('PIPHO_SORT_IMAGES_ENABLED', true);
    define('PIPHO_SORT_IMAGES_SORT_TYPE', SORT_REGULAR);    
    define('PIPHO_SORT_IMAGES_REVERSE', false);
   
   
    require_once 'Pipho/DeviceInfo.php';
    require_once 'Pipho/FileManager.php';
?>

Add this PHP code to preload all galleries which are found in your photos folder.

<?php
    try
    {
        $device_info    =    Pipho_DeviceInfo::getDeviceInfo();
       
        $pipho            =    new Pipho_FileManager( $device_info, PIPHO_PHOTOS_FOLDER, PIPHO_FORCE_WRITE);
        $pipho->init();
       
        $galleries        =    $pipho->getGalleries( true);
    }
    catch (Exception $e)
    {
        die( $e->getMessage());
    }
?>

OK, galleries are loaded, now we have to display them. Instead of statically generated list of items, write this block which uses preloaded data. Note that in link we are passing gallery_id which is actually your gallery folder name.

    <ul title="Pipho and iUI example" selected="true">
   
    <?php foreach ($galleries as $gallery): ?>
        <li>
           
            <a target="_webapp" href="gallery.php?gallery_id=<?= $gallery->id ?>#thumbs">
                <img src="<?= $gallery->firstImage->urlThumb ?>"/>
                <div class="title">
                    <?= $gallery->title ?>
                </div>
                <span class="text">
                    <?= $gallery->description ?>
                </span>
            </a>
           
        </li>    
    <?php endforeach; ?>
       
    </ul>

At this moment both pages should work and be linked. This could be good time to add few more galleries to your photos folder. Try also to add gallery and image description files.

4. Adjust gallery list layout (index.php)

Yes, everything is working all right, but it looks pretty ugly. First we will fix the gallery list page layout.

Replace style tag with this one:

<style type="text/css">
    body > ul > li {
        font-size: 14px;
    }

    body > ul > li > a {

        min-height: 75px;
    }

    li img {
        float: left;
        margin-right: 5px;
        border: none;
    }

    li .title {
        color: #2d3642;
        font-weight: bold;
        font-size: 16px;
        padding-bottom: 3px;
    }

    li .text {
        font-size: 13px;
        font-weight: normal;
    }
</style>

5. Adjust Jaipho layout (gallery.php)

Here we will try to make Jaipho to have look and feel exactly as the gallery list page - based on iUI. Instead of importing the whole iui.css, we will copy to jaipho.css only what is required. Download attached jaipho-iui.css and include it in your gallery.php (replace original one).
Looks better, but still not done. Required are few changes in html template (gallery.php).

Replace the tag with id "thumbs-toolbar-top" with this one

    <div class="toolbar" id="thumbs-toolbar-top">
        <a class="button" id="backButton" style="display: inline;" href="index.php">
            Back
        </a>
        <h1>
        <?= $gallery->title ?>
        </h1>
    </div>

And replace "slider-toolbar-top" with

    <div class="toolbar" id="slider-toolbar-top">
        <a class="button" id="backButton" style="display: inline;" href="javascript: app.ShowThumbsAction();">
            Thumbnails
        </a>
        <h1 id="navi-info">
        </h1>            
    </div>        

Conclusion

Well, that is it. Your Jaipho gallery fits almost 100% to your iUI based site look and feel.

Bookmark/Search this post with:
AttachmentSize
pipho-iui.zip147.11 KB
jaipho-iui.css4.3 KB
Permalink

Comments

Works with jQTouch

March 9, 2010 by Anonymous, 1 day 13 hours ago
Comment id: 122

Do you know if this works with jQTouch ?

http://www.jqtouch.com/

RE: Works with jQTouch

March 9, 2010 by Tole, 23 hours 14 min ago
Comment id: 123

Jaipho is loaded on it's own page, so there is no reason why you should not be able to include it in your jqt project. Usage and implementation should be very similar to iUI one.

Two questions

February 23, 2010 by Anonymous, 2 weeks 21 hours ago
Comment id: 117

1. Do you know if this works with Phone Gap?
2. I notice that's it's not quite as smooth as a iphone's movement - is this a limitation of javascript or is it something that could be improved?

Looks amazing on my phone, can't believe you can do this in mobile safari, this is awesome!

-Tex

RE: Two questions

February 24, 2010 by Tole, 2 weeks 19 hours ago
Comment id: 118

Thanks Tex
1. Have no idea
2. Especially bad performance is while there is an image loading in progress. This is mainly the iPhone OS and Mobile Safari issue and honestly I do not expect much improvement on this matter in future.

Tole

No thumbnails

February 10, 2010 by Anonymous, 4 weeks 18 hours ago
Comment id: 111

Hey there!
This is some amazing work and I'm so grateful for it! I am having a problem though. You can see that the gallery list page comes up with no problems (mobile.doxyphotography.ca/galleries/) but once I click on any one of the galleries it takes me to a blank thumbnails page with the right name of the gallery.
Is there anything that you can suggest for this problem?
Thanks in advance!
Mike

RE: No thumbnails

February 11, 2010 by Tole, 3 weeks 6 days ago
Comment id: 112

Well, it seems all right. Have you fixed it in meanwhile?

Parse error...

February 3, 2010 by Anonymous, 4 weeks 6 days ago
Comment id: 109

Hi!

I'm trying to follow your instrcutions but I keep getting this error after adding the php code on step 3:

Parse error: parse error, unexpected '{' in /home/virtual/site387/fst/var/www/html/iphone/index.php on line 25

I checked the file and it looks like everything is ok; I deleted the full code on step 3 and the message changed to:

Parse error: parse error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or '}' in /home/virtual/site387/fst/var/www/html/iphone/library/Pipho/DeviceInfo.php on line 12

Thank you in advance

RE: Parse error...

February 4, 2010 by Tole, 4 weeks 6 days ago
Comment id: 110

Pipho requires php5, and you are trying to run it on php4.
If you encounter some other php related problem, check the Pipho main article on www.jaipho.com/pipho

Zip version to upload ?

January 24, 2010 by Anonymous, 6 weeks 3 days ago
Comment id: 102

G'day.

Firstly. Thanks for putting in all this hard work !

Secondly. I'm confused by the instructions, and I'm wondering why we can't just download a zip file to upload without having to do all the steps you mentioned ?

If everyone has to do the same thing why can't we just upload all the files and start adding our own images and titles ?

Tony

RE: Zip version to upload ?

January 24, 2010 by Tole, 6 weeks 2 days ago
Comment id: 103

Tony, complete source is already zipped and attached. There is also a note in bold about that at the beginning of the article.

Tole

UI Problem

January 18, 2010 by Anonymous, 7 weeks 2 days ago
Comment id: 93

Hi

Your app is great and just what I was looking for. So far so good, I managed to install it, have some test galleries installed and the work.

When I then tried to install the UI to also have the gallery selection menu I ended up with having the following:

www.rogenmoser.org/Page/http://www.rogenmoser.org/Page/pipho/

This despite having properly working galleries themselfs, as you chen check with http://www.rogenmoser.org/Page/pipho/gallery.php

I am also struggeling with the line

$gallery_id = isset( $_GET['gallery_id']) ? $_GET['gallery_id'] : 'test';

in the gallery.php as I do not have a gallery "test" anymore.

Your help would be much appreciated.

Thomas

PHP short tags should be enabled in iUI demo

January 18, 2010 by Tole, 7 weeks 1 day ago
Comment id: 94

What I saw from your urls, it seems that you do not have short php tags enabled. Please check the short_open_tag value in your php.ini.

The line $gallery_id = isset( $_GET['gallery_id']) ? $_GET['gallery_id'] : 'test'; tries to determine selected gallery. If no gallery id is passed by url, it will use default which is in this case 'test'. So, you can replace 'test' with your default gallery id (default gallery folder).

Hope this helps.
Tole

php.ini

January 22, 2010 by Anonymous, 6 weeks 5 days ago
Comment id: 99

Hi Tole

Would below code be correct to put into the php.ini file and then have the file in the same folder as the index.php?

--------------------------------

<?php
short_open_tag = On
?>

------------------------------------

Thanks
Thomas

PHP short tags workaround

January 22, 2010 by Tole, 6 weeks 4 days ago
Comment id: 100

No.

Anyway, here is the plan B.
Use your editor and replace manually all "<?=" occurrences with "<?php echo" (it is on 2 places at index.php and 1 on gallery.php). That will solve the problem.

To be honest, I shouldn't use that short syntax at all, but somehow I missed it.

Enjoy

THANKS!

January 23, 2010 by Anonymous, 6 weeks 4 days ago
Comment id: 101

Tole

Thanks you very much, it works like a charm now.

Thomas

these directions make no

August 10, 2009 by Anonymous, 30 weeks 2 days ago
Comment id: 22

these directions make no sense

RE: these directions make no

August 10, 2009 by Tole, 30 weeks 2 days ago
Comment id: 23

Well, this certainly is advanced level article and in combination with my not native English, I believe it can be confusing in some parts.
I would be happy if you point out not clear or misleading parts of article, and I'll fix them.
Thanks for pointing it out.

blank page

November 23, 2009 by Anonymous, 15 weeks 2 days ago
Comment id: 72

You missed point out the open "<?php" and the close "?>" in your new index.php (which copied from digg/index.html). I still got a blank page from your tutorial. Below is my index.php code

<?php

// INCLUDE PATH
set_include_path(
'library' . PATH_SEPARATOR .
get_include_path());

// PIPHO VALUES
define('PIPHO_PHOTOS_FOLDER', 'photos');
define('PIPHO_FORCE_WRITE', false);

define('PIPHO_SLIDE_RESIZE_ENABLED', true);

define('PIPHO_SORT_GALLERIES_ENABLED', true);
define('PIPHO_SORT_GALLERIES_SORT_TYPE', SORT_REGULAR);
define('PIPHO_SORT_GALLERIES_REVERSE', false);

define('PIPHO_SORT_IMAGES_ENABLED', true);
define('PIPHO_SORT_IMAGES_SORT_TYPE', SORT_REGULAR);
define('PIPHO_SORT_IMAGES_REVERSE', false);

require_once 'Pipho/DeviceInfo.php';
require_once 'Pipho/FileManager.php';

  try
    {
        $device_info    =    Pipho_DeviceInfo::getDeviceInfo();
       
        $pipho            =    new Pipho_FileManager( $device_info, PIPHO_PHOTOS_FOLDER, PIPHO_FORCE_WRITE);
        $pipho->init();
       
        $galleries        =    $pipho->getGalleries( true);
    }
    catch (Exception $e)
    {
        die( $e->getMessage());
    }

   

?>

RE: blank page

November 23, 2009 by Tole, 15 weeks 1 day ago
Comment id: 74

Yes, in article i missed to put all open and close php tags. I'll fix it.
In your pasted code, you set them wrong, and blank page is possibly because display_errors are turned off on your server.
Anyway, if you have any doubts, you can always check the attached code.