jQuery-Logo

So, nach langer Zeit mal wieder ein Beitrag aus meiner Praxiserfahrung mit jQuery.

Seit gestern verziert die Sidebar dieses Weblogs nun auch mein Flickr-Stream, der über den wohl vielen Flickr-Nutzern bekannten Badge-Generator erzeugt wird. Hierbei wird über ein kleines JavaScript eine Liste der zuletzt veröffentlichten Fotos aus dem eigenen Flickr-Profil ausgegeben, nach einem Klick auf das jeweilige Bild landet man dann auf der jeweiligen Flickr-Seite.

Nun hat mich an dem Script ein wenig gestört, dass der User erstmal meine Seite verlassen musste um sich ein Foto anzusehen (zumindest die Leute ohne einen coolen Browser) und zum anderen hatte ich die fixe Idee, die Bilder direkt über die eh schon integrierte Thickbox anzeigen zu lassen.

Da man das JavaScript des Badge-Makers nicht direkt beeinflussen kann musste ich mir mit ein wenig jQuery-Magic behelfen.

Der Badgemaker macht erst einmal folgendes: Er holt die letzten x Thumbnail-Bilder des eigenen Flickr-Profils ab, und packt diese als <img /> in den DOM, je nachdem wo wir den Scriptaufruf in unser HTML gepackt haben. Um das Bild herum baut er natürlich auch gleich den passenden Link zur jeweiligen Flickr-Seite. Das schöne daran ist zudem, das z.B. der Titel des Bildes direkt im Alt-Atribut des Bildes zu finden ist.

Hier ein kurzes, von mir geschriebenes und wahrscheinlich sehr stümperhaftes jQuery/JavaScript-Snippet das bei mir den gewünschten Effekt gebracht hat:

$(document).ready(function(){
	$('.myflickr img').each(function (i){
		var oldurl = $(this).attr("src");
		var newurl = oldurl.replace(/_s./g, ".");
		var realurl = $(this).parent().attr('href');
		var realtitle = $(this).attr('title');
		$(this).parent().addClass('thickbox').attr('href',newurl).attr('rel','myflickr').attr('title',''+realtitle+' <a href="'+realurl+'">[Flickr]</a>');
	});
});

So, hier wie immer eine kleinere Erklärung wie die Manipulation denn so erfolgt:

Da ich das <script> direkt in ein DIV mit der Klasse myflickr verpackt habe kann man nun alle Bilder einfach per $('.myflickr img').each(); durchlaufen. Die Variable oldurl betanken wir mit der URL des Thumbnails. In der Variable newurl nehmen wir uns die URL des Thumbnails und löschen aus dem String einfach am ende das _s heraus. So wird aus der URL

http://farm3.static.flickr.com/2399/2094787211_e9f451515a_s.jpg

nun die URL zum Hauptbild, nämlich

http://farm3.static.flickr.com/2399/2094787211_e9f451515a.jpg

Danach packen wir uns für später noch die URL zur Flickr-Seite in die Variable realurl und in realtitle den Inhalt des Alt-Atributs des Bildes. So, nun haben wir alle Daten die wir brauchen in handlichen Variablen. Wir haben den Bildtitel, die URL zum direkten Großbild und die URL zur Flickr-Seite.

Was fehlt also noch? Erstmal müssen wir den Hyperlinks noch die typische Klasse thickbox mit auf den Weg geben, was wir hier über $(this).parent().addClass('thickbox') vornehmen. Wir nehmen uns also das Elternelement (parent) des Bildes, was immer Link ist und verpassen diesem über addClass die Klasse thickbox. Danach überschreiben wir die URL des Links (href) mit der Variable newurl, also dem Links zum Direktbild.

Damit die Thickbox die Reihe an Bildern jedoch auch direkt als Galerie darstellt, gebe ich dem Link über attr('rel','myflickr') noch noch ein rel="myflickr" hinzu, womit die Thickbox alle Bilder als Gruppe ansieht.

Ok, fast fertig. Was jetzt noch fehlt ist der richtige Titel, der in der Thickbox dargestellt werden soll. Wir haben ja noch den Bildtitel aus dem Alt-Atribut, als auch den Link zur richtigen Flickr-Seite im Gepäck. Über

attr('title',''+realtitle+' [<a href="'+realurl+'">Flickr</a>]')

hängen wir dem Link also in etwa folgendes an:

title="Meine Bildbeschreibung [<a href="/link/zur/flickr/seite">Flickr</a>]"

Damit sehen nun alle Besucher die eigenen Flickr-Bilder in einer schönen Thickbox, ohne Umwege auf die Flickr-Homepage. Wer natürlich Kommentieren will kann in der Thickbox immernoch auf den erscheinenden Link klicken.

Ich hoffe der Beitrag war verständlich, der letzte liegt ja schon einige Zeit zurück und man kommt leicht aus der Übung :) Für Verbesserungsvorschläge des Codes bin ich natürlich jederzeit offen. Weiß zudem jemand ob Flickr es vielleicht nicht gerne sieht wenn man die Bilder hotlinked? Dazu wäre eine Info vielleicht auch ganz gut.

Achso: Beachtet werden sollte, dass das Mini-Script natürlich vor dem eigentlichen Thickbox-Script eingebunden werden muss, andernfalls reagiert die Thickbox nicht mehr auf unsere Manipulation. Die passende Demo findet ihr rechts neben dem Artikel :)



Kommentare zum Thema Flickr Badges mit jQuery und Thickbox aufpeppen:

1 | Carsten schrieb am 21.12.2007 um 12:02
Gravatar dieses Kommentators

Sowas ähnliches haben der Pixler und ich auch vor kurzem gebaut, allerdings kommen die Bilder auch ohne JS, wenn die Lightbox dann auch nicht mehr funktioniert.

2 | derpixler schrieb am 07.02.2008 um 08:31
Gravatar dieses Kommentators

Auch ein guter ansatz aber wie Carsten schon sagt brauch man zwingend JS. Bei meiner PHP variante wird direkt auf die Flickr API zu geriffen und die darstellung der Bilder dann auch über die ligtbox gemacht. Ich hab mir das mal zusammengebastel weil mich gestört hat das es bei Flickr keine gesamt übersicht gibt.

3 | Christian schrieb am 07.02.2008 um 09:58
Gravatar dieses Kommentators

Jepp macht auch Sinn und ich werd mich wohl demnächst mal daran zu schaffen machen ein passendes Plugin für TXP zu schreiben… hier ist ja einzig und allein das Ziel eine geringe Anzahl an Bildern zu veröffentlichen, keine kompletten Galerien oder so, zudem dürfte die Parsingtime wohl ziemlich in die Brüche gehen sofern das Ergebnis nicht gecached werden würde…

4 | Patrick schrieb am 16.02.2008 um 14:55
Gravatar dieses Kommentators

Danke fuer diesen tollen Artikel, hab das gerade gleich mal in meinen Tumbleblog eingebaut an dem ich gerade rumschraube.

Kommentar-Feed für diesen Artikel


Kommentarfunktion für diesen Artikel geschlossen.



Blogsuche

RSS-Feeds

Plaste & Plastik

plasteundplastik.de - Das Geocaching-Weblog

Die Kategorien


Netz-Fundstücke


Meta / Propaganda