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!
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:
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.
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:
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.
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.
Add this PHP code to preload all galleries which are found in your photos folder.
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.
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.
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:
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
And replace "slider-toolbar-top" with
Well, that is it. Your Jaipho gallery fits almost 100% to your iUI based site look and feel.