[dk_caroufredsel] Integration des jQuery.carouFredSel-Sliders für Contao 3.x.x

[peter.morawski]

Hallo zusammen,

ich arbeite gerade an einem umfangreichen Upgrade der Erweiterung, deren Veröffentlichung jedoch noch ein paar Tage braucht. Jedenfalls sind mir dabei mittlerweile so viele Fehler aufgefallen, daß ich diese in einem neuen Build der aktuellen Version korrigiert habe:

- Padding wurde fehlerhaft erstellt
- Karussell-Typ 'einmal' hat nicht funktioniert
- JS-Template beim 'Pause'-Button war fehlerhaft
- JavaScript-Einbindung sollte nun in jedem Fall mit 'lokaler Quelle' funktionieren und nicht nur manchmal =)

Wenn euch noch weitere Sachen auffallen immer her damit. Die nächste Version bringt als Hauptbestandteil "carouFredSel everywhere" mit, d.h. ihr könnt den Slider dann sowohl als Content Element als auch Modul einsetzen. Ein News-Ticker Modul hab ich gleich mit eingebaut.

Grüße...
...Dirch

PS: schön, daß euch die Erweiterung gefällt - Danke

Hallo Dirch,

ich habe gerade deine Erweiterung installiert, um einen News-Ticker als Slider einzubinden. Dazu habe ich zwei Fragen/Probleme:

Problem: Wenn ich das Newsticker-Modul einbinde, funktioniert so weit alles super. Leider wird der Teasertext nicht angezeigt, wenn er länger ist, als das Inhaltselement - es wird ein overflow: hidden gemacht, ich hätte aber gerne, dass der Text in voller Länge angezeigt wird, also bei Ende des Elements abegschnitten und in der nächsten Zeile fortgeführt wird.

Darüber hinaus macht das Modul Probleme, wenn ich ihm eine feste Größe vergeben möchte. Wenn ich die Höhe mit angebe, werden keine Elemente mehr versteckt, sondern alle untereinander angezeigt.

Ist das ein Bug oder stelle ich da was falsch ein?


Zur Frage: Ist es möglich, das Vorschaubild der News einzubinden? Ich schätze, dafür muss ich einfach das entsprechende Template bearbeiten, richtig?

Vielen Dank im Voraus,


Grüße

Peter

[Dirch]

Hallo Dirch,

ich habe gerade deine Erweiterung installiert, um einen News-Ticker als Slider einzubinden. Dazu habe ich zwei Fragen/Probleme:

Problem: Wenn ich das Newsticker-Modul einbinde, funktioniert so weit alles super. Leider wird der Teasertext nicht angezeigt, wenn er länger ist, als das Inhaltselement - es wird ein overflow: hidden gemacht, ich hätte aber gerne, dass der Text in voller Länge angezeigt wird, also bei Ende des Elements abegschnitten und in der nächsten Zeile fortgeführt wird.

Darüber hinaus macht das Modul Probleme, wenn ich ihm eine feste Größe vergeben möchte. Wenn ich die Höhe mit angebe, werden keine Elemente mehr versteckt, sondern alle untereinander angezeigt.

Ist das ein Bug oder stelle ich da was falsch ein?


Zur Frage: Ist es möglich, das Vorschaubild der News einzubinden? Ich schätze, dafür muss ich einfach das entsprechende Template bearbeiten, richtig?

Hallo Peter,

stell doch mal bei der Element- oder Karussell-Höhe den Wert auf "variabel" ein. Dann wächst und schrumpft der Slider entsprechend des Platzbedarfs des Inhalts.

Wenn alle Elemente untereinander erscheinen dann kann es sein, daß es einen Javascript-Fehler gibt, der nicht auftreten sollte. Kann ich mir das mal online anschauen? Oder kannst du mal mit einem Tool nachschauen welcher Fehler auftritt bzw. mir den Quelltext ausschnitt des Javascripts hier reinschreiben mit welchem der Aufruf gestartet wird?

Der Newsticker basiert auf dem Contao-Modul "Nachrichtenliste". Da dieses Modul nur die Teaser-Texte zu den Nachrichten ausgibt, kann man hier kein Bild einbinden. Dazu wäre ein zusätzliches Modul notwendig, das dann auf einem anderen Nachrichten-Modul aufsetzt oder eine Erweiterung des vorhandenen. Im Template allein reicht eine Änderung nicht, weil an keiner Stelle ein Bild eingebunden wird.

Viele Grüße...
...Dirk

[peter.morawski]

Hallo Peter,

stell doch mal bei der Element- oder Karussell-Höhe den Wert auf "variabel" ein. Dann wächst und schrumpft der Slider entsprechend des Platzbedarfs des Inhalts.

Wenn alle Elemente untereinander erscheinen dann kann es sein, daß es einen Javascript-Fehler gibt, der nicht auftreten sollte. Kann ich mir das mal online anschauen? Oder kannst du mal mit einem Tool nachschauen welcher Fehler auftritt bzw. mir den Quelltext ausschnitt des Javascripts hier reinschreiben mit welchem der Aufruf gestartet wird?

Der Newsticker basiert auf dem Contao-Modul "Nachrichtenliste". Da dieses Modul nur die Teaser-Texte zu den Nachrichten ausgibt, kann man hier kein Bild einbinden. Dazu wäre ein zusätzliches Modul notwendig, das dann auf einem anderen Nachrichten-Modul aufsetzt oder eine Erweiterung des vorhandenen. Im Template allein reicht eine Änderung nicht, weil an keiner Stelle ein Bild eingebunden wird.

Viele Grüße...
...Dirk

Hallo Dirk,

die Karrussell-Größe ist auf variabel eingestellt, die Größe habe ich per CSS definiert; da ich eine feste Größe für den entsprechenden Block brauche. Es will einfach nicht klappen, wo ich die Breite auch einstelle.

Das mit dem Untereinander anzeigen war ein CSS-Fehler meinerseits.

Das Bild anzuzeigen klapp, ich habe die Zeilen aus dem standard Newsticker-Template in dein Erweiterungstemplate kopiert!

Leider habe ich die Website aktuell nur lokal laufen.


Grüße

Peter


EDIT: Ich habe mal einen Screenshot hinzugefügt. Durch die variable Breite nimmt der Block scheinbar die Gesamtlänge des Teaser-Textes als Referenz und macht es in ein Inline-Style - dadurch kann man das auch nicht mehr per CSS überschreiben

[Dirch]

Hallo Dirk,

die Karrussell-Größe ist auf variabel eingestellt, die Größe habe ich per CSS definiert; da ich eine feste Größe für den entsprechenden Block brauche. Es will einfach nicht klappen, wo ich die Breite auch einstelle.

Das mit dem Untereinander anzeigen war ein CSS-Fehler meinerseits.

Das Bild anzuzeigen klapp, ich habe die Zeilen aus dem standard Newsticker-Template in dein Erweiterungstemplate kopiert!

Leider habe ich die Website aktuell nur lokal laufen.


Grüße

Peter

Ah das ist gut zu wissen mit dem Bild. Hab schon länger nicht mehr in die News-Klassen geschaut. Dann ist das bildspezifische wohl in der Elternklasse definiert. Fein. =)

Hmm wegen der Größen kann ich dir leider nicht helfen. So richtig verstanden habe ich noch nicht, wie sich der Ticker im Detail verhalten soll. Bei so etwas wäre etwas visuelles hilfreich. Der overflow:hidden auf dem Wrapper ist wichtig, damit man nur das aktuelle Element gezeigt bekommt. Eigentlich kann man über die Größen des Karussells und der Elemente eigentlich alles einstellen wie man es brauchen müßte und benutzt CSS Größen dann, um den gesamten Slider-Container als solches zu beschränken. Sobald man ihn aber beschränkt wird er dort nicht darüber hinauswachsen.

Jetzt fällt mir spontan beim Schreiben auf, dass es noch einen weiteren overflow:hidden gibt, der auf #caroufredsel_skin sitzt. den kannst du entfernen wenn du willst. Einfach im CSS-Template rausschmeissen. Vielleicht ist dieser die Lösung dann...

[Dirch]

EDIT: Ich habe mal einen Screenshot hinzugefügt. Durch die variable Breite nimmt der Block scheinbar die Gesamtlänge des Teaser-Textes als Referenz und macht es in ein Inline-Style - dadurch kann man das auch nicht mehr per CSS überschreiben

Nein. Ich glaube du sitzt hier einem Missverständnis auf. Dich als Anwender sollte "caroufredsel" und "caroufredsel_wrapper" auf keinen Fall interessieren. Auf diese dürfen auch keine CSS-Stile gesetzt werden. "caroufredsel" ist der container für den gesamten Inhalt - dieser ist in deinem Fall so breit. Der "caroufredsel_wrapper" sorgt wiederum dafür, daß dann nur die aktuell sichtbare(n) Element(e) dargestellt werden und versteckt den Rest (overflow:hidden). Also KEINE Formatierungen auf diesen Elementen bitte, sonst geht gar nichts mehr. =) Du kannst den Gesamt-Container dann auf "caroufredsel_skin" oder darüber mit CSS beschränken/formatieren. Die beiden Erstgenannten werden alle vom JavaScript gesetzt/benutzt/angepasst.

[StR]

Hallo zusammen,

ich habe auch noch mal eine Anmerkung in Verbindung mit der Colorbox.
Und zwar nutze ich die Colorbox um Bilder innerhalb des caroufredsel Sliders zu vergrößern.
Problematisch an der Geschichte ist nur, dass nach dem Schließen der Colorbox der Slider nicht mehr
an der Stelle sitzt, an der er vorher war (stark nach rechts versetzt) und auch Übergänge (Animationen) nicht mehr richtig funktionieren.
Kann das jemand bestätigen oder vielleicht sogar eine Lösung?

muchas gracias

[Dirch]

Problematisch an der Geschichte ist nur, dass nach dem Schließen der Colorbox der Slider nicht mehr
an der Stelle sitzt, an der er vorher war (stark nach rechts versetzt) und auch Übergänge (Animationen) nicht mehr richtig funktionieren.
Kann das jemand bestätigen oder vielleicht sogar eine Lösung?

Hmm ist mir noch nie aufgefallen. Hast du einen Link wo ich das nachvollziehbarer Weise beobachten kann? Die beiden Scripts sind komplett unabhängig voneinander und sollten sich daher auch nicht beeinflussen.

Viele Grüße...
...Dirk

[Berliner]

Hallo liebe Forengemeinde,

habe ja nun schon mehrfach in anderen Threads meine Anerkennung für diesen Slider bekannt gegeben und möchte jetzt hier nicht noch einmal damit aufwarten .

Ich habe folgendes auf dem Herzen:

Beim Slider wird mir der rechte Textrand abgeschnitten - d.h., der Text wird zwar umgebrochen, aber die letzten Zeichen einer Zeile weggeschnitten.

Muss ich, so wie ich es im Firebug gesehen habe, die ce_caroufredsel_start und ce_caroufredsel block in der basic.css bzw. default.css manuell eintragen und entsprechen formatieren oder liege ich, was den "Container" betrifft, völlig falsch?
Irgendwie erkennt jeder hier mehr in FireBug, als ich.. *grummel*

Der andere Denkansatz wäre, dass die entsprechenden Größen der "Artikel" über JS oder php (und hier bin ich totaler Newbee) automatisch übergeben werden und ich also nichts dagegen tun?
Ich hatte das dargestellte Problem - wenn auch noch mit anderen "Macken", schon im Contao-eigenen Slider... *grummel*

Wäre super, wenn jemand eine Denkansatz für mein Problem hat - zum reinschauen: Hier

Danke schon im Voraus und beste Grüße, Berliner

[Berliner]

ich hab nun mal in den "Datensatz-Einstellungen" gespielt - Derzeit ist das Ergebnis das, was ich mir so vorstelle... Ohne Abschneiden der Zeichen auf der rechten Seite.
Allerdings verwundert mich die Breiten-Angabe bei der Elemente-Breite - zu sehen im angehängten Screenshot...

Fehlt mir da irgendwie ein Denk-Zusammenhang? 100px ? eigentlich wollte ich auf 100 % schalten...

Beste Grüße, Berliner

[Dirch]

Fehlt mir da irgendwie ein Denk-Zusammenhang? 100px ? eigentlich wollte ich auf 100 % schalten...

Hallo hallo,

japs, lies dir mal die Feldbeschreibungen (über das Fragezeichen-Symbol) durch. Da wird erklärt mit welcher Einstellung man was einstellen kann. Was du brauchst ist "flüssig". Da kannst du % Werte eingeben. flüssig = die Größe darf "fließen". fest = die Größe bleibt immer auf diesem Wert.

Der Slider braucht je nach Erfahrung eine Weile bis man richtig mit ihm warm geworden ist, aber wenn man erstmal durch die Komplexität der Möglichkeiten durchgeblickt hat, kann man damit sehr sehr viel machen. =)

Viele Grüße...
...Dirk

[Berliner]

Hallo hallo,

japs, lies dir mal die Feldbeschreibungen (über das Fragezeichen-Symbol) durch. Da wird erklärt mit welcher Einstellung man was einstellen kann. Was du brauchst ist "flüssig". Da kannst du % Werte eingeben. flüssig = die Größe darf "fließen". fest = die Größe bleibt immer auf diesem Wert.

Der Slider braucht je nach Erfahrung eine Weile bis man richtig mit ihm warm geworden ist, aber wenn man erstmal durch die Komplexität der Möglichkeiten durchgeblickt hat, kann man damit sehr sehr viel machen. =)

Viele Grüße...
...Dirk

*an den Kopf hau*

Auje.. das war ein Eigentor -Danke für den Stubs

Beste Grüße, Berliner

[Luminanz]

Hallo zusammen

Ich habe festgestellt, dass Darstellungsprobleme auftreten, wenn die slidenden Elemente relativ positioniert werden.
In der aktuellen Version von Safari und auf einigen mobilen Browsern sliden die Elemente nicht mehr sauber oder rutschen hintereinander.
Zu beobachten ist dies beispielsweise in diesem Theme.

Ich gehe davon aus, dass es nicht an der Erweiterung liegt (habe den Slider auch schon direkt eingebunden). Aber vielleicht weiss ja jemand einen Weg, die Darstellungsprobleme per CSS zu beheben.
Damit die innenliegenden Elemente absolut positioniert werden können (Vor- und Rückseite der Karten) müssten die einzelnen Slides eigentlich schon relativ positioniert werden

Vielen Dank für eure Ratschläge
Gruss, Luminanz

[Dirch]

Hallo zusammen

Ich habe festgestellt, dass Darstellungsprobleme auftreten, wenn die slidenden Elemente relativ positioniert werden.
In der aktuellen Version von Safari und auf einigen mobilen Browsern sliden die Elemente nicht mehr sauber oder rutschen hintereinander.
Zu beobachten ist dies beispielsweise in diesem Theme.

Ich gehe davon aus, dass es nicht an der Erweiterung liegt (habe den Slider auch schon direkt eingebunden). Aber vielleicht weiss ja jemand einen Weg, die Darstellungsprobleme per CSS zu beheben.
Damit die innenliegenden Elemente absolut positioniert werden können (Vor- und Rückseite der Karten) müssten die einzelnen Slides eigentlich schon relativ positioniert werden

Vielen Dank für eure Ratschläge
Gruss, Luminanz

Hallo,

man MUSS die slidenden Elemente relativ positionieren. Wenn man sie absolut positioniert, dann ist es unmöglich für das Sript sie sliden zu lassen. Das ist aber technisch bedingt so und nicht auf den carouFredSel beschränkt. Man kann/darf den äußeren Container schon absolut positionieren, aber innerhalb ist dies nicht möglich. Was genau muß ich denn machen, um zu dem "Fehlverhalten" in Safari kommen? Mobile Browser sind je nach Version wohl recht eigensinnig, daher kann es in diesen Fällen auch an den Browsern liegen.

Viele Grüße...
...Dirk

[Luminanz]

Hallo Dirch

Danke für deine Rückmeldung.

man MUSS die slidenden Elemente relativ positionieren.

Diese Aussage erstaunt mich etwas Ich bin der Meinung, dass die slidenden Elemente auf static belassen werden können. Im Beispiel wird das img-tag ja auch nicht relativ positioniert. Dass die slideneden Elemente nicht absolut positioniert werden dürfen, ist natürlich schon klar

Was genau muß ich denn machen, um zu dem "Fehlverhalten" in Safari kommen?

Unter Safari 6.0.5 erhalte ich dieses Fehlverhalten, wenn das slidende Element relativ positioniert ist.

Hier wird das Problem übrigens auch beschrieben.

Vermutlich handelt es sich um einen Fehler in Safari

Gruss, Luminanz

[Dirch]

Diese Aussage erstaunt mich etwas Ich bin der Meinung, dass die slidenden Elemente auf static belassen werden können. Im Beispiel wird das img-tag ja auch nicht relativ positioniert. Dass die slideneden Elemente nicht absolut positioniert werden dürfen, ist natürlich schon klar

Du darfst gern auch static verwenden. Ich bezog das eigentlich eher auf die Verwendung von absolute. Meist benutzt man dann relativ, aber ist darauf natürlich nicht festgelegt - der BG-Slider benutzt z.b. fixed.

Unter Safari 6.0.5 erhalte ich dieses Fehlverhalten, wenn das slidende Element relativ positioniert ist.

Hier wird das Problem übrigens auch beschrieben.

Vermutlich handelt es sich um einen Fehler in Safari

Japs, in neueren Versionen von Safari ist das nicht mehr vorhanden. Habe das heute zufällig bei meinen Eltern gesehen, die auch noch 6.0.5 verwenden.

Viele Grüße...
...Dirk

[peter_lang]

Also, ich krieg das mit responsive einfach nicht hin...alles durchprobiert.

Vielleicht hab ich auch nur ein Denkfehler, ich gehe wie folgt vor:

- Slider installiert
- slidergruppe gesetzt
- Slideobjekte bestehen aus: Text und Bild rechts, über dir Bildfunktion unter dem Textfenster. Habe auch mit Tabelle probiert, ging auch nicht

Wenn ich keine feste sliderbreite nehme, dann ist nichts sichtbar...auch wenn ich 100% eintrage, wird nicht verkleinert

Kann mir jemand nen Tipp geben?

Anbei auch ein screenshot222.jpg

[Frankkirsch]

Hallo,

ich nutze den Slider erfolgreich, nur bei meinem eigenen Bildschirm habe ich Probleme.
Bei kleinen Bildschirmen funzt es.

Das Bild ist 1800 breit, mein Bildschirm über 1900. Das Bild wird hier aber nicht größer
skalliert. Hab mir schon sämtlichen CSS angesehen, finde es aber nicht.

Vielleicht kann mir jemand helfen bei www.fahrzeugmanager.broweb.de

Vielen Dank
Frank

[derRenner]

Das Bild ist 1800 breit, mein Bildschirm über 1900. Das Bild wird hier aber nicht größer
skalliert.

Hallo,

ich denke, dass das auch gut so ist
wird das Bild grösser skaliert als das Originalbild (und das ist ja 1800x730px gross) gross ist, würde es zu verpixeln beginnen und das wiederrum würde etwas unschön aussehen ...

[Dirch]

Das Bild ist 1800 breit, mein Bildschirm über 1900. Das Bild wird hier aber nicht größer
skalliert. Hab mir schon sämtlichen CSS angesehen, finde es aber nicht.

Das ist ein ganz normales Verhalten. Andere Slider setzen auf das img idR eine CSS-Breite von 100%. Darauf hatte ich bewußt verzichtet. Unter anderem auch aus dem Grund den derRenner anführt. Wenn du das Bild komplett skalieren lassen willst, dann setze mit CSS die Bildgröße auf 100% und es skaliert dann sowohl nach unten als auch oben und bleibt nicht bei seiner max. natürlichen Größe stehen.

Viele Grüße...
...Dirk

[peter_lang]

Ich suche eine slider Erweiterung, mit der ich diesen slider umsetzen kann....ist "dk_caroufredsel" dafür geeignet? Oder doch einen anderen?

slider.jpgslider.jpg

...bin auch etwas überfragt, den Hintergrund in der Kachelung (blauer Hintergrund) über den 960px Rahmen zu setzen. Hätte das über bg des wrappers gemacht aber dann hab ich das auf kjedem template und es soll nur auf der Startseite erscheinen..jemand nen Tipp`?

Thx im Voraus

[Dirch]

klar kannst du damit wunderbar machen:

Karussell-Breite auf 100% (wenn du ein statisches Layout mit 960px definiert hast) und Element-Breite auf die Breite deiner Elemente. Der Rest ist CSS. Kannst sogar dafür die caroufredsel-Galerie benutzen, wenn die figcaptions nicht umfangreicher sind und dann bei den Bildern direkt diesen Text hinterlegen.

[peter_lang]

Irgendwie hab ich ein Denkfehler, ich lege ein Slide an (Anfang + Bilder + Ende) an. Im Artikel als Modul einbinden. jQuery aktiviert. Aber es kommt nichts ..

[Dirch]

Irgendwie hab ich ein Denkfehler, ich lege ein Slide an (Anfang + Bilder + Ende) an. Im Artikel als Modul einbinden. jQuery aktiviert. Aber es kommt nichts ..

äh nee

Modul = Inhalte (OHNE Wrapper) im BE bei den Einstellungen hinterlegen (oder Galerie verwenden, falls nur Bilder)
Inhalts-Element = Start-Wrapper, Inhalte, End-Wrapper (oder Galerie verwenden, falls nur Bilder)

Schau doch mal im Wiki die Anleitung an...

[peter_lang]

ahhh...ok.. habs als Inhaltselement eingebunden...o Wunder..es geht.. aber ruckellt noch beim Übergang der 5er Reihe...das macht mir noch Kopfzebrechen

[Dirch]

o Wunder..es geht..

Ist das selbstironisch (weil du es dann doch geschafft hast) oder polemisch gemeint?

[peter_lang]

hehe, habs die ganze Zeit als Modul probiert, also komplizierter gedacht, als es war

Habe noch frei Sachen, die nicht so ganz wollen, vlt könnte mir jemand nen Tipp geben:

1) Den title tag vom BE auf die Bilder
2) es scroll seoweit flüssig bis auf letzte Bild, das kommt immer irgendwie so reingeschoben, wenn die ersten 5 nach reinscrollen zum stehen kommen, falscher sliderart? Habe kreisförmich genommen
3) Eins hab ich noch offen, würde gerne die Navi "Vorwärts / Zurück" gerne durch Icons ersetzen ... kann mir jemand sage, wo ich das tun kann?

[AgentK]

Hallo,

ich habe unter http://coolcarousels.frebsite.nl/c/28/ das carouFredSel Beispiel #28 gesehen und wollte es selbstständig einbinden.

In der Contao-Wiki wird immer davon gesprochen, dass man bei carouFredSel eigene HTML Vorlagen und eigene JS-Skripte auswählen kann.

Gibt es diese Funktion noch, bei mir wird sie leider nicht mehr angezeigt oder gibt es noch eine andere Möglichkeit mein Wunschbeispiel von oben einzubinden?

Vielen Dank

Stefan

[planepix]

Hallo Stefan,

in den Contao-Einstellungen hast du die Experten-Ansicht des carouFredSel aktiv? Oder die Basis-Ansicht? Ggf. hängt es schon hiermit zusammen.

[AgentK]

Vielen Dank, jetzt wird mir die Funktion angezeigt.

Schönes Wochenende