20 Okt 2009 jQuery-Spielkram in YL104
Wie bereits angedeutet habe ich im neuen Template die Javascript-Bibliothek jQuery eingebunden, um ein paar kleine Spielerei und Effekte einbauen zu können. Obschon man heutzutage wohl davon ausgehen kann, dass in den meisten Browsern JS aktiv ist, sind diese Teile komplett so angelegt, dass das Template auch ohne diese Funktionalitäten „benutzbar“ bleibt – jQuery ist quasi der „Zuckerguß“.
Effekte
Da wäre zum einen die kleine Infobox im Kopfbereich, welche mit einem Fade-In-Effekt dargestellt wird, wenn man mit der Maus über das Logo fährt. Analog wird die Infobox übrigens dargestellt, wenn der Link um das Logo per Tastatur fokussiert wird.
Ähnliches gilt für die Hinweise zum Kommentieren, welche nun erst eingeblendet werden, wenn man den Link im Text „Bitte die Hinweise beachten.“ über dem Kommentarformular klickt. Beides sind Informationen, die eigentlich niemand zweimal liest, daher sind sie prädestiniert für solche show/hide-Effekte.
Statt Lightbox
Diesen Effekt wollte ich zunächst gar nicht integrieren, musste aber dann feststellen, dass sich das Lightbox-Plugin für s9y offenbar nicht mit der eingebundenen jQuery-Bibliothek verträgt. Kein Problem, denn natürlich gibt es Lightbox-Klone in jQuery.
Die größere Ansicht des Bildes links wird nun über Fancybox angezeigt – nicht über das Lightbox-Plugin, der Code für Fancybox ist in dieses Template integriert.
Darüber hinaus habe ich noch ein paar Codekorrekturen (man nennt das „DOM-Manipulation“) mittels jQuery vorgenommen, die ich mir jedoch für einen seperaten Eintrag aufheben möchte, zumal es dort noch weitere Änderungen geben könnte und die bereits eingebauten etwas umfangreichere Erklärungen benötigen.
Dein Template ist wirklich schön!
Die Hinweise so zu verstecken find ich gut. Ich bin ja einen ähnlichen Weg gegangen, indem ich statt der Hinweise die Buttons in das Editierfenster eingefügt habe. Auch das hatte das Ziel, die Hinweise nicht so sichtbar zu haben (ich habe sie dann halt ganz ausgeblendet).