Caroufredsel und die Beispiele

**sebi** · 18.09.2013, 18:58

Moin zusammen,

ich habe heute das erste Mal die hervorragende, gute Arbeit, Erweiterung dk_carouefredlel installiert. Wie wahrscheinlich jeder habe ich mir auch vorher die vielen schönen Beispiele auf der Seite angeschaut und war begeistert.

Nach der Installation war ich allerdings fast enttäuscht

Zugegeben, ich hatte mich auch nicht sonderlich tief eingelesen. Die "normalen" Slide-Funktionen funktionieren alle einwandfrei und ich kam auch schnell zurecht mit den diversen Einstellungsmöglichkeiten.

Ich war allerdings davon ausgegangen, dass man in der Erweiterung ALLE Einstellungsmöglichkeiten hat, um die gezeigten Beispiele umzusetzen... Ist wohl "unmöglich" denke ich, aber nicht drüber nachgedacht vorher.

Ich bin immer ein Freund von "Widerverwendbarkeit", bspw. habe ich mir "templates" angepasst und zusammengepackt, die die in Contao vorhandene Navigation zu dieser (oben) verändern - einfach Navigation erstellen, ID vergeben und CSS-Datei einbinden. Somit hat man beim nächsten Mal weniger Arbeit und erhält sich die volle Funktionsfähigkeit von contao.

Daher meine Frage: Hat sich schon mal jemand rangemacht und versucht einzelne Beispiele, so wie sie dort sind oder in vereinfachter Form, in Contao umzusetzen, so dass man sie auch in weiteren Projekten nutzen kann?
Auf den ersten Blick erscheint das nicht ganz so leicht zu sein, aber würde mich vielleicht mal ranwagen in Zukunft ein paar Beispiele umzusetzen.
Vielleicht kann man dann eine Art "Sammlung" zusammentragen, die auch anderen hilfreich sein könnten.

**derRenner** · 18.09.2013, 19:33

Hallo,

ich würde sagen, dass sich das 'sich besser reinlesen' durchaus lohnt - denn den grössten Teil der Beispiele sind schon mit Einsatz von CSS und HTML umsetzbar.

Ich selbst hatte mal diese beiden für eine Projektvorstellung umgesetzt:
http://coolcarousels.frebsite.nl/c/63/
und
http://coolcarousels.frebsite.nl/c/5/

wobei zweiteres carousel, soweit ich mich erinnern kann, ohne die Erweiterung umgesetzt wurde - also das Script von der frebsite-Seite 'zu Fuss' eingebaut

**speedweb** · 19.09.2013, 11:00

Hallo,
eine Sammlung von überarbeiteten und Angepassten Templates und CSS wäre sicher für viele Hilfreich.

Ich selber bin die letzte Zeit leider nicht mehr dazugekommen weiter zu machen.
Habe begonnen den Newsslider aus Contao 2.11 nachzubauen.
Leider bin ich hier dann nicht direkt weitergekommen da es doch nicht so einfach ist.
(Beitrag mit Screenshot)

Gerade solche Lösungen und Beispiele wären als Zusatz zum Modul das richtige.
Weitere Anpassungen könnte dann jeder selber machen, da der Grundstock schon vorgegeben ist.

beste Grüße
Thomas

**Dirch** · 23.09.2013, 15:34

Zitat von sebi

Ich war allerdings davon ausgegangen, dass man in der Erweiterung ALLE Einstellungsmöglichkeiten hat, um die gezeigten Beispiele umzusetzen... Ist wohl "unmöglich" denke ich, aber nicht drüber nachgedacht vorher.

Hallo Sebi,

schön, daß dir die Erweiterung gefällt.

Sehr viele der Einstellungen werden im BE abgebildet. Freds Seite zeigt jedoch Anwendungs-Möglichkeiten wo bei fast allen Beispielen individueller jQuery-Code geschrieben wurde. Solch eine Logik läßt sich leider nicht abbilden, da die Einstellungen eben nur Einstellungen für das Script sind. Programmier-Logik kann darüber nicht abgebildet werden. Wollte man diese Beispiele umsetzen müßte man für jedes ein eigenes Modul/CE für Contao hinterlegen, das dann in Abhängigkeit die Callback-Funktionen entsprechend füllt. (So wie das z.B. mit dem Hintergrund-Slider geschieht.) Das ist doch ziemlich aufwendig vor allem weil Designer meist ihr eigenes Look & Feel verwirklichen wollen.

Letztlich muß man eigentlich "nur" das JS-Template und sein CSS an die Erweiterung anpassen. Gern kann ich dann auch angepaßte Templates als Modul/CE hinzufügen bzw. so einbauen, daß sie wie der Hintergrund-Slider benutzt werden können.

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

**sebi** · 24.09.2013, 14:26

Hey, vielen Dank für eure Antworten.

Ich habe mal ein einfaches Beispiel umgesetzt und will euch das kurz vorstellen, wie ich mir das vorgestellt habe.
Habe es in einer lokalen Installation getestet, so dass ich es bisher nicht verlinken kann. Überlege aber dafür mal eine Sammlung zu erstellen - auch online.

Umsetzung siehe unten.

Ist zur Diskussion, ob soetwas sinnvoll ist, freigegeben. Lasse mich auch gerne davon abbringen

Besten Gruß,
Sebi

**speedweb** · 24.09.2013, 14:57

sehr gut gemacht...
genau so ist es für einen Anfänger nachvollziehbar das ganze richtig umzusetzen.

beste Grüße Thomas

**dirksche** · 24.09.2013, 17:57

Finde das auch eine Prima Idee. Echt Klasse :-)

**comanche** · 25.09.2013, 13:50

Klasse gemacht und sehr nützlich!

Grüße,
Andreas

**sebi** · 27.09.2013, 10:18

Danke für die positiven Rückmeldungen. Werde hier nochmal genau beschreiben wie ich das umgesetzt habe und den obigen Kommentar verkürzen.

_________________
Um dieses Beispiel http://coolcarousels.frebsite.nl/c/65/ umzusetzen, kann man wie folgt vorgehen:

Zunächst ein neues Karussel mit folgenden Einstellungen erstellen.

Abspielverhalten:

Laufrichtung: links

automatisches Abspielen:

Fortschrittsbalken anzeigen: Balken
Anzeigedauer: 3000
Aktualisierungs-Intervall: 10

Übergangseffekte:

Übergangs-Effekt: scroll
Übergangs-Dauer: 2

Darstellung der Elemente:

Responsive
Anzahl der sichtbaren Elemente: fest: 1

Navigation:

Navigation einblenden
Pagination einblenden
Nun unter "Templates" ein neues template erstellen vom Typ: ce_caroufredsel.html5, zu ce_caroufredsel_dk65.html5 umbenennen und folgenden Code einfügen:

PHP-Code:

<?php if ($this->type != "caroufredsel_stop"): ?> <div class="<?php echo $this->class; ?> <?php if ($this->type == 'caroufredsel_start') echo 'ce_caroufredsel '; ?>block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>> <?php if ($this->useThumbnails && ($this->thumbnailsPosition == 'top' || $this->thumbnailsPosition == 'left')): ?> <div class="caroufredsel_thumbnails_skin" id="caroufredsel_thumbnails_skin_<?php echo $this->id; ?>"> <div class="caroufredsel_thumbnails" id="caroufredsel_thumbnails_<?php echo $this->id; ?>"> <?php echo $this->thumbnails; ?> </div> <div class="clearfix"></div> <div class="caroufredsel_thumbnails_controls" id="caroufredsel_thumbnails_controls_<?php echo $this->id; ?>"> </div> </div> <?php endif; ?> <div class="caroufredsel_skin" id="caroufredsel_skin_<?php echo $this->id; ?>"> <?php if ($this->headline): ?> <<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>> <?php endif; ?> <div class="caroufredsel" id="caroufredsel_<?php echo $this->id; ?>"> <?php endif; ?> <?php if ($this->type == 'caroufredsel_gallery' || $this->type == 'caroufredsel_background'): ?> <?php echo $this->images; ?> <?php endif; ?> <?php if ($this->type != "caroufredsel_start"): ?> </div> <?php if ($this->autoProgress || $this->navigation): ?> <div class="clearfix"></div> <?php if ($this->autoProgress): ?> <div class="caroufredsel_bar_wrapper" id="caroufredsel_bar_wrapper_<?php echo $this->id; ?>"> <?php if ($this->autoProgress == 'pie'): ?> <canvas class="caroufredsel_bar" id="caroufredsel_bar_<?php echo $this->id; ?>"></canvas> <?php else: ?> <div class="caroufredsel_bar" id="caroufredsel_bar_<?php echo $this->id; ?>"></div> <?php endif; ?> </div> <?php endif; ?> <?php if ($this->navigation): ?> <div class="caroufredsel_controls" id="caroufredsel_controls_<?php echo $this->id; ?>"> <?php if ($this->pagination): ?> <div class="caroufredsel_pagi" id="caroufredsel_pagi_<?php echo $this->id; ?>"></div> <?php endif; ?> </div> <?php endif; ?> <?php endif; ?> </div> <?php if ($this->useThumbnails && ($this->thumbnailsPosition == 'bottom' || $this->thumbnailsPosition == 'right')): ?> <div class="caroufredsel_thumbnails_skin" id="caroufredsel_thumbnails_skin_<?php echo $this->id; ?>"> <div class="caroufredsel_thumbnails" id="caroufredsel_thumbnails_<?php echo $this->id; ?>"> <?php echo $this->thumbnails; ?> </div> <div class="clearfix"></div> <div class="caroufredsel_thumbnails_controls" id="caroufredsel_thumbnails_controls_<?php echo $this->id; ?>"> </div> </div> <?php endif; ?> </div> <?php endif; ?>
Anschließend das Karussel als Inhaltselement unter Artikeln und die gewünschten Bilder einbinden und mit Bildunterschriften versehen. Dem öffnenden Umschlagelement des Karussels die ID "dk65" und das erstellte Template ce_caroufredsel_dk65 auswählen zuweisen.

Abschließend diesen CSS-Code einbinden oder über die Eingabemaske eingeben.

Code:

#dk65 figcaption
{
    bottom:                 49px;
    position:               relative;
    padding-top:            10px;
    padding-bottom:         10px;
    padding-left:           50px;
    font-size:              2em;
    color:                  #fff;
    z-index:                50;
}
 
#dk65 div.caroufredsel_bar_wrapper
{
    height:                 50px;
    bottom:                 99px;
    position:               relative;
    background-color:       rgba(34,34,34,0.5);     // In Contao Eingabemaske
                                                    // Hintergrundfarbe: 222,
                                                    // Deckkraft 50
}
 
 
#dk65 div.caroufredsel_bar
{
    height:                 50px;
    top:                    0;
    background-color:       rgba(255,0,0,0.5);      // In Contao Eingabemaske
                                                    // Hintergrundfarbe: F00,
                                                    // Deckkraft 50
}
 
 
#dk65 div.caroufredsel_controls
{
    width:                  20%;
    bottom:                 130px;
    position:               relative;
    float:                  right;
    padding-right:          15px;
    text-align:             right;
    z-index:                100;
}
 
 
#dk65 div.caroufredsel_pagi a
{
    width:                  10px;
    height:                 10px;
    display:                inline-block;
    margin-left:            10px;
    border:                 1px solid #fff;
    border-radius:          6px;
    text-indent:            999999px;
    behavior:               url('assets/css3pie/1.0.0/PIE.htc');
}
 
#dk65 div.caroufredsel_pagi a.selected,
#dk65 div.caroufredsel_pagi a.selected:hover
{
    background-color:       #fff;
}
 
#dk65 div.caroufredsel_pagi a:hover
{
    background-color:       rgba(255,255,255,0.3);  // In Contao Eingabemaske
                                                    // Hintergrundfarbe: FFF,
                                                    // Deckkraft 30
}
 
#dk65
{
    height:                 350px;
}

Viel Spaß damit,
Sebi

**ke-an** · 21.10.2013, 15:50

Hallo Contao-Forengemeinde,

bin ebenfalls mit großer Begeisterung auf die Contao Extension gestoßen. Leider scheitere ich
am Umsetzen einer Variante des originalen Tools: http://coolcarousels.frebsite.nl/c/2/

Dort gibt es entweder die Probleme, dass der scroll-Effekt leider verloren geht, oder anfängt zu ruckeln. (Liegt an einer left: -67px;-Angabe)

Wenn Jemand Tipps oder Tricks hätte, wäre sich wirklich sehr dankbar.

Grüße aus München,
Andi

legalstuff · 24.01.2014, 19:30

Also Sebi,

das hast Du nicht nur super umgesetzt, sondern auch wirklich für jeden leicht verständlich hier beschreiben können.

Erst mal großen Dank dafür.

Mich würde der Effekt #22 sehr interessieren. (http://coolcarousels.frebsite.nl/c/22/).
Für mich hat der den Vorteil gegenüber einigen anderen, dass dabei die Bilder nicht auf ein bestimmtes Maß festgelegt sind, sondern sich die Slideshow sich dem Bild anpasst.

Falls da jemand beim Template behilflich sein will.. *smile*.. sehr gerne.. habe das bisher noch nicht gemacht.

Ich setze ein Contao 3.2.4 mir dem Coolums fluid % layout ein, so dass ich responsiv bleibe, um meine Seite sowohl auf Handy´s, Tablet´s und größeren PC-Bildschirmen gleichermaßen gut aussehen zu lassen.
Jetzt wäre es natürlich super, wenn da eine Sliedeshow wie die hier eingesetzte, da auch noch mit unterschiedlichen Bildern klar kommt.
Beim CSS sehe ich nicht das große Problem für mich.

Sebi, eventuell hast Du ja auch an der Version 22 Interesse und hilfst etwas mit.. ;-)

P.S.: Auch die Variante #61 finde ich nicht schlecht (weil responsive und teils fuid)

**sebi** · 24.01.2014, 21:13

nAbend legalstuff,

DANKE für das Lob, hört man gerne

Schön, dass es dir gefällt.

An nr. 22 würde ich mich mal dran versuchen, joar...
Allerdings hab ich am Mittwoch mein Kolloquium und danach dann noch etliche organisatorische Dinge zu erledigen... Danach würde ich das mal versuchen und bei Erfolg hier posten bzw. dich auch direkt anschreiben.

Besten Gruß,
Sebi

legalstuff · 27.01.2014, 11:50

Sebi, das ist OK.. war ja auch nur eine Anregung, weil das doch der Realität nahe kommt, dass man nicht immer alle Bilder im selben Format hat .. und auch nicht will (Bildschnitt), Panorama, etc...

Oder ich sehe auch noch das #03er als interessant an, da es kpl. fluid und Liquid ist. Wenn das dann nur auf das Element begrenzt ist mit dem BG, dann wäre das schon sehr interessant.

Ich denke dabei daran, das Heute WEB-Seiten ja oft auch auf Tablets betrachtet werden.. oder gar auf Smartphones.. und da möchte man es ja auch entsprechend anpassen können.

**taubaer** · 31.01.2014, 19:47

Hallo Sebi,

danke für die tolle Anleitung. Da ich deine Slideshow sehr gut finde, versuche ich sie in meiner Webseite nachzubauen.
Kannst du mir bitte 3. nochmal näher erklären? Bin Contao-Einsteiger und blicke nicht so ganz durch.

Grüße, Andi

**sebi** · 31.01.2014, 21:28

Moin Andi,

Zitat von taubaer

Kannst du mir bitte 3. nochmal näher erklären? Bin Contao-Einsteiger und blicke nicht so ganz durch.

Klar

Also: unter Artikel (oben links im BE) navigierst du zu dem Artikel auf deiner entsprechenden Seite und fügst dort ein neues Element hinzu. Der Typ muss hier ein öffnendes Umschlagelement des Caroufredsel sein. Hier kannst du dann unter dem Reiter Experteneinstellungen in dem ersten der beiden Felder bei "ID/Klasse" die ID dk65 eingeben. Speichern & Schließen.

Anschließend kannst du unterhalb dieses Umschlagelementes die gewünschten Bilder einfügen und mit Bildunterschriften versehen. Also neues Inhaltselement vom Typ Bild, entsprechende Datei auswählen und ins Feld Bildunterschrift was auch immer eingehen.

Abschließend musst du nach dem letzten Bild ein schließendes Umschlagelement für das Karussel erstellen.

Hoffe, das hilft dir erstmal weiter.
Sonst melde dich wieder,

Sebi

**damac** · 02.02.2014, 10:03

Grüßt euch.
Ich nutze gerade das Contao 3 und binde den dk_caroufredsel zum ersten Mal ein. Sieht sehr gut und übersichtlich aus.
Für diese Erweiterung habe ich mich wegen dieses Karussells hier entschieden: http://coolcarousels.frebsite.nl/c/59/ allerdings verstehe ich nicht so ganz, wie ich das umsetzen kann?
Hat jemand eine Idee, wie an die Sache ran zu gehen ist? Es wird ja ein html/Java und Css Code angeboten. Wie ist das zu verstehen. Zusätzlich zur Erweiterung oder anstelle von.

Drei Karusselle einbauen ist auch in Ordnung, damit komme ich klar. Aber ich verstehe nicht ganz, wie ich die Navigation der 3 Karusselle mit nur den Pfeilen von einem Karussell steuern soll? Durch das Nutzen der Pfeiltasten bewegen sich ja alle drei Module in der richtigen Reihenfolge.

**sebi** · 02.02.2014, 17:39

Moin,

du kannst im "öffenden Umschlagelement" die Einstellung "carouFredSel-Karussells synchronisieren" benutzen.
Damit musst du die drei Karussels so clever miteinander verbinden, dass es klappt.
Natürlich dann jeweils unterschiedliche Startelemente auswählen ...

Sebi

**damac** · 02.02.2014, 21:19

sorry, aber ich schaffe es nicht.
habe die Karussells als Module, dann als Galerien eingebunden, unterschiedliche Vorgaben in den Karusselleinstellungen, sowie verschiedene Synchronisationen der Karussells ausprobiert (habe nun alle drei auf das Karussell 36 synchronisiert, da dort auch die Navigationselemente sind). Es slidet aber leider ziemlich wirr und ohne ersichtliches System hin und her: http://gmhs-ltd.com/index.php/home.html
Habe ich da vielleicht einen grundlegenden Fehler? So erscheint es mir beinahe, da einige Änderungen fast keine Unterschiede liefern?!?

**Dirch** · 02.02.2014, 22:53

Das schwierige an seinen Beispielen ist, daß die fast alle individuellen jquery-Code zusammen mit CSS benötigen. Das kann man alles nicht allgemein abbilden. Um diese Beispiele umzusetzen kommt man also nicht drum herum das js-Template anzupassen. Letztlich muss man dann seinen Code dort so anpassen, daß er mit der Erweiterung in der Contao-Umgebung harmoniert. Ohne sich mit den Internas des Sliders zu beschäftigen und verstehen lernt kommt man leider nicht so weit.

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

**damac** · 03.02.2014, 11:38

ok, vielen Dank. Dann dilettiere ich mal ein wenig rum

Wenns klappt, sag ich Bescheid wie es funktioniert hat.

**taktell81** · 24.02.2014, 16:52

Gudn Tach,

die Möglichkeiten der Extension sind wirklich der Hammer, wenn man sich die Demos einmal einverleibt.
Aber ist es nicht doch einfacher die Demos mit den downloadbaren Coolcarousel-files zu reproduzieren ?

Manuell geht es zumindest recht simpel:
- Jquery.caroufredsel-6.x.x-packed.js Datei auf den Server kopiert und im Seitenlayout unter Eigener JavaScript-Code verlinkt.
- ein HTML Modul erstellt (incl der Script Anweisungen, Css Formatierungen, HTMl Aufbau)
- dieses Modul direkt oder als Artikel in der Seite eingebunden

Die Verwendung des Contao Plugins ist natürlich wünschenswert, da übersichtlicher ! (...und anscheinend ausschließlich mit dem downloadbaren Code reproduzierbar !?
Also habe ich versucht das Template js_caroufredsel.xhtml mit dem JS-Inhalt der Coolcarousel-HTML zu ersetzen und diese im Caroufredsel-Modul aufzurufen.
Gleiches mit den CSS Anweisungen der Coolcarousel HTML und dem css_caroufredsel.xhtml Template.
Folge: Fehlermeldung im Frontend: Could not find template "js_caroufredsel_test" / "css_caroufredsel_test"

Weiß jemand, welche Templates mit welchem Inhalt der Coolcarousel Files angepasst werden müssen, damit auch noobs (wie ich es zu sein pflege) die Demos einfach reproduzieren können ? plz help