HTML and CSS Reference
In-Depth Information
6.3.2 Laden eines Bildes aus dem Fotodienst Flickr via JSON
Der Fotodienst Flickr bietet die Möglichkeit, Bilder von Gruppen oder auch einzelnen
Benutzern über JSON in ein Objekt zu laden. So können Sie die Daten leicht mit
jQuery weiterverarbeiten.
Im Folgenden werden Sie ein Bild aus Flickr laden und als Hintergrundbild des Con-
tainers
flickr-bild
setzen. Der Vorteil, es als Hintergrundbild zu setzen, ist, dass Sie
es so mit CSS ohne Verzerrung automatisch auf die Größe des Containers skalieren
können. Sie könnten dies auch mit JavaScript lösen, allerdings ist CSS die einfachere
und auch performantere Lösung.
6
Lagern Sie das Laden des Bildes in eine Funktion namens
neuespolaroid()
aus. Damit
können Sie später einfach ein neues Bild laden, indem Sie lediglich die Funktion auf-
rufen. Platzieren Sie alle weiteren Codeschnipsel in folgender Funktion:
var neuespolaroid = function() {
};
Als Erstes definieren Sie eine Variable namens
randomImage
, die später die Webadresse
des Bildes enthält, welches Sie ausgeben möchten.
var randomImage = "";
Im nächsten Schritt folgt das Laden der Bilder von Flickr. Für dieses Beispiel haben
wir Florians Fotostream ausgewählt.
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=
29306403@N07&lang=de-de&format=json&jsoncallback=?", function(data){
});
Der Aufruf besteht dabei aus einer Funktion
getJSON
, der Webadresse des sogenann-
ten
Feeds
, der Bilder und einer Funktion, die Sie im weiteren Verlauf mit Leben füllen
werden.
Doch zunächst ein paar Worte zum Feed. Jeder Flickr-Fotostream kann als Feed abon-
niert werden. Sie finden die Adresse des Feeds ganz unten auf einer Fotostreamseite
von
http://flickr.com
(Abbildung 6.6).
Search WWH ::
Custom Search