Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Photos von flickr bei Bedarf nachladen mit getFlickr

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Photos von flickr bei Bedarf nachladen mit getFlickr

Die Foto-Community flickr hat zweifelsohne eine Menge zu bieten. Wie Sie aus den vorhandenen Formaten und Services ein wenig mehr herauskitzeln zeigt Ihnen Chris Heilmann. Mit seinem JavaScript getflickr können Sie mit ein wenig Programmierkenntnissen dynamisch Bildergalerien in Ihre Webseiten einbinden.

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.

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.

Kommentare

Mike
am 03.12.2006 - 10:05

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.

Permanenter Link
Christian Heilmann

Christian Heilmann (Autor)
am 03.12.2006 - 12:41

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

Permanenter Link

Mike
am 04.12.2006 - 09:52

@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

Permanenter Link

Paul
am 17.12.2006 - 19:02

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

Permanenter Link

Tim
am 07.02.2007 - 13:32

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 :)

Permanenter Link

Hannes
am 05.02.2008 - 21:23

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

Permanenter Link

Erner
am 08.06.2008 - 10:41

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

Permanenter Link

Die Kommentare sind geschlossen.