< Anschauungsmaterial | Pimp my Wortfilter >

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.

Stadtpark

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.

1 Trackback

Trackback-URL

  1. YellowLeds Weblog: s9y mit jQuery zurechtbiegen (02.11.09, 11:10)

2 Kommentare

RSS Feed (Kommentare) für diesen Eintrag

  1. * xida (20.10.09, 19:59):

    Dein Template ist wirklich schön!

  2. * onli (22.10.09, 16:58):

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

Kommentar schreiben

Bitte die Hinweise beachten.

Hinweise

Textile-Formatierung erlaubt
Die angegebene E-Mail-Adresse wird nicht dargestellt, sondern nur für eventuelle Benachrichtigungen verwendet.
Gravatar, Twitter, Identica, Favatar Autoren Bilder werden unterstützt.

Pflichtfelder sind mit * markiert.

Kommentare, die mindestens einen Link enthalten, werden moderiert. Kommentare, die mindestens 3 Links enthalten, werden abgewiesen. Sorry – Spamschutz.

Bei Emoticons, die mitten in Sätzen stehen, möglichst keine Nasen einsetzen [ :), ;) usw. ], da es ansonsten im Zusammenspiel mit Textile zu Merkwürdigkeiten kommen kann.