Code Creates Photoswipe - new (and free) technology for adding a gesture-based image gallery to a mobile website
Photoswipe is first-of-its kind technology that’s freely available to digital designers and developers for adding a gesture-based image gallery to a mobile website. The full-featured image viewer offers the ability to swipe items shown on mobile websites via mobile and touch devices (it also works on desktops).
It also provides support for device orientation changes, resizing images automatically and "pinch" gestures to zoom and rotate. A play button can display the images as a slideshow and there are a number of options for customising the gallery like the speed of fade in-fade out effects, enabling zoom, method of image scaling and much more. The interface is native-like and it is built with HTML, CSS and JavaScript.
Code Computerlove's Ste Brennan, who created Photoswipe, said,
“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.
“Similarly, this requirement is also true for mobile websites. However, many current solutions 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 a device’s operating system and it's only fair, therefore, as mobile website developers we replicate this intuitive experience for visitors to mobile website. PhotoSwipe makes adding this functionality simple.”
Ste added, “Mobile solutions are in big demand from the major brands we work with at Code Computerlove. We developed Photoswipe as part of our mobile technology R&D work and decided to make it free and open source. We’ve had a fantastic response from the digital community that have trialled Photoswipe so far and we hope it fires developers' imaginations to come up with new and innovative ways of using the technology to enhance their mobile websites.”
The current version of Photoswipe supports mobile handsets running WebKit based browsers, i.e. iOS, Android and BlackBerry 6 and it also runs on desktop browsers including Chrome, Firefox, Safari and Internet Explorer 8 and above.
Getting started with PhotoSwipe is simple. Visit the website (http://www.photoswipe.com) and click the download link to download the latest release. Alternatively, visit GitHub (https://github.com/codecomputerlove/PhotoSwipe) to download the release, source code, raise a support issue or actively contribute to the project! When you uncompress the release package, users can view 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).
Back