Skip to content
Home

Category: jaiphoSyndicate content

JAIPHO beta - Javascript image gallery for iPhone

March 21, 2009 by Tole

One of the most impressive iPhone achievements is the Photos application. Taking advantage of big screen, gestures, gyroscope and most important: extra good user interface it is just miles away from ordinary cell phones.
There is one more another iPhone killer feature: Safari browser. It actually made for first time in history, mobile surfing really usable. You can browse the mobile, as well as standard websites and enjoy in it.

But what is the situation when you are browsing some web images gallery?

JAIPHO 0.52.03 - Css fix

September 11, 2009 by Tole

Only jaipho.css file is updated with several layout bugs fixed.

2px on bottom
If you customized Jaipho and you changed the background color for full screen mode to white, you could notice that under the bottom toll bar are 2px of extra space.

2px on images
Till now there were 2px of unused space bellow images in full screen mode.

Long titles are breaking the layout
If your gallery name was to long, the title displayed on top toolbar was breaken into two lines. Now, your long titles will be automatically shorted and appended with "...".

JAIPHO 0.52.02

August 30, 2009 by Tole

Full source file in previous version had the Jaipho source twice in it (0.52.00 and 0.52.01) what doubled the file size.
This version has that file corrected.

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

JAIPHO 0.52.01

August 6, 2009 by Tole

Two mistakes were found in previous release. This one fixes them.
Here are the solved bugs:

Incorrect landscape mode behavior
In OrientationManager was the hard coded value for device screen width, which was causing the incorrect display in landscape mode.

White line before thumbs are loaded
In thumbnails mode, before the thumbs were loaded, there was white line in thumbnail placeholder divs (gray squares). This was very noticeable on slower connections.
This bug was produced in 0.51.

JAIPHO 0.52 - Javascript history patch

July 24, 2009 by Tole

There is bug in Safari browsers while interpreting javascript document.location.replace() method. Instead of just replacing the loaction, it also appends history. Result is that after you navigated in Jaipho through slides, pressing Back in browser will return you through slides back (still in Jaipho), instead returning you to original page you came from (gallery list, news article ...). Several users contacted me regarding this annoying behavior.
This version offers patch for this problem.

Try Jaipho demo in emulator mode with your iPhone

April 27, 2009 by Tole

Emulated Jaipho on iPhoneThere are two variants of Jaipho demo page. One is the real Jaipho and you can see it if you access demo page www.jaiphodemo.info with your iPhone. Another variant, iPhone emulated version, will be shown at the same address if you access with your browser on your desktop computer. In emulated version Jaipho itself is opened in iframe. If you saw both versions, you might ask yourself, can Safari in iPhone display the "emulated" version and how it will behave? Is the javascript support that much good?

Now you can try it for your self. Just grab the iPhone and click on this link http://www.jaiphodemo.info/?forcewebdemo=1

JAIPHO Configuration

April 19, 2009 by Tole

feature version 1.02
last changed in Jaipho 0.52

There is set of parameters to adjust Jaipho behavior. Those parameters can be changed through set of variables in template (jaipho.html) file.

Basic parameters

TOOLBARS_HIDE_TIMEOUT - In Fullscreen mode, toolbar will autohide after specified time.
SLIDESHOW_ROLL_TIMEOUT - How much time to elapse for slide to change in Slide Show mode.

JAIPHO 0.51 - Improved image preloading

April 15, 2009 by Tole

Here is second beta release. As major change it brings better user experience on loading both thumbnails and slides in your gallery. Here is the list of all changes.

Jaipho changes
Upgraded images preloading system - javascript JphUtil_Preloader class. It preloads slides, so when user triggers next button the image will already be prepared. There are few changes in it comparing to previous version.

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.