Effekt für Seitenübergänge in Joomla

In diesem Joomla HowTo

möchten wir einen AJAX-Effekt für Seitenübergänge in Joomla einfügen.

Ziel ist es, dass die Elegante Seiten nicht mehr regulär mit Ladebalken beim Klicken geladen werden, sondern realisieren mit einem AJAX-Übergang optisch ansprechend geslidet werden.Als erstes laden wir uns das Plugin „Add FullAjax“ herunter. Anschließend installieren wir es in Joomla über den Menüpunkt „Erweiterungen“ des Joomla Backends. Nach der Installation geht es an das Konfigurieren.Zuerst müssen wir die index.php des verwendeten Site-Templates zum Bearbeiten öffnen. Vor der Einbindung der Message- und Component-Bereiche der Seite muss eine neue Div-Zeile mit der ID „forajax“ (oder wie wir es in den Plugin-Einstellungen unter „Content CSS ID“ eingestellt haben) eingefügt und nach diesen Zeilen beendet werden. Im Normalfall sieht das wie folgt aus.Aus…

  <jdoc:include type="message" />  <jdoc:include type="component" />

…wird…

<div id="forajax">  <jdoc:include type="message" />  <jdoc:include type="component" /></div>

Nun haben wir, wenn wir das Plugin freigegeben und die Templateänderungen gespeichert haben, schon die Übergänge der Seiten. Falls jedoch Module an verschiedenen Positionen eingebunden werden müssen diese anders eingearbeitet werden, da Add FullAjax in dieser Konfiguration lediglich den Inhalt des Menüpunkts lädt. Um die Menüpunkte zu migrieren, müssen wir Profi nun erneut unsere index.php des Templates ändern und die Einbindung per <jdoc:include…>-Befehl vorher und nachher erneut mit Div-Zeilen editieren und bei „Enable Positions“ auf „semi-automatically“ setzen. Hierbei müssen die Div-Zeilen individuelle, einzigartige IDs haben.BeispielAus…

	<jdoc:include type="modules" name="breadcrumbs" />	<jdoc:include type="modules" name="user1" />

… wird…

<div id="brotkruemmel">	<jdoc:include type="modules" name="breadcrumbs" /></div><div id="usereins">	<jdoc:include type="modules" name="user1" /></div>

Die IDs „brotkruemmel“ und „usereins“ haben wir uns einfach ausgedacht. Diese können variabel verändert werden. Nach dem Speichern müssen wir in der Pluginkonfiguration von Add Fullajax jedoch noch die Positionsparameter übersetzen. So müssen wir das Feld „Position parameters“ nach folgendem Muster ändern:

Original-Modulname:ID-Name in der Divzeile|Original-Modulname:ID-Name in der Divzeile

Nach unserem Beispiel müsste es dann wie folgt aussehen:

breadcrumbs:brotkruemmel|user1:usereins

Nach dem Speichern müsste nun alles funktionieren und ihr habt optisch ansprechende AJAX-Übergänge.

Wenn Sie mehr über CMS Systeme lesen möchten, klicken Sie hier!