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 » 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).

update: iUI theme is standard since Jaipho 0.54 and Pipho 1.02. Read more at http://www.jaipho.com/content/ipad-version-released

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

limit galleries per page?

June 19, 2010 by Anonymous, 1 year 33 weeks ago
Comment id: 169

i just installed pipho, everything went just fine, and everything is working ok, i used the digg template but pipho shows all my galleries in one page, so my question is, how can i limit the galleries per page to 10, and then click on "Get 10 More Stories..." to show 10 more?

any help would be really appreciated, thanks.

RE: limit galleries per page?

June 19, 2010 by Tole, 1 year 32 weeks ago
Comment id: 170

Yes, gallery list page is not covered in Pipho well, so the only example is here in iUI demo. This will be fixed in future versions.

To add paging functionality by yourself you have to:
- add links for pages (index.php?page=0, index.php?page=1 .... )
- get the passed $_GET['page'] value
- fetch the galleries with this method you have to add to Pipho_FileManager class

public function getPagedGalleries( $pageSize, $pageNo, $loadFirstImage=false)
{
        $galleries              =       array();
        $all_galleries  =       $this->getGalleries( $loadFirstImage);
        $start_pos              =       $pageSize * $pageNo;
        $end_pos                =       $start_pos;
        $total                  =       count( $all_galleries);
       
       
        for ($i=0; $i<$total; $i++)
        {
                if ($i>=$start_pos && $i<$end_pos)
                        $galleries[] = $all_galleries[$i];
        }
       
        return $galleries;
}

Remove link

May 20, 2010 by Anonymous, 1 year 37 weeks ago
Comment id: 155

Thanks for the comment!
By replacing the "PHP short tags" the problem is solved!

But can you remove the beta link?

Thanks!

Index.php doesn't work

May 10, 2010 by Anonymous, 1 year 38 weeks ago
Comment id: 150

I think I forgot something, because the index.php shows no images and titles.

if I go to gallery.php, the images looks fine!

The gallery is in my beta online at (link removed)

Hope you can see what's wrong..

Thanks!

(Attached source code removed)

PHP short tags again

May 11, 2010 by Tole, 1 year 38 weeks ago
Comment id: 151

Please, check for "PHP short tags" in old comments bellow.

Default to thumbs?

April 1, 2010 by Anonymous, 1 year 44 weeks ago
Comment id: 130

Like Jaipho... any way we can make the default layout to be the thumbs instead of the 1st slide?

RE: Default to thumbs?

April 1, 2010 by Tole, 1 year 44 weeks ago
Comment id: 133

In your page that shows Jaipho, replace the initialization block:

                var app =       new Jph_Application( dao);
                app.Init();

witrh:
                var app =       new Jph_Application( dao);
                app.mDefaultMode        =       GALLERY_STARTUP_THUMBNAILS;
                app.Init();

Works with jQTouch

March 9, 2010 by Anonymous, 1 year 47 weeks 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, 1 year 47 weeks 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, 1 year 49 weeks 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, 1 year 49 weeks 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, 1 year 51 weeks 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, 1 year 51 weeks ago
Comment id: 112

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

Parse error...

February 3, 2010 by Anonymous, 2 years 1 day 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, 2 years 1 day 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, 2 years 1 week 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, 2 years 1 week 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, 2 years 2 weeks 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, 2 years 2 weeks 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, 2 years 1 week 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, 2 years 1 week 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, 2 years 1 week 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, 2 years 25 weeks ago
Comment id: 22

these directions make no sense

RE: these directions make no

August 10, 2009 by Tole, 2 years 25 weeks 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, 2 years 10 weeks 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, 2 years 10 weeks 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.