Druckbare Version
Liebe Community,
ich such mir hier schon ewig den Wolf, ist es möglich, eine slideshow zu installieren, die Bilder und Texte transportiert? Als Beispiel:Anhang 9364
Wenn man auf das Quadrat klickt, ändern sich Text und Bild. Klick man auf eines der Bilder, geht eine Lightbox auf.
Es wäre schön, wenn mir jemand helfen könnte!
Katja
Hallo Katja,
für Contao 3 könntest du dir mal den dk_caroufredsel (https://community.contao.org/de/foru...k_caroufredsel) anschauen. Damit kannst du beliebige Inhaltselemente scrollen und auch die Schwierigkeit, daß die Pagination unter den Bilder ist und der Text darunter läßt sich mit einem kleinen Trick so machen (2 Slider synchronisieren).
Für Contao 2.11.x hab ich sonst den ce_slider verwendet, aber hier müßte dann die Pagination ganz unten stehen (also unter dem Text).
Grüße...
...Dirk
Lieben Dank!
Ich habe diese Slidergeschichte auf insgesamt drei Seiten, wären also 6 Slider, das Ganze in 4 unterschiedlichen Sprachen. Wäre das hiermit dennoch zu lösen? Und läuft das dk_caroufredsel auch auf 2.11.7? Wenn ich jetzt den 3er installiere und es funktioniert nicht, könnte ich noch die andere Variante probieren, ohne alles neu zu installieren. Und kann man die einzelnen Grafiken dann mit einer Lightbox öffnen?
LG, Katja
Zumindest diese beiden Slider werden bei den Inhalts-Elementen wie z.B. das Akkordeon verwendet. Du definierst zwei Wrapper-Elemente und alles darin wird in jeweils ein "Slide" umgewandelt. Was du für Inhalte hast und wie sich diese verhalten (also ob ein Link auf eine Seite verweist oder etwas in einer Lightbox öffnet) ist vom Slider an sich unabhängig, sondern nur wie du die Inhalte anlegst. Du kannst z.B. auch ganze Artikel einbinden und Sliden lassen. Beim Einsetzen einer Lightbox zur Vergrößerung sollte man den Slider dann nur nicht automatisch laufen lassen. :)
Von daher ist das mit der Anzahl und der Sprache kein Problem - weil es nur von deinen hinterlegten Inhalten abhängt. Nur wenn du mehr als einen Slider auf einer Seite brauchst muß man schauen, ob das unterstützt wird. Beim dk_caroufredsel ja, beim ce_slider weiß ich es nicht genau.
dk_caroufredsel gibt es nur für Contao 3 und ich glaube nicht, daß ich eine Version für ältere Versionen noch anpasse. C3 funktioniert soweit gut, aber ich würde es nur dann produktiv einsetzen, wenn alles was ich an Erweiterungen brauche auch dort zur Verfügung steht. Hängt also von dem Umfang/Komplexität deiner Seite ab.
Super, echt lieb, deine ausführlichen Erklärungen. Aber wenn ich zwei Slider synchronisiere, müsste ich die Quadrate doch irgendwie übereinander legen, damit beim Klicken beide Elemente weiterlaufen, oder? So ganz kann ich mir das noch nicht vorstellen.:-(
Nee nicht so ganz. Das würde auch nur beim dk_croufredsel funktionieren, weil das JavaScript diese Funktion beinhaltet. Du legst dazu 2 Slider untereinander an. Der erste bekommt die Pagination eingeblendet. So wie ich es sehe sollen da immer 3 Bilder sichtbar sein und gescrollt werden. Das kannst du so konfigurieren. Der zweite Slider hat dann keine Pagination und wird über JavaScript mit dem ersten synchronisiert - da müßte man ins Template nur eine Zeile Code eintragen. Dann scrollt der untere Slider, wenn der obere scrollt ebenfalls.Zitat:
Zitat von katnow
Wenn die Position der Pagination nicht sooo wichtig ist und auch unter dem Text stehen darf wird es einfacher. Dann brauchst du nur 1 Slider. Hier mal ein Beispiel von einer Seite wo ich komplexeren Inhalt je Slide hatte. Dort hab ich die Erweiterung Spaltenset benutzt und für jeden Slide einen eigenen Artikel angelegt und diesen dann in einem Text-Element mit Insert-Tag (ce_slider ist da etwas buggy) mit Verweis darauf eingebunden: http://www.der-kleine-gartenzwerg.de Wenn du immer 3 Bilder hast und einen Text darunter könntest du das ähnlich machen.
Letztlich ist es gar nicht so schwer. Am besten du installierst dir einen Slider und schaust dir das erstmals nur mit scrollenden Bildern an. Wichtig ist eher die Überlegung, ob du C3 oder C2 nimmst. Davon hängt dann ab wie du es umsetzen kannst und welche Kompromisse du eingehen mußt.
Ich installiere jetzt erstmal SlideITMoo mit 2.11.7, wenn das nicht klappt, deine Erweiterung auf C3. Wo sind die Zeiten der harmlosen und einfachen Webseiten hin?:-)
So, dass klappt natürlich alles nicht, wie ich mir das vorgestellt habe. Würde sich denn dK_caroussell mit jquery beißen, welches ich für den BGstretcher benötige?
Nein, denn dk_caroufredsel ist auch für jQuery und ist so gemacht, daß es sich mit nichts anderem in die Quere kommt. Falls doch, dann ist das unbeabsichtigt und ich kann das schnell ausbessern.Zitat:
Zitat von katnow
Allerdings kann ich dir auch nicht versprechen, daß es genau so klappt wie du dir es vorgestellt hast (vielleicht ist das ziemlich ausgefallen? ;)), aber eigentlich müßte man mit den meisten Slidern (die für mehr als nur Bilder sind) alles hinbekommen. Oft muß man nur Inhalte etwas anders einbinden.
hallo katnow,
ich habe auf meiner seite keine probleme mit dK_caroussell und BGstretcher, siehe hier. Verwende für den Newsticker eine zweite dk_caroussell instanz
LoneRider: Hast du das mit C3 oder mit C2 installiert?
Hallo Katnow, das ist mit C3
Skaliert der BGStretcher die Bilder auch kleiner?
Kann ich dir nicht sagen, hab die Bilder über die Dateiverwaltung von Contao hochgeladen. Hab sie in einer Größe von 800 x 600 und das skaliert BGstretcher hoch
Wenn ich jetzt unterhalb des Bildes, welches der BGstretcher skaliert noch einen Footer haben möchte, geht das überhaupt? Der hat doch gar keinen Punkt, an dem er sich orientiert, oder bin ich jetzt nur noch dumpf im Hirn?
BGstretcher skaliert das Bild, man möge mich korigieren wenn es nicht stimmt, immer über den ganzen Bildschirm.
Ich kenne keine Möglichkeit direkt unter dem Hintergrundbild einen Footer einzurichten.
Mir verschließt sich momentan auch der Grund, warum man dies machen sollte.
... weil man sowas gerne hätte...:-) Anhang 9385
Nun ich habe mir den bgStretcher nicht angeschaut, aber das Bild wird dort vermutlich so gehandhabt wie wenn man <body> eines zuweist. Von daher liegen alle Inhaltselemente darüber.
Dein Footer ist doch nicht so hoch wäre es da schlimm wenn die geschätzten 20-25 Pixel das Hintergrundbild an dieser Stelle verdecken? Würde wahrscheinlich gar nicht auffallen... :)
Nein, das wäre überhaupt nicht schlimm, aber ich krieg das nicht positioniert, weil ich nicht weiß, welchen Ansatzpunkt ich nehmen soll. Ein normaler Footer hängt irgendwo in der Mitte, wrapper funktioniert auch nicht.:-(
Ach ja jetzt verstehe ich. Such mal nach Sticky Footer hier im Forum oder generell. Du mußt die fe_page anpassen und den Footer dort anders platzieren. Dann hängt er immer unten am Rand egal wie groß das Fenster ist.Zitat:
Zitat von katnow
Das mache ich, vielen Dank!! Schneidet er bei dir auch einen oberen Teil des Bildes ab?
Ok, dass ist ein Argument ;)Zitat:
Zitat von katnow
Vielleicht hilft das weiter http://de.contaowiki.org/Footer_am_u..._positionieren
Naja, weil der Kunde das so gerne hätte.:-) Ich probiere es mal aus, vielen Dank! Im Moment hänge ich noch an dem BGStretcher. Er skaliert die Bilder nicht wirklich, sondern wenn ich es größer ziehe, verliere ich ganz viele Elemente. Wenn ich es kleiner sehe, ist alles drauf. Die Auflösung des Bildes ist 1688 x 1027, aber auch mit einer kleineren funktioniert es nicht. Ich dachte, solche Erweiterungen machen das Bild einfach nur größer, behalten aber alles. Wenn ich aber die Elemente drauf setze, sind sie bei kleiner Auflösung unverhältnismäßig groß. Oder mache ich etwas falsch?
http://www.kenco.be/contao/index.php...nkt-kerze.html
Ob du was falsch machst kann ich dir nicht sagen, aber Ich habe dir wohl falsche Inforamtionen gegeben.
habe grade in den Quelltext geschaut, und gesehen, du verwendest den Easy background stretcher. Ich kenne dieses Plugin nicht aber laut BEschreibung sollte er genau das machen was du wolltest
Auf meiner Seite verwende ich aber das Plugin super_bg_image_pagetree.
Sorry, wenn ich dir hier falsche Auskünfte gegeben habe.
Hallo,
ich habe jetzt den DK carouFredSel installiert, klappt auch alles prima. Sehe ich das richtig, dass man die Galerie nur über ein Modul einbinden kann und nicht über Artikel?`Heißt, bei meinen benötigten 15 Galerien müsste ich 15 Module bzw. 15 Layouts anlegen?
LG, Katja
Module kann man dann als Content Element einfügen.
Dazu beim Content Element anlegen einfach mal 'Mudul' auswählen. Da kann man dann aus den Modulen auswählen ;-)
Da brauch man also nicht so viele Seitenlayouts.
Viele Grüße
Huhu Katja,Zitat:
Zitat von katnow
nein man kann die "Galerie" über ein Modul oder ein Content-Element einbinden. Wenn man das z.B. im Header einbindet, bietet sich ein Modul an, in einem Artikel das entsprechend als CE. Das mit dem CE funktioniert genauso wie beim Akkordeon. Es gibt schon ein angefangenes Handbuch im Wiki zu dem Slider (http://de.contaowiki.org/Dk_carouFredSel). Die Bilder/Inhalte beim CE werden auch entsprechend zwischen dem Start- und Stopp-Element platziert. Nur für das Modul mußt du sie in den Slider-Einstellungen hinterlegen, da die Implementation sonst nicht weiß woher sie die Inhalte nehmen soll.
Start-Element
Bild 1
Bild 2
...
Bild X
Stop-Element
Und in den Einstellungen angeben, daß du nur 3 Bilder sehen willst. Dann noch Breite/Höhe für die Bilder und den Slider selbst festlegen und das sollte es zumindest für die Bild-Rotation gewesen sein.
Wenn du dich entscheidest, daß die Pagination auch unter dem Text stehen darf/kann/soll, dann ist das Hinterlegen der Bilder etwas komplizierter, da der Slider für jedes Element ein Slide generiert. Hier erstellst du dann einen eigenen Artikel pro Slider-Element und bindest diesen dann mit Artikel-einbinden ein. So hast du z.B. für 5 Slides, 5 Artikel (die nur den Slide enthalten mit all seinen Inhalten).
Wenn die Pagination unter den Bildern stehen soll und der Text darunter, mußt du einen weiteren Slider definieren. Genauso wie den ersten, allerdings stellst du ein, daß nur ein Element sichtbar ist und auch nur 1 Element gescrollt werden soll. Dann mußt du das js_caroufredsel kopieren, neuen Namen vergeben und so etwas dann dort eintragen (später auch das geänderte Template in dem Start-Element auswählen, aber nur bei dem Element mit den Bildern):
Feinarbeiten sind dann sicher noch notwendig, aber im Groben sollte es das gewesen sein.PHP-Code:echo ($oComma == true ? ', ' : '') . 'synchronise : "#caroufredsel_ID"';
$oComma = true;
Grüße...
...Dirk
He, lieben Dank! Es sieht jetzt so aus....http://www.kenco.be/contao/index.php...legenheit.html und ich bin zufrieden. Jetzt muss ich nur noch die Zahlen durch meine Vierecke ersetzen.:-( Gibt es einen gehiglighteten Bereich oder ist das nur eine Zahlenreihe? Klappt das mit active oder so? Ich habe es bei dir an einem Beispiel gesehen, da liefen graue Quadrate durch, theoretisch sollte es also klappen.:-)
Das geht doch über background-image ganz gut. Die Texte kannst du auch noch durch Pfeile ersetzen oder ausblenden bzw. den Text als solches ändern - prev/next sind eigentlich nur Platzhalter. Wegen der Gestaltung kannst du auch auf seiner Seite schauen: http://caroufredsel.dev7studios.comZitat:
Zitat von katnow
Du solltest jedoch bei Breite und Höhe nicht variabel und automatisch verwenden. Da du feste Größen hast, solltest du diese auch angeben. Also bei der Gesamt-Breite xxx Pixel und bei der Element-Höhe und Breite auch den festen Wert. Diese variablen/automatischen Größen funktionieren in manchen Kombinationen nicht in allen Browsern gut (ist wohl noch nen Bug im Slider). Bei Webkit-Browsern schrumpfen die Bilder daher in der Höhe nur auf so 20 Pixel, was nicht so schön ist... =)
Bei fest in beiden Bereichen, automatisch oder flüssig schneidet er mir Teile von den Bildern ab, feste Höhe und variable Breite geht am besten.
Reicht es nicht, wenn ich .pagination in mein CSS kopiere? Nein, es reicht nicht, weil sich überhaupt nichts tut. Muss ich das js dazu ändern? Sorry wegen der doofen Fragerei....
Man muß dann die richtige Größe noch bestimmen - also Bildgröße mit den Margins/Paddings und diesen Wert dann nehmen. Wenn es horizontal mit fest nicht paßt, ist der verfügbare Platz für die eingestellte Größe zu klein. Du willst 540px darstellen hast aber nur für 500px platz. Das paßt dann natürlich nicht. Du solltest auch statt einem Pudding-riggt (das muß ich jetzt mal von der (nervenden) Autokorrektur einfach stehen lassen ;)) von 30px, lieber ein padding left und right von 15px machen. "variable" Breite ist eigentlich dafür gedacht, daß der Slider wachsen und schrumpfen darf, wenn die Elemente als solches unterschiedlich Breiten haben. Aber du kannst es auch so stehen lassen, wenn es klappt.Zitat:
Zitat von katnow
Für CSS müßtest du so was machen:
Dann entsprechend Bilder eintragen und Größen anpassen. .pagination geht nicht, weil die Klassen anders heißen ;)PHP-Code:.caroufredsel_pagi {
text-align: center;
}
.caroufredsel_pagi a {
background: url(files/.../xxx.png) no-repeat transparent;
width: 15px;
height: 15px;
margin: 0 5px 0 0;
display: inline-block;
}
.caroufredsel_pagi a.selected {
background: url(files/.../xxx.png) no-repeat transparent;
cursor: default;
}
.caroufredsel_pagi a span {
display: none;
}
Geht nicht.:-( Ich habe das jetzt in die CSS-Datei eingegeben:
.caroufredsel_pagi {
text-align: center;
}
.caroufredsel_pagi a {
background: url(files/kenco/layout/quadrat_aktiv.jpg) no-repeat transparent;
width: 14px;
height: 14px;
margin: 0 5px 0 0;
display: inline-block;
}
.caroufredsel_pagi a.selected {
background:url(files/kenco/layout/quadrat_passiv.jpg) no-repeat transparent;
cursor: default;
}
.caroufredsel_pagi a span {
display: none;
}
Also, wie du geschrieben hast. Wenn der letzte Befehl aktiv ist, kommt gar nichts mehr, ansonsten die beiden Zahlen. Muss ich die Klasse noch mal im Modul oder im Artikel angeben? Die wird doch eigentlich über das Template abgefragt, oder? Ich verstehs einfach nicht...:-((
Prinzipiell stimmt es ja schon. Wenn du mit dem Element-Inspektor oder Firebug dir das anschaust siehst du, daß die Bilder dort platziert würden. Bei mir gibt es bei den Bildern einen Fehler, daß er sie nicht findet. Da stimmt der Pfad dann nicht.
Nein du mußt nirgendwo sonst etwas ändern. Im Template wird nur die HTML-Struktur mit den CSS-Klassen generiert. Und diese Klassen kannst (und mußt) du dann an beliebiger Stelle gestalten. (Also entweder in einer externen CSS-Datei oder dem Contao internen CSS-Tool). Das Gestalten kann dir die Erweiterung auch nicht abnehmen (nur den Rahmen dafür herstellen), weil das idR alles individuell ist. Wird aber zukünftig auch noch nen richtiges Skin geben für Standard-Sachen - wenn man nichts individuelles braucht.
Tausend Dank für deine geduldige Hilfe!!!!
Wenn du magst, leg mir einen User an und schick mir die Daten per PM. Ich schau mal rein in dein Projekt und keine Angst ich mach nix kaputt ;)Zitat:
Zitat von katnow
Ich weiß, dass du nix kaputt machst...:-) Ich bin auf das einfachste nicht gekommen, nämlich .../.../ und schon hats funktioniert!!! Puuh, vielen lieben Dank nochmal!!!
Hi,
ich habe eine Schwierigkeit mit der Lightbox innerhalb einer Slideshow. Wenn ich sie öffne, wird alles dunkel außer dem Menü. Weiß vielleicht jemand, woran das liegen könnte? Das wäre toll!!
http://www.kenco.be/contao/index.php...ekoration.html (sind nur Testbilder:-))
Katja
Hi Katja,
gerade getestet unter Mac mit FF17, Safari, Chrome - links und rechts geht das Bild innerhalb der Lightbox auf. Mitte scheint nicht verlinkt zu sein.
Siehst Du keine Bild? Welcher Browser/Betriebssystem?
Hi Stefan, ich sehe das Bild und auch die Lightbox, aber der Hintergrund wird nicht komplett dunkel, das Menü leuchtet wie ne Boje aus dem ganzen raus. Ff, Windows7, ist aber auf den anderen Browsern auch so. Hast du vielleicht eine Idee?
Hallo katnow,
du hast dem #mainmenue einen irrsinnig hohen z-index von 2147483647 gegeben... kein Wunder, das die Lighbox nicht darüber liegt, wenn du das so anordnest, das es auf der z-Achse so hoch liegt. Gib dem mal einen sinnvolleren (niedrigeren) Wert. Wenn ich z-index brauche, dann versuch ich da in 10er Schritten zu arbeiten.. dann komm ich in der Regel nicht über 100. Es hilft niemals so einen hohen Wert zu vergeben, es sei denn du weißt nicht was für z-index noch auf der Seite benutzt wird (und das ist bei einer eigenen Seite eher unwarscheinlich *g*).
Viele Grüße
WIE COOL IST DAS DENN? Da wäre ich in 100 Jahren noch nicht drauf gekommen.... super, vielen Dank!!!!
Na, bei sowas hilft firebug ganz gut ;-)
'Element untersuchen' anklicken bei der Navi und dann mal mit den Werten spielen (heißt oft genug auch mal einfach auszuschalten um zu gucken was dann passiert). Mehr steckt da eigentlich nicht hinter bei so einer Fehlersuche ^^
Viele Grüße
Ich habe Firebug nicht verstanden.:-( Wenn ich es aufrufe und dann bestimmte Teile der Homepage unterlege, reagiert nix. Aber es gibt bestimmt ne Anleitung im Netz, da werde ich mich in den fröhlichen Tagen mal durchwuseln. Danke nochmal!
Du kannst einfach einen rechtslick über einem Element machen, was du dir genauer anschauen möchtest und da dann 'Element mit Firebug untersuchen' anklicken. Dann geht der in den meisten Fällen direkt im Quellcode da hin wo man hin möchte und zeigt einem die passenden Werte.
Das ist dann aber auch wieder nur ein Möglichkeit den zu nutzen. Am besten guckst du wirklich mal im Netz. Gibt soweit ich weiß auch ein paar Videos auf Youtube zu der Bedienung.
Viele Grüße
Hallo Katja, ich will eine ähnlich slide gallery machen, aber ich hab Schwierigkeiten ÜBERHAUPT den Bildern die lighbox funktion zu zuordnen :rolleyes:Zitat:
Zitat von katnow
Beim suchen in welchem template ich die lighbox funktion selber einfügen könnte, fand ich das die lighbox offenbar und irgenwie angesprochen wird, nur ich finde nix in der Modulbedienung.
Verrätst Du wo die Einstellung gefunden hast, wie Du das gemacht hast?PHP-Code:$intMaxWidth = (TL_MODE == 'BE') ? 640 : $GLOBALS['TL_CONFIG']['maxImageWidth'];
$intMaxImageWidth = 0;
$intMaxImageHeight = 0;
$strLightboxId = 'lightbox[lb' . $this->id . ']';
LG dtptiger