Auslesen des Bewegungssensors mit JavaScript - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 252

data.items beschreibt alle Elemente, die sich innerhalb des JSON-Aufrufs befinden.
Mit der Erweiterung media.m sprechen Sie die Bildadresse des Bildes in mittlerer
Größe des jeweiligen Elements an. Zur zufälligen Auswahl eines Elements verwenden
Sie die Funktion Math.random() , die eine Zufallszahl zwischen 0 und 1 generiert und
anschließend mit der Anzahl der Elemente ( data.items.length ) multipliziert.
Math.floor stellt sicher, dass die Zahl abgerundet wird und somit eine ganze Zahl ent-
steht. Ohne eine Zufallsfunktion, würden Sie z. B. das vierte Element folgendermaßen
ansprechen:
randomImage = data.items[4].media.m;
Soweit, so gut. Sie haben nun die Webadresse des Bildes in mittlerer Qualität in der
Variable randomImage gespeichert.
Als Nächstes ersetzen Sie die Größe des Bildes durch eine höher aufgelöste Version.
Denn diese sieht später in Ihrer App schärfer und somit besser aus. Die Bilder von
Flickr sind immer nach folgendem Schema benannt: ID_GRÖSSE.jpg . Als konkretes
Beispiel ein Bild von Florians Fotostream:
2836234208_5e405a7dce_m.jpg
Um eine größere Version zu laden, müssen Sie lediglich den Zusatz _m durch _z erset-
zen. Dies erreichen Sie mit folgendem Code, direkt nach der Definition von random-
Image :
// Das Bild durch eine größere Version ersetzen
var randomImageCorrect = randomImage.replace("_m.jpg", "_z.jpg");
Dabei wird der Inhalt von randomImage mit der JavaScript-Funktion replace auf den
Wert _m.jpg durchsucht. Wenn diese Zeichenfolge gefunden worden ist, wird sie
durch _z.jpg ersetzt. Damit haben Sie nun die Webadresse des großen Bildes in der
Variablen randomImageCorrect gesichert.
Das zufällige Bild als Hintergrundbild des Polaroids definieren
Nun heißt es, das Bild als Hintergrundbild des Containers flickr-bild zu setzen. Wie
schon im Vorhinein erwähnt, hat die Definition des Bildes als Hintergrund den Vor-
teil, dass Sie es leicht und verzerrungsfrei mit CSS auf die Größe des Containers ska-
lieren können. Je nach Format wird dann automatisch an den Rändern etwas
weggeschnitten.
// Das Bild als Hintergrundbild des Containers festlegen
$('.flickr-bild').css("background","url(" + randomImageCorrect + ")");