Book Image

HTML5 iPhone Web Application Development

By : Alvin Crespo
Book Image

HTML5 iPhone Web Application Development

By: Alvin Crespo

Overview of this book

<p>Create compelling web applications specifically tailored for distribution on iOS Safari. Work through real world examples with references, and in-depth discussions on the approach; including its benefits and drawbacks.<br /><br />"HTML5 iPhone Web Application Development" strives to teach all levels of developers, beginners and professionals, the process of creating web applications for iOS Safari. Utilizing current industry standards for frontend development, learn to take advantage of HTML5, CSS3 and JavaScript to create compelling software.<br /><br />Start with reviewing current industry standards for frontend development, and end with creating a native application using the same codebase.</p> <p>Your journey will begin with an overview of current industry standards for frontend technology, quickly moving to solve real world issues; from creating a resizable or responsive gallery, to creating a single page application that utilizes the popular Backbone.js framework.</p> <p>"HTML5 iPhone Web Application Development" aims to make you an expert in developing web applications for the iOS Safari platform.</p>
Table of Contents (17 chapters)
HTML5 iPhone Web Application Development
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Creating a responsive photo gallery


We'll get a better understanding of touch and gesture events if we focus on small pieces of functionality that we have already seen in traditional mobile applications, such as an interactive slideshow. We've seen this everywhere, a slideshow with next and previous buttons but also the ability to swipe from left to right or vice versa. The buttons are easy, and attaching touch events is also fairly simple; however, swiping does not come out of the box in mobile Safari, so we need to build that. So let's get started by first laying out our gallery and then styling it.

Gallery markup and styling

As with any slideshow gallery, it's essential that we create a good structure. This structure should be easy to follow and doesn't really require too many elements if we want to modularize it.

The basic gallery slide list

Let's start with something extremely basic. First, let's create a div with a class of gallery:

<div class="gallery"></div>

From here, we want...