Webkrauts: Für mehr Qualität im Web.

Artikel

Photos von flickr bei Bedarf nachladen mit getFlickr

Falls Sie es noch nicht kennen sollten, flickr kann eine Menge. Man kann dort Bilder hochladen, ganz einfach taggen und beschriften und erstellt ganz nebenbei ein Netzwerk von Kontakten.

Das einzige Problem ist, dass es nicht so einfach ist, flickr-Fotos in den eigenen Seiten zu verwenden. Zwar gibt es ein API, und man kann auch jede Seite in flickr als RSS-Feed erhalten, doch das ist nicht so einfach. Wenn man sich nicht in ein API reindenken möchte und da RSS-Feeds ja aus Sicherheitsgründen nur mit einem serverseitigem Proxy-Skript in Ajax verwendbar sind, schrecken viele davor zurück.

Was sich jetzt ändern kann, da flickr ein undokumentieres JSON-Ausgabeformat hat, das man in JavaScript verwenden kann ohne einen Server und PHP zu bemühen.

• Wenn Sie http://flickr.com/photos/tags/panda in Ihrem Browser öffnen, gelangen Sie zu einer Seite mit Fotos, die mit »panda« getagged wurden.
• Wenn Sie http://api.flickr.com/services/feeds/photos_public.gne?tags=panda&format=rss_200 in deinem Browser öffnen, bekommen Sie die gleiche Seite als RSS-Feed.
• Wenn Sie http://api.flickr.com/services/feeds/photos_public.gne?tags=panda&format=json in Ihrem Browser öffnen, erhalten Sie eine JavaScript-Funktion namens jsonflickrFeed mit den Daten im JSON-Format als Parameter.

Man könnte jetzt einfach eine eigene JavaScript-Funktion mit dem gleichen Namen erstellen und direkt die Daten weiter verwenden. Allerdings dachte ich mir, dass es noch einfacher gehen sollte, und schrieb die Hilfsbibliothek getflickr zum runterladen.

getflickr für Nicht-Programmierer

Fügen Sie einfach die beiden Dokumente getflickr.js und getflickr.css in den Kopf des HTML-Dokumentes ein:

  <script type="text/javascript" src="getflickr.js"></script>
  <link rel="stylesheet" href="getflickr.css" type="text/css"></link>

Wenn diese beiden geladen sind, können Sie Verweise im Dokument in Bildergalerienverweise verwandeln, indem Sie eine CSS-Klasse mit dem Namen getflickrphotos hinzufügen. Wenn ein Besucher diese Verweise anklickt, werden diese kurzzeitig durch "loading…"-Texte ersetzt und wenn die Daten von flickr geladen wurden, wird eine Galerie angezeigt. Da der JSON-Datensatz sehr klein ist, dauert das normalerweise weniger als eine Sekunde. Der Besucher kann die Galerie schließen oder die einzelnen Bilder durch Anklicken der Vorschaubilder ansehen. Um das Großbild wieder zu entfernen, muß man einfach draufklicken.

Probieren Sie es selbst auf der Beispielseite aus.

getflickr funktioniert mit Unobtrusive JavaScript, da ohne JavaScript die Verweise einfach auf flickr weiterverleiten.

getflickr für JavaScript-Hacker

Wenn Sie getflickr in Ihren eigenen JavaScripts verwenden möchten, können Sie das mit der Methode leech() erreichen:

getflickr.leech(sTag, sCallback);

sTag

das Tag nach dem gesucht werden soll

sCallback

eine optionale Funktion, die aufgerufen wird wenn der Datensatz geladen wurde.

Nachdem die leech()-Methode aufgerufen wurde, sind zwei Strings vorhanden:

getflickr.html[sTag]

enthält eine ungeordnete HTML-Liste (ohne die UL-Elemente) in der alle Bilder als mittelgroße Ansichten mit Verweisen auf die flickr-Seite beinhaltet sind. Falls Sie die Kleinansichten brauchen, einfach _m.jpg durch _s.jpg ersetzen.

getflickr.tags[sTag]

beinhaltet alle Tags, die flickr-Benutzer zusammen mit dem gesuchten Tag eingegeben haben.

Sie können getflickr.leech() mehrfach im Kopf der Dokumentes aufrufen, um Bilder vorzuladen. Falls Sie zum Beispiel ein Formular anbieten möchten, das es Besuchern erlaubt nach Bildern zu suchen, können Sie das mit dem folgenden HTML und JavaScript erreichen:

<form onsubmit="getflickr.leech(document.getElementById('tag').value,↵
   'populate');return false">
  <label for="tag">Enter Tag
  <input type="text" id="tag" name="tag" />
  <input type="submit" value="energize" />
  <h3>Tags:</h3><div id="tags"></div>
  <h3>Photos:</h3><ul id="photos"></ul>

function populate(){
  var tag = document.getElementById('tag').value;
  document.getElementById('photos').innerHTML = ↵
     getflickr.html[tag].replace(/_m\.jpg/g,'_s.jpg');
  document.getElementById('tags').innerHTML = ↵
     getflickr.tags[tag];
  return false;
}

Viel Spass!

Probieren Sie das Formular selbst auf der Beispielseite aus.

Dieser Artikel erscheint zeitgleich auf Englisch bei den Kollegen von 24ways.

Zum Autor

Christian Heilmann lebt seit 1999 im Ausland (USA, England, Indien) und arbeitet derzeit als lei(d|t)ender Entwickler bei Yahoo in London, England. In seiner Freizeit bloggt er bei wait-till-i.com und schreibt Buecher fuer Apress und Friends Of Ed.

Info:

Photos von flickr bei Bedarf nachladen mit getFlickr ist Beitrag Nr. 93

Autor:

Christian Heilmann am 3. Dezember 2006 um 08:00

Kategorie:

Adventskalender 2006

Kommentare

Bitte die Hausregeln beachten. Alle Kommentare werden auf werbliche Links/Nicknames geprüft und gegebenenfalls gelöscht.

1. 1.
   

   Netter Ansatz, leider funktionieren im Moment die Beispieldemos nicht – werd ich wohl nachmittags nochmal reinschauen müssen.

   Und dann wünsch ich allen Webworkern noch einen schönen 1. Advent mit lecker Lebkuchen , brennendern Kernzen, drehenden Pyramiden usw.

   Kommentar von Mike - 3. Dezember 2006 um 10:05

2. 2.
   

   Mike, inwiefern funktionieren die Beispiele bei dir nicht? Und wenn nicht, auf welchem Browser/OS?

   Kommentar von Chris Heilmann - 3. Dezember 2006 um 12:41

3. 3.
   

   @Chris … geschmeidig, geschmeidig – es kam einfach nur nen 404 gestern früh. Jetzt ist alles in bester Butter – surfe mit FF 1.5.0.8

   Kommentar von Mike - 4. Dezember 2006 um 09:52

4. 4.
   

   Zwei Fragen, die mir echt weiterhelfen würden:

   1. Wie kann ich die Zahl den angezeigten Fotos-Thumbnails verändern ( zur Zeit werden mit den hier heruntergeladenen Qelltext und getflickr.js 20 Fotos geladen)

   2. Wie kann ich die gleichen Fotos sofort bei Seitenaufruf anzeigen lassen? Also ohne erst den 'energize'-Button zu klicken.

   Eine Antwort würde mich sääähr freuen – hab schon länger ergebnislos probiert.

   Gruß
   Paul

   Kommentar von Paul - 17. Dezember 2006 um 19:02

5. 5.
   

   Mein OOP Prof. würde jetzt sagen "wo ist denn da der Quelltext dokumentiert"
   Aber ist ein echt nettes Skript ansonsten, werd mal versuchen ein wenig damit rum zu spielen ^^

   Gruß Tim

   Kommentar von Tim - 7. Februar 2007 um 13:32

6. 6.
   

   Ist aber echt nicht schlecht. Hab damit jetzt mal ein wenig herumgespielt und find es wirklich sehr interessant. Mal schaun was ich noch so finde!

   Werblicher Link entfernt

   Kommentar von Hannes - 5. Februar 2008 um 21:23

7. 7.
   

   Schön wären noch Effekte wie Einblenden Ausblenden!!

   Kommentar von Erner - 8. Juni 2008 um 10:41

Kommentar-Feed für diesen Beitrag

Die Kommentarfunktion ist zur Zeit leider deaktiviert.