Beautiful Image Galleries Using PhotoSwipe
PhotoSwipe is an open source library that provides your mobile website visitors with a near “native like” gesture based image browsing experience that is not dissimilar to the image viewer app pre-bundled with iOS devices. In this article I’ll give a quick run through of getting started with PhotoSwipe as well as providing some more in-depth technical tips and tricks, which I learned along the way when developing the library.
Before we go too far, if you haven’t seen PhotoSwipe in action yet, pop along and view the PhotoSwipe Demo. We’ll be waiting for you when you return.
Getting started with PhotoSwipe is simple. Visit PhotoSwipe and download the latest release.
Unzipping the release you’ll find an “examples” folder which contains numerous HTML files showing you the various ways in which you can implement PhotoSwipe into your mobile website. You’ll find examples for many scenarios covering basic set up, integrating with jQuery Mobile and customising it to suit your own needs and personal tastes. Checking out these examples is without doubt the best way of getting started with PhotoSwipe.
Which Devices are Supported?
At the time of writing, PhotoSwipe works with iOS devices, Android as well as Blackberry 6 and in a limited but perfectly usable way on Windows Phone 7 Mango.
In addition, PhotoSwipe works just fine on desktop browsers. It works awesome on Firefox and, as the library is WebKit optimised, it works equally as well on Chrome and Safari. Finally, with a little help from jQuery, PhotoSwipe runs on Internet Explorer 7 and above.
Source Code, Support & Involvement
Certainly, PhotoSwipe is open sourced under the MIT license. You are free to do with it as you will!
If you would like to get involved further, or need support with an issue you may have discovered with the library, you can find Computerlove on GitHub and the PhotoSwipte Repo where you can log issues and make pull requests. You can also follow PhotoSwipe on Twitter for latest release announcements.
Letting go of jQuery, embracing jQuery
- The library needed to be as small as possible to download. There are no guarantees that mobile website visitors are rocking on WiFi and indeed will more likely be on an intermittent 3G connection or lower.
- The library needed be as lean as possible and only contain code and logic required for mobile browsers. Anything else would be considered as bloat and unnecessary work for a device to do.
To make things tricky, we also wanted to support desktop browsers, especially Internet Explorer, and we also wanted to ensure PhotoSwipe worked well with the rising star of mobile web libraries, jQuery Mobile.
To tackle these constraints, we followed an interface led approach. Here we agreed a core base library interface (or a defined list of core functions) that would do the underlying donkey work that PhotoSwipe needed, such as creating a DOM element, manipulating styles, adding and listening to events, animation etc.
Once we had defined this core library, we wrote an implementation of it targeting WebKit browsers and using the built in DOM standard capabilities supported by these browsers. This freed us up dramatically. We didn’t have to worry about supporting IE or other browsers that were not our primary concern. Ultimately, it meant we didn’t have to use jQuery.
- Secondly, it saved mobile users having to download the jQuery library when, in theory, only a small percentage of it was actually needed or used by PhotoSwipe.
It was then, on top of this mobile / standards optimised implementation that the main PhotoSwipe code was developed and tested. In essence, PhotoSwipe doesn’t care how the core library is implemented. All it needs to know is that a core library supports a function that is requires such as
At this stage, everything was good with the world. However, a key remit of the project was to support Internet Explorer and work with jQuery Mobile.
This was relatively easy to resolve. We simply developed a jQuery implementation of our core library. This meant, in a relatively short space of time and with minimal effort, we had PhotoSwipe running perfectly well on IE and running great with jQuery Mobile!
Mobile Browsers are Crazy
This is something that became apparent very early on when developing PhotoSwipe. Initially, targeting WebKit seemed like an easy route. iOS, Android and BlackBerry all base their web browsers on WebKit. Optimistically, it was anticipated that this fact alone would negate a lot of potential cross platform issues.
This isn’t the case. Mobile browsers are not the same even if they are based on the same core rendering engine.
The main thing to remember here, is that you need a decent set of testing devices / simulators running different operating systems and different versions of operating systems. Don’t rely on the fact that they are all in essence running the same browser. With Android and Blackberry this is relatively simple as you can run multiple versions via official simulators as you need to. With iOS, it’s helpful to have a few devices lying around running different versions of iOS.
Debugging & Getting Some Help
Another issue when developing for mobile web browsers is the lack of decent debugging tools. These browsers don’t come with tools like Firebug for Firefox or the Web Inspector bundled with Chrome and Safari. Even things like getting a basic console log can be cumbersome.
In the main, this didn’t cause too much of an issue. The majority of development was in Chrome and Firefox on the desktop with continuous sanity checks on mobile devices and simulators. This meant that we could debug using Firebug and the Web Inspector.
However, sometimes bugs and quirks with the mobile browsers meant that debugging on desktop browsers was useless. You needed to know what was actually happening on the mobile device itself. For this, at least iOS comes with a developer console so you can perform some basic tracing. However this is a bit intrusive and takes up valuable screen space. Also this isn’t available on other devices such as Android.
Luckily there is help. If you haven’t already, I recommend you check out the Weinre project developed by the PhoneGap guys. This project allows you to debug what’s happening remotely on a mobile web browser, but via a debug tool running on your desktop browser!
The tool is very similar to Firebug and Web Inspector and can save you a stack of time when you hit a brick wall with something quirky going on inside a mobile web browser. Weinre is free to download, simple to setup and runs on Windows or Mac. Alternatively, there’s an online version you can use to save you having to install anything! This can be found at http://debug.phonegap.com.
Making the Most of Hardware Acceleration
One final tip is tapping into hardware acceleration on these devices, especially iOS devices. Tapping into the hardware is essential for achieving “native-like” smooth animation and interaction.
It’s pretty easy really and there are plenty of articles out there on how to achieve this. However, the basic gist is:
- The final killer tip, especially for iOS devices, is on HTML elements you are animating, if you apply “-webkit-transform: translate3d(0px, 0px, 0px);” this will trigger CSS3 animation to be hardware accelerated. It will work great in fixing any flicker you notice happening with your animations. It is worth bearing in mind however to be selective with this as over use can have a negative effect. Try your animation first without applying this to see if you really need it.
PhotoSwipe is free! Go ahead, Download PhotoSwipe, have a play and add something nice to your mobile website. If you like it, help spread the word or join us at GitHub and contribute to the future of the project.