Navigation einblenden

**Nataliya** · 03.12.2012, 22:35

Hallo,

habe heute die Erweiterung dk_caroufredsel installiert. Funktioniert super, nur die Navigation kriege ich nicht hin => Webseite
Ich will "previous" and "next" buttons einstellen, damit es so ähnlich wie die untere Karussel auf dieser Seite aussieht: http://caroufredsel.dev7studios.com/
Ich habe versucht mit CSS .caroufredsel_prev_155 und .caroufredsel_next_155 zu gestalten, also Button als Hintergrundbild, text transparent und mithilfe von margin die Position....es war irgendwie nichts zu sehen

Edit: Wenn ich die Einstellung "Responsive" einschalte - dann verschwindet die Gallerie, dafür werden die Buttons sichtbar...Ich bin verwirrt

Bitte um Tipps...

P.S.: es ist meine erste Webseite, also bitte nicht zu streng sein und ausführlicher erklären...

**Dirch** · 04.12.2012, 00:16

Huhu,

die Responsive-Einstellung hat damit eigentlich nichts zu tun und sollte auch nicht. =) Bei meinen Tests hatte das funktioniert. Ist aber schon so spät, daß ich erstmal schlafen gehe und es mir morgen anschaue. Evtl. ist noch in einem der Templates ein Bug drin.

Melde mich dann noch mal, wenn ich genaueres weiß oder noch Fragen hab...

**ciaobello** · 04.12.2012, 01:18

Hallo Dirch,
Ich wollte die Erweiterung schon lange mal testen. Habe Sie deshalb mal noch in ein Contao 3.0.1 installiert.
Den Fehler, dass bei Responsive nur die Navigation angezeigt wird kann ich bestätigen. Wenn mann/frau aber das Fenster verkleinert ... auch nur ein paar Pixel, erscheint das Bild wieder.

So wie ich sehe ist die Erweiterung ja noch Beta. Zudem schreibst Du ja in der Beschreibung dass das CSS rudimentär ist. Ich glaube am besten ist, wenn man sich das entsprechende raus sucht bei der Demo und dort mit dem CSS abguckt?!

Hier geht es zur einer ausführlichen Demo.

**Dirch** · 04.12.2012, 10:57

Soo, ich habe mir deine Seite etwas genauer angeschaut. Die Templates sind in Ordnung. Im Quellcode ist auch alles vorhanden was benötigt wird einschließlich der Navigation.

Was mir aufgefallen ist:

- wenn du nur einen Slider verwendest solltest du eher die CSS-Klassen gestalten, statt die CSS-IDs. Die IDs braucht man nur dann verwenden, wenn man mehrere Slider auf einer Seite einsetzt und jeden davon anders aussehen lassen möchte.
- Du hast wahrscheinlich in den Einstellungen eine Höhe für den Slider vergeben. Diese Höhe ist nur für den Slider selbst. Die Navigations-Elemente liegen außerhalb davon. Du könntest hier dem Content-Element (ce_caroufredsel) eine Gesamthöhe zuweisen (Sliderhöhe + Höhe die du für die Navigation veranschlagst). Es kann sein, daß du die Navigations-Elemente dann absolut positionieren mußt. Aber diese CSS-Sachen hängen halt immer vom individuellen Design ab
- Die Slider-Höhe solltest du auf die Höhe deiner Bildelemente einstellen. So wie ich das gesehen habe, sind diese alle gleich hoch.
- Standardmäßig werden Text-Navi-Elemente eingeblendet wie prev, next usw. Die solltest du entweder im Template oder mit einem display: none; auf diese entfernen.

So das war's erstmal. Wenn noch etwas ist, dann melde dich nochmal.

**Dirch** · 04.12.2012, 11:18

Zitat von ciaobello

Hallo Dirch,
Ich wollte die Erweiterung schon lange mal testen. Habe Sie deshalb mal noch in ein Contao 3.0.1 installiert.
Den Fehler, dass bei Responsive nur die Navigation angezeigt wird kann ich bestätigen. Wenn mann/frau aber das Fenster verkleinert ... auch nur ein paar Pixel, erscheint das Bild wieder.

So wie ich sehe ist die Erweiterung ja noch Beta. Zudem schreibst Du ja in der Beschreibung dass das CSS rudimentär ist. Ich glaube am besten ist, wenn man sich das entsprechende raus sucht bei der Demo und dort mit dem CSS abguckt?!

Hier geht es zur einer ausführlichen Demo.

Hi Ciaobello,

du hast wahrscheinlich einen Webkit-Browser verwendet oder? Dazu gleich mehr.

Die Sache ist, daß es mit der Navigation nichts zu tun hat. Die Navigations-Elemente werden lediglich in den HTML-Code geschrieben und müssen dann individuell gestaltet werden. Wie bei Nataliya schon erwähnt ist die anzugebende Höhe nur für den Slider. (Bin hier im Handbuch noch nicht weitergekommen). Die Einstellung responsive schaltet die Größenberechnung komplett um. Mit ihr darf der Slider die Größen der Elemente anpassen, d.h. er verändert diese aktiv anhand der anderen Einstellungen. Daß dann die Navigation sichtbar wird, liegt dann eher daran, daß er die Slider-Höhe verringert hat und die Navi in den sichtbaren Bereich rutscht.

Bzgl. den halb sichtbaren Elementen, die nach dem Fenster-Größen-Ändern sichtbar werden ist das wohl noch ein Bug im Slider selbst. Fred hatte eine komplett überarbeitete Version rausgebracht, die das in einer Zwischenversion dann ganz extrem hatte. Das wurde gefixt, aber anscheinend nicht 100%. Wenn du dir das im FF anschaust sollten die Elemente immer sichtbar sein. Nur Webkit hat da ein Problem - so meine Erkenntnis. Das scheint hier in Zusammenhang zu stehen wann das JavaScript ausgeführt wird. In den Backend-Einstellungen von Contao kannst du (seit Beta3) einstellen, wann der Slider geladen werden soll. Wenn du hier onWindowLoad einstellst statt onDocumentReady, klappt das auch mit Webkit-Browsern. Das Problem tritt aber wohl nur bei responsive und der flexiblen Höhenberechnung auf bei "variabel" und "automatisch". Leider hat Fred den Slider verkauft und seit ein paar Wochen gibt es da keine Weiterentwicklung mehr.

Daß CSS ist deshalb nur rudimentär, weil ich eine soweit funktionsfertige Erweiterung aus einem anderen Grund schnell veröffentlichen wollte. Ich selbst bin nicht so der Gestalter und idR. hat hier so oder so jeder eine individuelle Gestaltung pro Seite. Letztlich muß man ja nur den vorhandenen Naiv-Elementen seine Grafiken zuweisen und diese an den gewünschten Stellen platzieren. Ich habe hier ein halb fertiges, wo ich seine Stil-Elemente benutze, aber das ist noch nicht fertig.

Die Beispiele kenne ich auch und sie zeigen schön was man alles tolles mit dem Slider machen kann. Das Problem ist bei diesen jedoch, daß sie alle einen höheren Schwierigkeitsgrad haben - man kommt dort um eine individuelle JavaScript-Programmierung nicht drum herum, da man dort bei fast allen entsprechende onXYZCallbacks verwenden muß. Das ist also eher was für diejenigen, die sich damit auskennen und wissen was zu tun ist. Ich habe schon darüber nachgedacht, ob und wie man so etwas abbilden könnte, aber bin noch nicht sehr weit gekommen.

**ciaobello** · 04.12.2012, 12:11

Zitat von Dirch

du hast wahrscheinlich einen Webkit-Browser verwendet oder?

FF13

Zudem mit Chrome getestet. Aber mit der von Dir erwähnten Funktion hab ich es nicht hin gekriegt. Wenn ich Responsive raus nehme geht es.

Zitat von Dirch

Leider hat Fred den Slider verkauft und seit ein paar Wochen gibt es da keine Weiterentwicklung mehr.

Wäre schade wenn Dieses Tool nicht mehr weiterentwickelt resp. kostenpflichtig würde. Andererseits ist so etwas aktuell zu halten halt schon mit Arbeit verbunden.

**Dirch** · 04.12.2012, 12:20

ah ich hatte FF 16 auf dem Mac probiert und mit dem ging es, aber vielleicht war das in dem Moment Zufall. Jedenfalls kann es etwas mit dem tieferen/eingequetschteren HTML-Code von Contao zu tun haben, aber ich bin kein JavaScript Experte und dieser Slider ist so komplex, daß man da schon genau wissen muß wie der was macht. Bei seinen Beispielen jedenfalls tritt das Verhalten nicht auf...

Hmm wenn du es so nicht hinbekommen hast wäre interessant zu wissen, was du für Einstellungen hast. Auf einer anderen Seite wurde dadurch das Problem gelößt.

Ich glaube nicht, daß er kommerziell wird. Die Firma, die den NivoSlider vertreibt hat carouFredSel übernommen. Ich vermute, daß sie wie bei dem NivoSlider eine kommerzielle WordPress-Erweiterung anbieten, aber der eigentliche Slider open-source ist.