Bilder bewegen, drehen, austauschen oder verschwinden lassen, all das wird sehr häufig mit JavaScript bzw. mit entsprechenden Frameworks wie Mootools oder jQuery realisiert. Oft genug erzeugt das Konflikte und dann funktioniert nichts mehr. Eine gute Lösung könnte die konsequente Verwendung von CSS3 sein, wie uns ein persischer Entwickler vormacht.
JoominaCss3 Joomla Modul!
Das Modul JoominaCss3 kommt offensichtlich aus dem Iran. Natürlich kommen auch aus dieser Region sehr gute Ideen. Spätestens seit CSS3 ist man für Bildeffekte auf Webseiten nicht mehr nur auf JavaScript und diverse Frameworks angewiesen.
Der Beweis ist das Modul JoominaCss3, welches der Entwickler als Multitasking-Modul bezeichnet.
Die Extension verwendet also Cascading Style Sheets der dritten Generation, um Bilder aller Art mit Effekten zu versehen. Auf jQuery und ähnliche Frameworks wird bewusst verzichtet.
Es ist einfach, benutzerfreundlich und erfüllt voll und ganz seinen Zweck, meint der Entwickler. Nach einem Test können wir das unterschreiben.
Leider ist die Erweiterung nur für Joomla 2.5 erhältlich. Dies ist allerdings momentan auch die einzige wirklich stabile und anzuratende Version von Joomla. Manch ein Anwender wird hier vielleicht eine andere Meinung haben, was auch in Ordnung ist.
Zurück zu dem Modul! Nach dem Download haben wir alle Dateien geprüft. Da ist wirklich alles in Ordnung und auch kein Virus oder ähnliches enthalten. Nur der Link auf ein Produkt-Bild im Backend führt zu einem Fehler, was wohl an einem zu langen bzw. fehlerhaften externen Link auf das Bild liegt. Der Funktionalität tut dies aber keinen Abbruch.
Dem Modul wurden zwei Sprachdateien mitgegeben. Die iranischen bzw. arabischen Schriftzeichen sich anzuschauen ist wirklich interessant. Aber beim Anschauen bleibt es dann für die meisten von uns sicher auch. Toll wenn man das lesen kann.
Aber die Extension beinhaltet auch eine englische Beschreibung, welche sicher auch von allen deutschen Anwendern verstanden wird. Das Modul ist nicht sonderlich kompliziert und tut einfach, was der Entwickler angekündigt hat.
Nach der Installation muss zwingend das Zip-Paket entpackt werden. Dann findet sich ein Ordner "extensions" und ein Ordner "images".
Für die Installation ist nur der erste Ordner relevant. Die Bilder aus dem images-Ordner sollten wohl an anderer Stelle (Frontpage?) Verwendung finden.
So wird also die Datei "mod_joominacss3.zip" ganz üblich wie andere Erweiterungen auch, installiert.
Im Joomla-Backend unter Erweiterungen -> Module kann dann das Modul mit der Bezeichnung "JoominaCss3" geöffnet, konfiguriert und veröffentlicht werden.
Es werden fünf Optionsbereiche angeboten. In den Basisoptionen wird einfach die Art des Effektes über Radio-Buttons definiert. Das sind folgende Effekte:
- Bewegungseffekt
- Drehungseffekt
- Ausblendeffekt
- Überblendungseffekt
Anders als bei den meisten Modulen für Joomla wird gleich in den Basisoptionen die Angabe eines Modulklassensuffix angeboten. Dies ist in den meisten Fällen nicht notwendig. Informationen dazu sind übrigens hier im Tutorialbereich in der Kategorie Joomla zu finden.
Weit wichtiger ist hier natürlich, sich für den gewünschten Effekt zu entscheiden, welche bereits eben genannt wurden. In der englischen Bezeichnung im Modul sind dies dann:
- Movement Effect
- Rotate Effect
- Replacement Effect
- Text on Image
Für jeden dieser Effekte gibt es dann einen weiteren Optionsbereich. Hier bedarf es nicht vieler Erklärung. Speed, klar das ist die Geschwindigkeit für den Effekt. Offset definiert in Pixel inwieweit der Effekt sich auswirkt, also der Abstand der Bewegung.
Nach der Angabe des gewünschten Links, welcher durch Klick auf das Bild aufgerufen wird, folgt mit Direction die Ausrichtung der Bewegung. Schließlich gibt man noch den Pfad zum gewünschten Bild bzw. Foto an. Außerdem erscheint mit Überfahren der Maus auf den Text "Vorschau" ein Preview-Bild.
Bei den anderen Optionsbereichen ist es sehr ähnlich. Beim Rotate Effect kann noch der Wert in Grad für die Drehung angegeben werden.
Für den Replacement Effect, also den Ausblendeffekt, könnte man 2 Bilder als eine einzige Grafik abspeichern.
Zb. mit 300 Pixel Höhe. Dann könnte man hier die Image Height auf die Hälfte, also 150 Pixel angeben.
Das ist dann je nach eingetragenem Speed wie ein langsamer Hover-Effekt. Im Prinzip greift hier die CSS-Anweisung "background-position:xx px -xx px;" wobei x hier natürlich für einen beliebigen Wert steht und das Minus für Höhe oder Breite natürlich am richtigen Wert stehen muss.
Die meisten Definitionen verlangt, oder besser gesagt, bietet die Option "Text On Image". Es ist sicher überflüssig, das alles zu übersetzen und zu erklären.
Eine sehr interessante Erweiterung aus einer sehr interessanten Region also.
Das Ganze ist auch noch kostenlos. CSS3 funktioniert mit den alten Browser-Krücken natürlich nicht.
Aber diese Bedenken zerstreuen sich glücklicherweise auch immer mehr und man darf es wagen.
Hier geht es zum JoominaCss3 - Download. (Link funktioniert nicht mehr und wurde entfernt)
