Druckbare Version
Hallo,
Ich habe mir die Erweiterung dk_caroufredsel installiert und sie funktioniert auch ganz wunderbar. Ich weiß nur nicht ganz genau wie ich eine im Artikel eingebettete Slideshow wie in diesem Beispiel anpasse http://coolcarousels.frebsite.nl/c/63/ - Kann ich das durch die Einstellungen im BE erreichen?
Gruß
Hallo,
das kannst du mit CSS realisieren. Bei :hover werden margin-Werte verändert. Und mit transition der verzögerte "reinBlendeffekt" erzeugt.
Guck dir die CSS Anweisungen am Besten im Firefox an, da ist's ganz gut erkennbar.
Das wird nur durch das CSS geregelt? Muss die css_caroufredsel.html5 anpassen, oder im normalen Seiten CSS die Einträge vornehmen?
Und wenn ich einen Text wie im Beispiel haben möchte, muss ich den einfach mit der ID description versehen?
Hier ist es wohl so realisiert, dass in einem Wrapper #caroufredsel_wrapper {} und #overlay {} gesetzt sind. Wobei die ID #overlay wohl nichts mit dem dem Karussell selbst zu tun hat, sondern ein eigenes Element ist, das eben bei :hover entsprechend reagiert.
Da musst du aber nichts im template verändern. Das kannst du mit der Erweiterung und einem Inhaltselement 'Text' realisieren. Beides dann mit CSS aneinander anpassen.
Wie schon erwähnt, wenn du dir den Quellcode bzw. die CSS-Anweisungen mit Firebug im Firefox oder dem Entwicklertool im Chrome oder IE anguckst, siehst du sicher sehr rasch, wie das aufgebaut ist.
Hallo,
falls es dir noch nicht aufgefallen ist, dann kannst du bei den Beispielen ein klein wenig runterscrollen und kannst über [..] den notwendigen Quellcode anzeigen lassen. Dort findest du dann die genauen Einstellungen, den HTML- und CSS-Code. Es ist so nicht 1 zu 1 zu übertragen, aber man kann zumindest sehen wie die Strukturen aufgebaut sind und kann es dann versuchen an das Contao-Layout anpassen. Die carouFredSel-Einstellungen brauchen in diesem Fall kein zusätzliches Javascript (was leider oft der Fall bei seinen Beispielen ist) und kannst du direkt übernehmen. Etwas tricky ist vielleicht noch die richtigen "deutschen" Backend-Einstellungen zu finden, aber das ist nur ein wenig Erfahrung, die man braucht.
Allerdings wirst du für diese Struktur wohl das Wrapper-Element und eingebettete Artikel-Container brauchen denke ich. Die ganzen Beispiele sind toll, aber doch sehr individuell besonders die dafür aufgebaute HTML-Struktur, die sich so leider nicht oder nur sehr schwer ins Contao abbilden läßt. Ein Nachteil eines CMS in diesem speziellen Fall.
Grüße...
...Dirk
Hallo,
das Thema hat mich natürlich gereizt :) und hab mich dann nach einer Lösung umgesehen und diese auch umgesetzt.
Wie bin ich vorgegangen? Möglicherweise nur einer von vielen gangbaren Wegen, aber es funzt:
- ich habe mir ein Karusell angelegt, das ich in einem Artikel (der nicht sichtbar ist) verbaut habe (Article ID: 69)
- An jener Stelle, wo das Karusell erscheinen soll hab ich einen weiteren Artikel mit einem Inhaltselement HTML angelegt.
Grundgedanke war jener, dass ich den umschliessenden wrapper selbst erzeugen muss
der Code dazu sieht so aus:
- was danach kam ist dann eigentlich nur noch CSS. Die Strukur, die auf der Website von coolcarousels #63 angeführt ist, habe ich dann an die Contao-Selectoren angepasst und nach meinem Ermessen gestylt. Die Funktionsweise bleibt aber die gleiche.Code:<div id="karu_63_wrapper">
{{insert_article::69}}
<div id="karu_63_overlay">
<div id="karu_63_description">
<h4>Caroufredsel #63</h4>
<p>
Die Idee stammt von der Website von Caroufredsel.
Mehr dazu hier auf der Website zu finden:
<a href="http://coolcarousels.frebsite.nl/c/63/"
title="http://coolcarousels.frebsite.nl/c/63/">
coolcarousels.frebsite.nl/c/63/</a>
</p>
</div>
</div>
</div>
#wrapper ... #karu_63_wrapper
#overlay ... #karu_63_overlay
#desciption ... #karu_63_description
Die Selektoren mit "..._220" sind die von der Erweiterung erzeugten Elemente
Die Navigation habe ich in den BE-Einstellungen eingeblendet. Wobei ich die VOR und ZURÜCK mit position:absolute; wieder "ausgeblendet" habe.
Da die Pagination Teil der Erweiterung ist, und nicht, so wie im Beispiel in der Description mit eingebaut ist, habe ich diese ebenfalls mit position:absolute; erstmal nach links verschoben und mit dem :hover wieder ins Blickfeld geholt.
Hier noch das CSS dazu:
Einige Style-Anweisungen wären nicht notwendig - die musste ich aber machen, weil mein Basis-CSS auf manche Styles Einfluss hatte und ich diesen dann entsprechend entgegen wirken musste (z.B border, border-radius, padding, ...)Code:.ce_caroufredsel.karu_63 img {
border: none;
border-radius: 0px;
}
#karu_63_wrapper {
width: 640px;
overflow: hidden;
position: relative;
}
#karu_63_overlay {
border: none;
width: 200px;
height: 415px;
overflow: hidden;
position: absolute;
top: 0px;
left: -220px;
z-index: 1;
-webkit-transition: left .5s ease;
-moz-transition: left .5s ease;
transition: left .5s ease;
background: #C0C0C0;
padding-top: 20px;
margin-top: 2px;
margin-left: 2px;
}
#karu_63_wrapper:hover #karu_63_overlay {
left: 0px;
}
#karu_63_description {
width: 180px;
margin-left: 450px;
-webkit-transition: margin .5s ease;
-moz-transition: margin .5s ease;
transition: margin .5s ease;
padding: 5px;
}
#karu_63_wrapper:hover #karu_63_description {
margin-left: 0px;
}
#karu_63_wrapper .caroufredsel_wrapper {
margin-left: 0px !important;
-webkit-transition: margin .5s ease;
-moz-transition: margin .5s ease;
transition: margin .5s ease;
}
#karu_63_wrapper:hover .caroufredsel_wrapper {
margin-left: 150px !important;
}
#karu_63_description h4 {
font-size: 14px;
color: #fff;
}
#karu_63_description p {
font-size: 12px;
padding-top: 10px;
color: #fff;
}
#karu_63_description a {
font-size: 12px;
color: #000;
text-decoration: underline;
}
#karu_63_description a:hover {
font-size: 12px;
color: #000;
text-decoration: none;
}
#karu_63_wrapper #caroufredsel_220 {
-webkit-transition: margin .5s ease;
-moz-transition: margin .5s ease;
transition: margin .5s ease;
}
#karu_63_wrapper:hover #caroufredsel_220 {
margin-left: 160px !important;
}
#caroufredsel img {
display: block;
float: left;
}
#caroufredsel_prev_220 {
position: absolute;
left: -99999px;
top: -99999px;
}
#caroufredsel_next_220 {
position: absolute;
left: -99999px;
top: -99999px;
}
#caroufredsel_pagi_220 {
width: 100px;
position: absolute;
top: 200px;
left: -220px;
-webkit-transition: left .5s ease;
-moz-transition: left .5s ease;
transition: left .5s ease;
}
#karu_63_wrapper:hover #caroufredsel_pagi_220 {
left: 10px;
z-index: 10;
}
#caroufredsel_pagi_220 a span {
visibility: hidden;
}
#caroufredsel_pagi_220 a {
height: 10px;
width: 10px;
padding: 0px;
border-radius: 5px;
border: none;
background: #d47f46;
}
#caroufredsel_pagi_220 a.selected {
height: 10px;
width: 10px;
padding: 0px;
border-radius: 5px;
border: none;
background: #d15300;
}
Mag nicht die sauberste Lösung zu sein, aber unterm Strich funktioniert sie.
Bemerkung: warum auch immer, aber im IE7 funktioniert das ganze nicht - aber da funktioniert auch der Slider nicht ... wobei ich fairerweise dazu sagen muss, dass auf der gleichen Seite noch drei andere caroufredsel-Slider (imTest mit unterschiedlichen Einstellungen und Styles) laufen, und die funktionieren. Also tippe ich drauf, dass es irgendwo an den Einstellungen hakt ... (habe ich mir aber (noch) nicht genauer angesehen)
Grüsse
Bernhard
Hallo Bernhard, hallo Dirk,
Erstmal vielen Dank für die klasse Hilfe. Bin jetzt erst dazu gekommen es auszuprobieren, und Bernhard dein Vorschlag hat geklappt. Ich muss zwar noch etwas am CSS schrauben, aber es funktioniert wie im Beispiel.
@Dirk, danke für den Hinweis. Ich hatte die Code Schnipsel im Beispiel schon gefunden und versucht die Stucktur in ein Template einzubauen.
Danke euch noch mal für die Hilfe.
Gruß,
Eike
Hi Bernhard,
Als ich eine zweite Galerie mit der Erweiterung realisiert habe (auf einer andere Seite) war meine Navigation weg. Dabei ist mir aufgefallen, das die ID Nummerierung eine andere geworden ist. Ich habe jetzt alle ..._pagi IDs in Klassen umgewandelt, die Nummerierung weggenommen und die Navigationspunkte sind wieder da. Komisch ist aber das das restliche Layout so geblieben ist.
Diese IDs dienen dazu, daß man das Element individuell mit CSS ansprechen kann. Die ID selbst entspricht der ID des Elements im Backend. Diese ändert sich, wenn du die Elemente z.B. neu anlegst.
Wenn man nicht mehrere Slider parallel einsetzen will, reicht es auch bzw. ist besser nur die entsprechenden Klassen zu gestalten.