Für ein neues Typo3 Projekt wollte der Kunde unbedingt einen ganz speziellen Scrollbalken für einzelne Bereiche seiner Webseite. Für den Hauptbereich sollte er sogar auf der linken Seite sein.
Nach längerem Suchen habe ich mich entschlossen die JavaScript Klassen von jQuery einzusetzen mit der Klasse JScrollPane. Das ging auch überraschend gut. Läßt sich gut anpassen, läuft in allen Browsern und hat sogar eine coole ScrollTo Funktion.
Jetzt kam aber der Hammer. Es sollte unbedingt eine ganz bestimmte Bilder Gallerie eingebaut werden. Wir hatten sie schon mal realisiert für das Vorgängerprojekt, aber die war mit Moo Tools – das Konnte einfach nicht funktionieren zusammen mit jQuery! Ich habe also alle möglichen jQuery Gallerien mir angesehen, aber keine entsprach den Vorstellungen. Also wie diese beiden unterschiedlichen JavaScript Klassen in einem Projekt vereinigen?
Meine erste Lösung war quick and dirty. Ich habe über das Typo3 Backend für die Seite mit der Bilder Gallerie einfach das Laden der jQuery Skripte unterbunden. Auf der Seite gibt es dann halt einfach keine Schkrollbalge. Vielleicht merkt der Kunde es ja nicht, weil er doch so in seine Gallerie verliebt ist. Pustekuche! Er hat es doch bemerkt und es muss eine andere Lösung her.
Dann bin ich im Internet auf eine coole Funktion für jQuery gestossen. ‚jQuery.noConflict()‚ Hat sich schon sehr gut angehört! Ließ sich dann auch ganz simple integrieren.
Vor dem Aufruf der jQuery Funktionen, bei mir also in vor der document.ready() Funktion einfach ein Variable definieren:
var j = jQuery.noConflict();
Das ersetzt das bekannt $ Zeichen mit j. Das heißt ich rufe nicht mehr $(document).ready(function() … },
sonder jetzt als: j(document).ready(function() … }!
Somit gab es keinen Konflikt mehr mit Moo Tools, die sinnigerweise auch das $ Zeichen verwenden.
Das gleiche funktioniert natürlich auch in anderen CMS und mit statischen Webseiten.
Keine Kommentare