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:
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>
- 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.
#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:
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;
}
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, ...)
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
dk_caroufredsel anpassen
Zitieren
Lesezeichen