Nachdem ich mittlerweile alle Typolight Contao Core-Inhaltselemente / Module durch habe, bin ich derzeit verstärkt auf Entdeckungstour im Typolight Contao Extension Repository unterwegs. Spannende Geschichte, denn seit ich begonnen habe mit dem System zu arbeiten, sind etliche Erweiterungen hinzugekommen und man kommt gar nicht so schnell hinterher wie neue Features hochgeladen werden.
Während noch vor 3-4 Jahren die Verwendung von Javascript auf Webseiten einer Todsünde gleich kam, findet man heute kaum noch Seiten wo nicht das eine oder andere eingesetzt ist, sei es ein hübscher Content-Slider, eine tabbed Navigation oder auch nur eine Lightbox. Möglich gemacht haben das mehrere Javascript-Bibliotheken, von denen hauptsächlich zwei inzwischen sehr populär geworden sind: Mootools und JQuery.
Beide können – mal auf die eine und mal auf die andere Art – mit ähnlichen Anwendungen aufwarten, da ich jedoch mit JQuery immer ein bisschen besser zurechtgekommen bin als mit Mootools, hatte ich bisher damit ein bisschen mehr Erfahrung und auch schon einige Testcases damit gebaut. Es ist nun kein Problem JQuery in Typolight Contao einzubinden, von Haus aus setzt das System jedoch auf Mootools und da inzwischen auch viele Erweiterungen auf Mootools basierend verfügbar sind, habe ich begonnen mit auch mit diesem Javascript-Framework anzufreunden.
Mein liebstes Spielzeug: der Contentslider.
Alle, die Powerpoint lieben, werden auch den Content-Slider lieben, denn letztendlich macht er nichts anderes. Inhalte werden in kleinen Päckchen auf einen „Slide“ gelegt und per Klick oder auch automatisch von oben, rechts, links oder auch von unten in ein Fenster „geslidet“. Und das ist noch nicht alles, denn es stehen auch für die „Folienübergänge“ Effekte zur Verfügung (Transitions) die man aber tunlichst sparsam einsetzen sollte.
In Typolight Contao steht ein solcher Contentslider im Extension-Repository zur Verfügung.
Erweiterung Contentslider im Erweiterungskatalog besuchen
Mein Dank für dieses schöne Feature geht an:
den Urheber: Stefan Gandlau und den Autor: Stefan Preiss
Interessante Diskussionen im Forum dazu:
http://www.typolight-community.de/showthread.php?849-ContentSlider-Problem
http://www.typolight-community.de/… /work&highlight=contentslider
Anwendungsbeispiel
Screenshot:
» Anwendungsgbeispiel in Aktion auf jukemedia.de ansehen
Einbauhinweise
Unter Seitenleiste links => Erweiterungskatalog in das Extension Repository gehen und die Erweiterung zunächst einmal installieren.
Danach stehen als Inhaltselement eines Artikels zwei neue Typen zur Verfügung:
- Content Slider Begin
- Content Slider End
Dort wo die Slides anfangen sollen, wird zunächst das Inhaltselement „Content Slider Begin“ gesetzt. Folgende Einstellungen wurden in dieser Installation verwendet:
Breite: 540
Höhe: 300
Transition: linear
TransitionEase: easeInOut
Übergangsdauer: 1500
Nun die Inhaltselemente wie gewohnt z.B. als Textelement mit Bild anlegen und im Feld für die CSS-Kalsse das Wort „slideElem“ einfügen. Jedes Inhaltselement ergibt einen (1) Slide. Zum Abschluss das Inhaltselement „Content Slider End“ setzen.
Nun ist wichtig zu wissen, dass man noch ein paar CSS-Anweisungen benötigt, damit das Ganze funktioniert. In meinem Anwendungsbeispiel sieht das z.B. so aus:
#slideWrapper,#innerslideWrapper,#innerSlideWrapper div.slideElem {
width:540px;
height:300px;
}
#slideWrapper {overflow:hidden;
background:#f4f4f4 url("dateien/contentslider/bg-contentslider.jpg") left top no-repeat;
}
#slideWrapper h3 {
margin-bottom:20px;
padding-left:65px;
border:none;
}
#innerSlideWrapper{
background-color:#f4f4f4;
}
#innerSlideWrapper div.slideElem{
float:left;
}
#innerSlideWrapper div.slideElem p,#innerSlideWrapper div.slideElem h3,#innerSlideWrapper div.slideElem img{
margin-right:65px;
margin-left:65px;
}
#innerSlideWrapper div.slideElem p {
font-size:11px;
line-height:140%;
text-align: justify;
}
#innerSlideWrapper div.slideElem img {
margin-right:0;
}
#goForward {
position:relative;
margin-top:-250px;
margin-right:7px;
margin-bottom:0;
cursor:pointer;
}
#goBack {
margin:-250px 0 0 -2px;
cursor:pointer;}
#goBack img,#goForward img {
border:none;
}
Wichtig zu wissen:
Das CSS kann nicht 1:1 übernommen werden, da es sich auf mein Beispiel bezieht. Angegeben werden müssen jedoch Breite und Höhe von
#slideWrapper,
#innerSlideWrapper,
#innerSlideWrapper div.slideElem und die Eigenschaft float:left; für div.slideElem
Die Angaben zur Breite und Höhe von #slideWrapper,#innerslideWrapper,#innerSlideWrapper müssen exakt die gleichen Zahlen sein, wie man sie auch im Inhaltselement Content Slider Begin eingetragen hat.
Nicht vergessen darf auch bei den Inhaltselementen des Artikel bei CSS die Klasse slideElem einzutragen.
Und slideElem muss nach links floaten, sonst funktioniert es beim linearen Weiterschieben nicht.
Wenn man, so wie im Beispiel zu sehen, die Tasten zum Weiterschalten links und rechts anlegen möchte, muss man den Elementen p, img (also alles was im Slide liegt) einen entsprechenden Abstand zuweisen. Alles andere funktioniert nicht, weil der Slide (so kenne ich es jedenfalls von jQuery) in Wirklichkeit dreimal so lang ist wie ein Slide. (Anzahl der Slides x Breite)
Inzwischen habe ich Typolight Contao auf jukemedia einige Zeit im Gebrauch und die Installation hat via Live-update-ID schon ein paar updates hinter sich. Beim Versionssprung auf 2.8. hat sich jedoch einiges getan und nachdem ich gestern auf 2.8.3. upgedatet hatte, wollte es zunächst mit dem Content-Slider im IE7 und IE8 nicht funktionieren.
Der Grund: ich habe auf jukemedia für die fe_page ein angepasstes Template verwendet und wie man wissen sollte: individuell angelegte Templates werden bei einem upddate nicht überschrieben. Da jedoch gerade in Bezug auf die mootools mit dem update neue Dateien installiert wurden, griff meine Version immer noch auf die alten Dateien zu – die Verlinkung im head war ja unverändert. Und in den alten mootools Dateien war noch ein Bug. Durch das händische Austauschen des headers und damit der richtigen Verknüpfung zu den neueren mootools Dateien, konnte der Fehler jedoch schnell behoben werden.