Verständnisprobleme mit den Einstellungen

Ich blicke nicht mehr durch bei der Konfiguration von carouFredSel. Vor längerer Zeit hatte ich mal einen Slider als Modul zum Laufen gebracht. Damals habe ich meine Inhaltselemte (Bild) mit Umschlag-Anfang und -Ende bei der Konfiguration eingetragen. Jetzt will ich aber was anderes realisieren. Ich brauche eine Galerie mit Vorschaubilder-Karussel. Ich will unten immer 3 Vorschaubilder haben und einfach alle Bilder eines Verzeichnisses im Karussel haben. Die Bilder habe ich deshalb jetzt nicht in der Konfiguration hinterlegt sondern im Inhaltselement carouFredSel-Galerie. Da es nicht funktioniert hat (es wird nichts angezeigt, keine Thumbnails, kein Bild zu sehen), habe ich für den Anfang die Vorschaubilder rausgenommen um die Sache erst mal zu vereinfachen. Der Quelltext sieht dann so aus:

HTML-Code:

---

<div class="ce_caroufredsel_gallery last block">
<div class="caroufredsel_skin" id="caroufredsel_skin_6">
<div class="caroufredsel" id="caroufredsel_6">
<div class="caroufredsel_gallery" id="caroufredsel_gallery_6_0">
<figure class="image_container">
<img src="files/applaus/bilder/impressionen/restaurant_1.jpg" width="332" height="500" alt="restaurant 1">
</figure>
</div>
<div class="caroufredsel_gallery" id="caroufredsel_gallery_6_1">
<figure class="image_container">
<img src="files/applaus/bilder/impressionen/restaurant_2.jpg" width="500" height="332" alt="restaurant 2">
</figure>
</div>
<div class="caroufredsel_gallery" id="caroufredsel_gallery_6_2">
<figure class="image_container">
<img src="files/applaus/bilder/impressionen/restaurant_3.jpg" width="500" height="332" alt="restaurant 3">
</figure>
</div>
<div class="caroufredsel_gallery" id="caroufredsel_gallery_6_3">
<figure class="image_container">
<img src="files/applaus/bilder/impressionen/restaurant_4.jpg" width="500" height="332" alt="restaurant 4">
</figure>
</div>
<div class="caroufredsel_gallery" id="caroufredsel_gallery_6_4">
<figure class="image_container">
<img src="files/applaus/bilder/impressionen/restaurant_5.jpg" width="332" height="500" alt="restaurant 5">
</figure>
</div>
</div>
<div class="clearfix"></div>
<div class="caroufredsel_controls" id="caroufredsel_controls_6">
<div class="caroufredsel_navi" id="caroufredsel_navi_6">
<a class="caroufredsel_prev" id="caroufredsel_prev_6" href="#"><span>Zurück</span></a>
<a class="caroufredsel_next" id="caroufredsel_next_6" href="#"><span>Vorwärts</span></a>
</div>
</div>

---

Allerdings bekomme ich nichts angezeigt, weil die Breite bei allen Elementen 0 ist und die Höhe auch zu klein. Was muss ich denn da wo eingeben, wenn ich eine prozentuale Breite und Höhe für den Anzeigebereich der Bilder haben will? Muss ich das über CSS machen oder geht das in der Konfiguration? Bei "Größe des Karussells" habe ich für die Breite "flüssig" eingegeben und 50%. Höhe "automatisch". Welchem Element muss ich die Größe und Position des gewünschten Anzeigebereichs zuweisen?

Hm, das Problem mit der Höhe habe ich geklärt, der Fehler saß mal wieder vor dem Bildschirm. Ich bekomme jetzt also die Bilder angezeigt. Aber ich bekomme den Slider und die Bilder darin nicht so positioniert wie ich will. Leider habe ich da Hochformat und Querformat gemischt anzuzeigen. :rolleyes:

Das Ziel wäre, die Bilder in einem quadratischen Bereich anzuzeigen, der horizontal immer mittig sitzt, vertikal bei einer definierten, festen Position (in Pixel) anfängt und eine "flüssige" Breite und Höhe von 40% hat. Die Bilder sollten darin jeweils mittig sitzen, also im Prinzip alle Bildmittelpunkte immer an der gleichen Position, horizontal in der Mitte, vertikal an einer festen Pixelposition. Ich puzzle jetzt schon stundenlang dran herum, aber irgendwie bin ich zu müde und die Parameter sind zu viele und die Container auch :(. Hat sowas schon mal jemand gemacht? Ich gehe eigentlich stark davon aus, dass das kein so seltener Anwendungsfall sein wird.

Hallo tab,

wenn du mit Polyfill arbeitest (siehe Lösung von Spooky: https://community.contao.org/de/show...ges-(Polyfill)), dann sollte die Ausgabe der quadratischen Bilder kein Problem sein. Der Ausschnitt läßt sich ja zentrieren und du kannst über die Bildeinstellungen "wichtiger Teil" auch problemlos individuelle Ausschnitte für jedes Bild definieren.

Die Größe der Karussell-Bilder sind dann ausschließlich über die Bildeinstellungen des Themes definiert und das Karussell stellst du "responsive" ein, so dass sich die bildumschließenden Container dem Bildinhalt anpassen.

Grüße,
Andreas

Ich komme immer bis ca 5mm vors Ziel, dann geht nichts mehr. Ich komme nicht mehr weiter. Mit den ganzen automatischen Einstellungen hat es leider nicht funktioniert, das habe ich in den letzten Tagen recht ausführlich ausprobiert. Die automatischen Höhen und Breiten der Bilder haben nicht gepasst. Den Bildausschnitt kann ich wählen, das funktioniert. Aber der Rest scheint nur zu funktionieren, wenn er gerade Lust hat. Eventuell beisst es sich auch mit der Colorbox, die ich jetzt zur Anzeige des großen Bilds nehme (Im Inhaltselement "Großansicht/neues Fenster" angehakt). Solange ich noch nicht mal eine Galerie so positioniert und in der Größe so hinbekomme, wie ich es brauche, muss ich keine zwei davon haben. Ich verwende momentan das Inhaltselement "CarouFredSel - Galerie". Sollte ich lieber mit den Umschlägen arbeiten? Für den Kunden wäre die Galerie sicher angenehmer in der Handhabung. Vielleicht liegt es ja auch daran, dass nicht nur ein Bild angezeigt werden soll. Da habe ich auch einige Hinweise gefunden in Threads, dass es damit eventuell manchmal Probleme gibt. Oder an den Margins der image_container. Keine Ahnung, Dirk hat gelegentlich auch mal Fehler im eigentlichen Skript als Ursache für manche Merkwürdigkeiten vermutet.

Jedenfalls bin ich in meiner Verzweiflung dann dazu übergegangen, alle Automatismen abzuschalten soweit möglich, alle Bildgrößen fest (über wichtigen Bereich), Breite des Karussells fest, Höhe fest, Elementhöhe und -breite fest. Ich hatte es schon mal fast soweit, aber dann klicke ich ein paar Bilder in der Colorbox durch, schliesse sie und habe (nicht immer) hinterher verschobene Bilder bzw größere Zwischenräume und ein Bild wird dadurch schmaler. Das kann ich so nicht ausliefern. Auslieferung war eigentlich gestern, nach bereits zweimaliger Verschiebung wegen dieser Probleme. Mir gehen langsam die Ausreden aus und ich fange wieder an, nach Alternativen zu suchen. Gibts aber wohl keine, oder sind jedenfalls als Contao-Erweiterung dünn gesät. wenn ich jetzt nicht auch noch mit jQuery anfangen will. Ich hatte echt nicht vermutet, dass es mir nicht gelingt, die jeweils drei Karussellbilder an fixen Positionen mit fixer Größe und fixem Abstand dazwischen zu positionieren.

Edit: Mit Responsive Images hatte ich noch gar nichts probiert. Solange es mit ganz normalen Bildern noch nicht mal hinbekomme ...

Manchmal hilft es schon, die Probleme aufzuschreiben. So bin ich darauf gekommen, doch erst mal den Haken raus zu machen bei der "Großansicht". Und siehe da, das Karussel mit den Vorschaubildern funktioniert! Großansicht wieder angehakt -> (Vorschau)Bilder beim Schliessen der Colorbox verschoben! Irgendwelche JS-Fehler sehe ich aber nicht in der Konsole, die ColorBox scheint da irgendwas zu verstellen beim Schliessen :confused:.

Edit: Da scheint tatsächlich was nicht richtig miteinander verträglich zu sein zwischen dk_caroufredsel und der Colorbox. Als Notlösung habe ich jetzt einfach mal die Mediabox eingebaut. Unschön natürlich, weil ich so jQuery und Mootools benutzen muss. Aber jedenfalls funktioniert das nach ersten Tests ohne ersichtliche Fehler. Zumindest für die Präsentation morgen muss es das eben tun. Dann sieht man weiter.

Zitat:

---

Zitat von tab

Manchmal hilft es schon, die Probleme aufzuschreiben. So bin ich darauf gekommen, doch erst mal den Haken raus zu machen bei der "Großansicht". Und siehe da, das Karussel mit den Vorschaubildern funktioniert! Großansicht wieder angehakt -> (Vorschau)Bilder beim Schliessen der Colorbox verschoben! Irgendwelche JS-Fehler sehe ich aber nicht in der Konsole, die ColorBox scheint da irgendwas zu verstellen beim Schliessen :confused:.

Edit: Da scheint tatsächlich was nicht richtig miteinander verträglich zu sein zwischen dk_caroufredsel und der Colorbox. Als Notlösung habe ich jetzt einfach mal die Mediabox eingebaut. Unschön natürlich, weil ich so jQuery und Mootools benutzen muss. Aber jedenfalls funktioniert das nach ersten Tests ohne ersichtliche Fehler. Zumindest für die Präsentation morgen muss es das eben tun. Dann sieht man weiter.

---

Hierzu habe ich mittlerweile neue Erkenntnisse. Das Problem hängt damit zusammen, dass die ColorBox per Default nach dem Schliessen den Fokus an das dargestellte / aufrufende Bild zurückgibt. An und für sich eigentlich genau das Verhalten, das hier ideal wäre, das aber bei der Mediabox auch nicht passiert. Ich habe nun mal bei der ColorBox im Template "returnFocus: false" als Custom Option hinzugefügt. Damit hat auch das Verschieben der Vorschaubilder im Karussell ein Ende. Also kann ich hier jetzt wieder die ColorBox benutzen anstatt der MediaBox.