Slider mit zusätzlicher Texteinblendung

[be-tina]

Nach langer, ergebnisloser Suche muss ich jetzt doch mal hier fragen:

Gibt es einen Slider für Contao, bei dem ich pro Bild auch verzögert Text anzeigen lassen kann? So wie hier (das ist ein Wordpress-Template):
http://envision.wptation.com/homepage-v2/

Was auch gut wäre: Wenn ich jedem Bild einen extra Hintergrund zuweisen könnte so wie hier:
http://www.epscomputer.com/es/?lang=es

[MacGyer]

Moin,


bei dem Theme kommt der Revolution Slider von ThemePunch zum Einsatz.
Sollte auch mit contao zum Laufen zu bekommen sein:


http://themepunch.com/revolution/

[be-tina]

Moin,


bei dem Theme kommt der Revolution Slider von ThemePunch zum Einsatz.
Sollte auch mit contao zum Laufen zu bekommen sein:


http://themepunch.com/revolution/

Danke für den Tipp!

Gibt es nichts Vergleichbares über den Erweiterungskatalog im Contao-Backend?
Ich habe nämlich keine Ahnung, wie ich den Slider ohne Erweiterungskatalog einbinden kann.

Wie hast du eigentlich herausbekommen, welcher Slider das ist?

[stefan-at-work]

schau Dir mal das Modul Cameraslideshow an. Dies sollte Deine Anforderungen erfüllen.

[be-tina]

Vielen Dank für die Tipps.

Die Camreaslideshow ist nicht ganz das, was ich suche, hat aber auf jeden Fall mehr Möglichkeiten als der Flexslider. Mit dem zugefügten HTML Block könnte ich das mit dem Text erreichen. Da muss ich nur noch ein bisschen probieren, wie ich da per CSS drankomme, so dass alle zugefügten HTML Block Inhalte gleich formatiert sind (auch wenn der Kunde einen Inhalt hinzufügt).

Ich probiere mal noch andere Slider aus und melde mich, wenn ich etwas gefunden habe.

[be-tina]

... so, bin schon ein Stück weiter mit der Camera Slideshow:

Ich gestalte die Bildunterschrift um, so dass sie transparent über dem Bild steht. Nur leider habe ich bemerkt, dass die Bildunterschrift nicht umbrochen werden kann (also nicht da, wo ich das will).

Deshalb habe ich auch den HTML-Block gestaltet und experimentiere da noch ein bisschen. Sieht aber schon ziemlich so aus, wie ich das will.

Jetzt habe ich nur noch ein Problem: dem <p> habe ich eine Hintergrund zugewiesen. Den hätte ich jetzt gerne so breit wie den Text. Der geht aber bis zum rechten Rand des Sliders (float: left; und clear: both; damit die Zeilen untereinander stehen - ich habe es herausgefunden).

Leider experimentiere ich gerade noch lokal, deshalb kann ich noch keine Links posten.

[MacGyer]

Danke für den Tipp!

Gibt es nichts Vergleichbares über den Erweiterungskatalog im Contao-Backend?
Ich habe nämlich keine Ahnung, wie ich den Slider ohne Erweiterungskatalog einbinden kann.

Wie hast du eigentlich herausbekommen, welcher Slider das ist?

Die Einbindung sollte relativ einfach sein (ohne genauer geschaut zu haben):

• benötigte JS-Dateien, CSS-Dateien und Image-Assets in dein files/... Verzeichnis kopieren
• Pfade zu Images im CSS-File prüfen und ggf. anpassen
• im Layout unter "zusätzliche Headtags" die JS- und CSS-Dateien referenzieren
• Slider nach Anleitung initiieren (auch im Layout unter "zusätzliche Headtags")
• entsprechendes Inhalts-Element oder Modul basteln, welches die geforderte HTML-Struktur wiedergibt

Herausgefunden, welcher Slider das ist, habe ich, indem ich den Quelltext der von dir gelisteten Seite kurz angeschaut habe.

[be-tina]

Herausgefunden, welcher Slider das ist, habe ich, indem ich den Quelltext der von dir gelisteten Seite kurz angeschaut habe.

Ah, ja. Jetzt wo ich weiß, wie der Slider heißt, habe ich es auch gefunden. Ich wusste nicht, wo ich im Quelltext nachsehen muss.

Danke für die Beschreibung. Das probiere ich auf jeden Fall auch einmal aus.

[be-tina]

So, noch einmal vielen Dank an alle.

Themepunch habe ich nicht hinbekommen. Dazu fehlt mir noch zu viel Hintergrundwissen.

Aber die Camera Slide Show ist recht gut für meine Bedürfnisse geeignet. Das scheint der einzige Slider zu sein, bei dem man ein Bild und gleichzeitig ein html-Element anzeigen kann.

Jetzt habe ich meine Sliderproben auch einmal hochgeladen:
http://www.bettinaknell.de/srk_14112...hp/home-2.html

Was ich nicht herausbekomme:
Warum funktioniert mein Link-Button Nicht?

Den habe ich als Link im html-Element von Camera Slide Show erstellt, konnte ihn auch per CSS umgestalten (.camera_html a), aber irgendwie scheint da etwas drüber zu liegen. Ich habe schon mit position: absolute; und z-index gearbeitet. Es funktioniert aber nicht.

Wenn mir da noch jemand helfen könnte, wäre das echt super und ich hätte die Lösung gefunden.

[planepix]

Hallo be-tina,

könntest du einmal das automatische Sliden abstellen?
Dann kann man das mit Firebug o.ä. untersuchen, ohne das einem der Inhalt wegslidet

[be-tina]

Hallo be-tina,

könntest du einmal das automatische Sliden abstellen?
Dann kann man das mit Firebug o.ä. untersuchen, ohne das einem der Inhalt wegslidet

Habe ich jetzt ausgeschaltet.

[be-tina]

Das Element ist schwer zu finden. Deshalb hier ein Sceenshot aus dem Crome.


Link-Button.png


Die Navigationselemente, die sich einblenden bei Mouse over sind weiter unten bei .camera_commands .camera-pag und .camera_next

[planepix]

Danke.

.camera_wrap liegt drüber, daher ist der Link nicht erreichbar.

Ich lese noch mal von oben warum das nicht mit einem Inhaltsslider gelöst wurde.

Man kann ja auch den Core-Slider nehmen und dann mit Inhaltselement Text arbeiten?
Den Text dann über dem Bild positionieren etc.

[be-tina]

Hallo planepix

erst einmal danke für deine schnell Antwort.

Den camera_wrap habe ich jetzt mal absolut positioniert mit z-index 0 - geht aber trotzdem nicht.

Was meinst du mit Inhalts-Slider? Die Camera Slide Show ist auch als Artikel eingebunden - meinst du das?

... und bei dem Core-Slider: Das ist Content-Slider, der schon im Backend mit enthalten ist oder? Da kann ich aber doch nicht zwei Inhaltselemente auf einmal anzeigen oder? Vor allem gefällt mir, dass bei der Camera Slide Show die Texte leicht verzögert angezeigt werden.

Ich habe den Core-Slider mal schnell unter Home7 eingebaut.

[planepix]

Hallo be-tina,

ich habe am Anfang noch mal gelesen - da zwei Elemente sliden unabhängig voneinander sollen ist das natürlich nicht ganz einfach

Core-Slider ist der der bei Contao dabei ist.
Dort kann man ja ein Start- und ein Endelement anlegen und dann die Elemente dazwischen packen, die dann als Slideinhalt angezeigt werden sollen.

Mit dem Inhaltselement Text kannst du ja ein Text und ein Bild auswählen; also das Bild so groß wählen wie der Slider groß ist und dann den Text dazu mit CSS positionieren.
Da drin kann man dann auch alles verlinken.

Und mit animate.css als Beispiel könnte man dann den Text noch animieren lassen.

Ggf. ein anderer Ansatz, aber ich habs immer gerne so einfach wie nötig

[planepix]

Ich habe den Core-Slider mal schnell unter Home7 eingebaut.

Ja das sieht doch schon gut aus. Also 3 mal Inhaltselement Text mit Bild und Links.

[planepix]

So ich ergänze noch mal Infos zu animate.css.

Ich hatte das für den Austria Day im Juli zusammen gestellt:
Aktuell geht die Beschreibung hier los:
http://slides.com/thomasweitzel/cont...-2014/live#/37

Und auf der Demoseite sieht man den Effekt:
http://vienna.contao-fuer-webdesigner.de/

Das schöne: Man kann dann die Klasse auf ein Element beschränken und damit auch Animationen herstellen.

[be-tina]

Also das mit animated.css ist echt klasse. Damit werde ich noch ein bisschen experimentieren.

Ich habe schon einmal angefangen:
http://www.bettinaknell.de/srk_14112...hp/home-7.html

Leider greift die Animation nur, wenn ich die Seite neu lade. Wenn der Slide wieder auftaucht, animiert das Ganze nicht neu.

Kann ich per CSS einem Element eine Klasse zuweisen? Dann könnte ich nämlich generell z.B. Texten im Slider eine bestimmte Animation zuweisen. Ich denke da immer auch an meine Kunden, die eventuell mal selbst einen neuen Slide anlegen wollen.

Camera Slide Show wirkt in dieser hinsicht immer noch geeigneter (Websiteinhalt, die vom Kunden hinzugefügt werden). Nur müsste der Link noch funktionieren.

Danke aber auf jeden Fall für den Tipp mit animate.css !!!!!!!

[stefan-at-work]

Hallo bet-tina,

ändere mal in den Cameraslideshow Einstellungen:
Aussehen Slideshow -> Layer über Bilder -> false

[be-tina]

Hallo bet-tina,

ändere mal in den Cameraslideshow Einstellungen:
Aussehen Slideshow -> Layer über Bilder -> false

Danke, Leider ändert das nichts. Ich lasse es mal ausgeschaltet.