Native WordPress photo gallery is not build to work well on mobile devices as they are made for desktop web. When you open the gallery on your iPhone or iPad device, things get messy. Images are too big, no navigation is shown.

Mobile optimized image gallery fixes the image size, ads swipe navigation and familiar toolbars and give that iOS native look and feel.

Installation

Just download and activate the plugin and that is all.
No additional configuration is needed. Not even in combination with the NextGEN Gallery plugin.

After the activation, any page containing Gallery made on WP Media Library or NextGEN plugin will work out of the box, transforming the gallery pages into mobile optimized gallery for all iPhone and iPad visitors on your site.

There is a plethora of basic and advanced settings inside the plugin’s option page.

In basic options section, you might find some interesting stuff like changing the WPJaipho theme (skin) or enabling the thumbnails WPJaipho view.

For a detailed explanation of each parameter you can visit WPJaipho’s documentation page.

Supported stuff

WPJaipho mobile optimized gallery for iOS supports native WordPress gallery and NextGEN gallery (which is the most popular WP gallery today).

It also works without any problems on WP Touch and WordPress Mobile Pack plugins.

Extending the plugin

By using WPJaipho hooks, you can develop your own plugin or theme which will extend and use WPJaipho functionality.

All hooks are listed and explained in details here

With current rise of mobile market, WPJaipho mobile optimized gallery plugin is a must have for your awesome WordPress sites.

What do you think of this great plugin? Share your opinion in comments below.

This is where Socketbug fills the gap! Socketbug is a Remote Debugging Utility built using Socket.IO. This means you can now use modern browsers ( both mobile and desktop ) to work together to allow you to remotely debug you mobile web applications.

The following text is taken from Socketbug website.

Socketbug is built on top of Node.js using Socket.IO (currently v0.7) as the main backend for communication. Socket.IO automatically determines what communication transport to use and enables your mobile application to send/receive messages from other connected devices.

To use Socketbug you will need to install the server code in a central location that will be accessible by all devices that will be sending or receiving data. This can be anything from your laptop/desktop, or a remote server. There are no Cross Domain issues to worry about so you do not have to have Socketbug installed on the same machine that your mobile application is installed on.

To make things easy, Socketbug also has a native console that was created for you to connect to your Socketbug Server. Once your server is installed you should literally just need to copy some javascript code into your Mobile Application, and then open up the Socketbug Console.

If you get stuck, there is a forum available. You can download it on Socketbug site.

To help us, smart people have developed a unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Yes, it’s jQuery Mobile.

So, let me show how easy it is to use it. When you start developing with jQuery Mobile, first thing is to build a boilerplate template and see if everything is working as expected.

So open up your favourite editor and enter this code in:

[code lang=”html”]

[/code]

Now save this page as index.php and open it up in the browser. OMG, it works. As you can see, we called jQuery and jQuery Mobile from Google and loaded jQuery Mobile CSS.

If you look closely, you will some strange attributes like data-role. It is exactly these attributes that are telling jQuery Mobile what this element is, how to look like and how to behave.

So, let us do something fancy now. There are two type of linking inside jQuery Mobile, External and Internal. Let me show you the magic:

External linking

By default, when you click on a link that points to an external page (ex. products.html), the framework will parse the link’s href to formulate an Ajax request (Hijax) and displays the loading spinner.

If the Ajax request is successful, the new page content is added to the DOM, all mobile widgets are auto-initialized, then the new page is animated into view with a page transition.

If the Ajax request fails, the framework will display a small error message overlay that disappears after a brief time so this doesn’t break the navigation flow.

Open a new file and paste this in:

[code lang=”html”]

[/code]

Save this file and load it in the browser. If you click on the link, you will see Loading and the new page is loaded. Also, there is a Back button rendered on top in header.

If something is wrong (like you misspelled index.php and wrote ondex.php), you will get an error message. Nice.

Internal linking

A single HTML document can contain multiple pages that are loaded together by stacking multiple divs with a data-role of “page”. Each page block needs a unique ID (id=”first”) that will be used to link internally between pages (href=”#first”). When a link is clicked, the framework will look for an internal page with the ID and transition it into view.

[code lang=”html”]

[/code]

Above is only code inside the body tags.

It’s important to note if you are linking from a mobile page that was loaded via Ajax to a page with multiple internal pages, you need to add a rel=”external” to the link. This tells the framework to do a full page reload to clear out the Ajax hash in the URL. This is critical because Ajax pages use the hash (#) to track the Ajax history, while multiple internal pages use the hash to indicate internal pages so there will be a conflicts.

Themes

You can easily use themes anything in jQuery Mobile with data-theme attribute. Try something like this:

[code lang=”html”]

[/code]

Try it in your browser and you should have a nice bluish theme. You can try other letters like e or a.

That’s it for the basics. Next time we will start building our sample web page in jQuery Mobile from scratch. I hope you like this amazing piece of software and realize how easy it is to get started.