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.
Wie evtl. einige schon mitbekommen haben, nutze ich seit der neuen Hackthenet-Version eine Art Lightbox, welche jedoch auf den Namen Thickbox hört und einige tolle Vorteile mit sich bringt.
Zum einen wäre da, das die Thickbox “nur” 31Kb wiegt. Die Thickbox basiert zudem nicht auf den JS-Frameworks Scriptacolous oder Prototype sondern auf dem immer beliebteren jQuery. Da wäre also schon der zweite Vorteil. jQuery bringt viele gute und tolle Effekte mit sich, welche in der 31KB-Variante der Thickbox also bereits integriert wären. Wer eine kleine Kostprobe will, der möge einfach auf das Artikelbild klicken :)
Die Thickbox bietet jedoch noch andere Vorteile:
Zum einen werden Bilder automatisch der Browsergröße angepasst, kommt also jemand mit einer 800×600 Auflösung daher bleibt ihm das Scrollen erspart, das Bild wird automatisch proportional herunter gerechnet. Das ganze wird dann zwar etwas pixelig, jedoch ist diese Methode ja auch nur für die Ausnahme bestimmt.
Ein weiterer Vorteil ist, das die Thickbox nicht nur mit allen möglichen Bildformaten umzugehen weis, nein, jeglicher Browserinhalt kann mit Ihr hervorgehoben werden, sei es ein JPG, PNG oder auch ein PDF. Worauf ich jedoch hinaus will, ist die Möglichkeit von AJAX abrufen, also auch der Nutzung von HTML innerhalb der Thickbox, so ist es z.B. möglich ein schickes Loginformular bei einem Klick einfaden zu lassen, wirklich etwas sehr nützliches und innovatives.
Auch eine Galerieunterstützung (also das Vor und Zurückklicken innerhalb einer Bildershow) ist kein Problem.
Einzig Abstriche beim Effekt muss man evtl. tätigen, so klappt sich die Bühne nicht wie bei der Lightbox auseinander, sondern wird “nur” durch eine schöne Ladeanimation angekündigt und dann eingefadet.
Und noch ein Tpp:
Wer übrigens wirklich nur mal eben ein Bild schön einbinden möchte, dabei die 100KB der Lightbox scheut und die tollen Dinge der Thickbox nicht benötigt, der sollte auf die Slimbox zurückgreifen.
Sie arbeitet mit dem Mootools-Framework und ist Alles in Allem nur 21Kb “fett”. Die Slimbox unterscheidet sich im Effekt und der Anwendung dabei in keinster Weise zur Lightbox 2.0.
