Using the open source script PhotoSwipe, you'll learn how to add a gesture-based, fully interactive image gallery into your mobile website that replicates the "native" photo application bundled with iOS devices. Ste Brennan also gives a quick rundown of the events that are made available by mobile browsers
A common requirement for many websites is a simple and intuitive way for visitors to browse and navigate around images. Indeed, there are literally hundreds of scripts available out there that achieve this.
This requirement is also true for mobile websites. However, many solutions out there are tailored for the desktop rather than mobile devices. Features such as using your finger to "swipe" through images and using multi-touch gestures to zoom and rotate images are missing.
Mobile users are used to browsing their photo library with the built-in applications that come bundled with their device’s operating system and it's only fair therefore, that mobile website developers to try and replicate this intuitive experience for visitors.
PhotoSwipe (developed by Code Computerlove) makes adding this functionality simple. Inspired by the built-in iOS photo viewer application and Google Images for mobile, PhotoSwipe is a free HTML/CSS/JavaScript based image gallery specifically targeting mobile devices. The current version supports mobile handsets running WebKit-based browsers, ie iOS, Android and BlackBerry 6, and it also runs on desktop browsers including Chrome, Firefox, Safari and Internet Explorer 8 and above. Best of all, PhotoSwipe is completely free and open source. For more advice, see our mobile website design tips.
Getting started
Getting started with PhotoSwipe is simple. Visit the website and click the download link to download the latest release.
Alternatively, you can visit GitHub to download the release and its source code, raise a support issue or actively contribute to the project!
When you uncompress the release package, you will see an "examples" folder, which contains a set of comprehensive demos that you can study and follow. These examples range from using the mobile WebKit-optimised implementation (index.html) to using PhotoSwipe with jQuery (jquery-engine.html) and jQuery Mobile (jquery-mobile.html).
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
It's important to note that PhotoSwipe is completely configurable in terms of its visual appearance and how it's embedded within your mobile website. It doesn't enforce how you organise your HTML, CSS or JavaScript. It's also important to note that PhotoSwipe comes in two distinct flavours:
A non-jQuery, mobile WebKit optimised version:This version is self-contained and does not require jQuery. It's written to be as optimised as it can be for mobile web browsers based on WebKit (ie iOS, Android and BlackBerry 6 devices). It will also run on desktop WebKit browsers such as Chrome and Safari as well as Firefox 4 and above, which is useful for development purposes. This version will not run on Internet Explorer.
A jQuery version:Use this implementation if you require a wider browser support - for example Internet Explorer - or you need to integrate PhotoSwipe into a jQuery Mobile site.
To get started with either version:
Create a “gallery style” HTML page that includes the PhotoSwipe CSS file and has a list of thumbnail images on it
Each thumbnail image should link to the URL of the full-size image
Each thumbnail image can have an optional “alt tag” value that PhotoSwipe will use as the image’s caption
It's not a requirement that these thumbnail images are arranged in divs: they can be equally arranged in unordered lists or any other formatting preference you have.
To set up PhotoSwipe using the “mobile WebKit optimised” version:
Include "simple-inheritance.min.js" and the latest minified version of PhotoSwipe, eg "code-photoswipe-1.0.16.min.js"
On the "DOM content loaded" event, tell PhotoSwipe where to find your thumbnails, eg
As well as amending the PhotoSwipe CSS file to tweak its visual appearance, the script comes complete with a set of comprehensive configuration settings that allows you to fine-tune your implementation covering:
Setting the speed of any animations
How sensitive the swipe and double tap gestures are
How PhotoSwipe scales your image to fit the viewport
How PhotoSwipe locates your full size images if you have a different markup layout
Whether a user can zoom and rotate an image, etc
A full list detailing these settings and default values are available in the “README.md” file in the release package. They are also viewable online at github.com/codecomputerlove/PhotoSwipe.
Example of supplying settings for the mobile WebKit optimised version:
These events are triggered when the user touches the screen. Your event handler function can obtain information from a touch event such as the number of fingers touching the screen (event.touches) and for each touch, the corresponding X and Y co-ordinates (event.touches[0].pageX), eg
document.addEventListener('touchstart', function(event){ // This will log the number of fingers touching the screen console.log(event.touches.length);}, false);
Or, if you are using jQuery:
$(document).bind('touchstart', function(event){ // This will log the number of fingers touching the screen console.log(event.originalEvent.touches.length);});
It's important to remember that when using jQuery to access these events, you must reference the "originalEvent" property of the event object. This is due to the way jQuery wraps up events in its own event object.
These events are triggered during a multi-touch sequence, typically pinching and rotating gestures. Gesture event objects pass in useful information such as scale and rotation. PhotoSwipe uses these when handling image scaling and rotating on iOS devices.
Screen Orientation - "orientationchange"
This event is triggered every 90 degrees of rotation (portrait and landscape modes). You can obtain the current orientation through window.orientation.
From the official Safari reference documentation, these "are created when significant change in motion occurs. The event object for devicemotion encapsulates the measurements of the interval, rotation rate, and acceleration of a device". This event is useful for detecting when the user shakes or moves the device.
More information about these events can be found on the Safari Developer site:
Hopefully, this tutorial has given you a quick insight into how to add a "native like", gesture-based image viewer into your mobile websites using PhotoSwipe.
I also hope the quick run-down of events that are made available via mobile browsers will fire your imagination as you come up with new and innovative ways of using the technology to enhance your mobile websites.
Thank you for reading 5 articles this month* Join now for unlimited access
