Native Anwendungen und App Stores - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 367

tion neuespolaroid() , mit Ausnahme des eben erstellten Kameraaufrufs, in eine neue
Funktion namens onSuccess() . Platzieren Sie diese direkt nach dem Kameraaufruf.
Beachten Sie die Variable imageURI , die mit der Funktion übergeben wird. Diese Vari-
able beinhaltet die URL zu Ihrem aufgenommenen Bild. Sie müssen daher die veral-
tete Variable randomImageCorrect bei der Festlegung des Hintergrundbildes des
Containers mit der Klasse .flickr-bild noch durch imageURI ersetzen. Komplett sieht
das Ganze dann so aus:

function onSuccess(imageURI) {
// Polaroid einfliegen lassen
// Leichte Rotation per Zufall
rotation = Math.floor(Math.random() * 10)-5;
$('.polaroid-rahmen').css("-webkit-transform", "rotate(" + rotation +
"deg)").toggleClass('sichtbar');
// Geschuettelt wieder auf 0 setzen
geschuettelt = false;

9

// Das Bild als Hintergrundbild des Containers festlegen
$('.flickr-bild').css("background","url(" + imageURI + ")");
// Text des Buttons ändern
$('button').text("Und jetzt, shake it!").toggleClass("shakeit");
}

Listing 9.1 Bei erfolgreicher Aufnahme eines Bildes fliegt das Polaroid ins Bild

Daran schließen Sie nun noch die Funktion an, die ausgeführt werden soll, wenn
etwas schiefgegangen ist:

function onFail(message) {
alert('Das Foto konnte aus folgenden Gründen nicht verwendet werden: '+mes-
sage);
}

Da Sie alles, was Sie machen, auch zu 100 % erledigen, folgt nun der Feinschliff.
Ändern Sie den Text des Buttons im body -Bereich in »Foto machen!« um. Im Aufruf
der Funktion onShake , etwas weiter unten im Code, ändern Sie den Text des Buttons
von »Neues Polaroid!« zu »Neues Foto machen!«. Somit ist für den Benutzer klar, was
passiert wenn er den Button betätigt.