Aufhübschung von Referenzenseiten mit Javascript-Galerie und Tooltipp-Bildvorschau

Referenzenlisten können ziemlich dröge sein. Oft bleibt es bei einer Liste von Namen, weil man keinen Patchworkteppich von Bildern abliefern will. Was aber, wenn man einfach einen Haufen extem toller Bilder auf Lager hat?

Warum nicht dezente Kameraicons hinter die Referenzen setzen, die bei Mouseover durch ein Vorschaubild-Tooltip zum Aufklicken eines kleinen Galerierundgangs einladen! Das Tooltip-Skript wie der Niederländer Yann Lorber es für ein Projekt einsetzte in Kombination mit Fancybox 1.3.4 do the trick.

Vorsicht, beide Skripte sind schon etwas “betagt” und zumindest das Tooltip-Skript hat eine Eigenheit: es mag nur mit jQuery 1.3.4 zusammenarbeiten, bei höheren Versionen versagt es den Gehorsam. Außerdem möchte es erst als letztes vor dem Schließen des Bodytags aufgerufen werden, seine CSS aber noch im Head, in jedem Fall VOR dem Skript bekommen. Außerdem können die einfachen Anführungsstriche des Originalskripts problematisch sein. Wenn das Skript so gar nicht funktioniert hat es geholfen, sie durch

\"

zu ersetzen.

Der Reihe nach

Das hier kommt in den HEAD:

Das als letztes vor dem Schließen des BODY

Das hier ist die Tooltipp-CSS, ich nenne sie tooltips.css:

Das ist das Tooltipp-Skript tooltip.js:

Im HTML-Kontext sieht die Anwendung dann so aus (Beispiel):

Die Class „screen­shot“ sagt hallo zum Tooltipp-Script, das sich aus der „id“ das im Tool­tipp anzu­zei­gende Bild holt. Die Klasse „fan­cy­box“ ruft die Fan­cy­box ins Standby, die das Bild beim Klick aufs Kamer­ai­con öffnet. Aus dem „title“ holt sich Fan­cy­box die Bild­un­ter­schrift. Das Attri­but „rel“ sagt Fan­cy­box, dass es sich um ein Bild einer Reihe han­delt, die spä­ter in der Fan­cy­box auch der Reihe nach, also ohne das Bild wie­der schlie­ßen und das nächste öffnen zu müs­sen, ange­schaut wer­den kön­nen. Mit meh­re­ren „rel“-Namen kön­nen auch inner­halb ein– und der­sel­ben HTML-Seite meh­rere Rei­hen erstellt wer­den, ohne „rel“-Attribut bleibt das ent­spre­chende Bild ein Soli­tär. Ah ja, für das lus­tige Kamera-Icon, des­sen mou­se­overn den Tootipp-Effekt abfeu­ert habe ich in CSS so geschrieben:

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.