dk_caroufedsel - Backgoundslider...FadeBilder erst nach resize "richtig"

[sfx]

Hallo Liebe Contao Community,

ich hänge mal wieder am folgenden prob:

und zwar hab ich dem oben gesagten plugin als Modul für Hintergrund sliding eingesetzt.

Funzt soweit... nur ein problem mit dem resize... wenn ich z.b mein browserfenster auf mobile grösse habe " 800 x 400 z.b) dann wird mir das nächst - fadende Bild nicht richtig skaliert... erst wenn ich neu lade oder neu mein Fenster ziehe.

Habe folgende einstellungen:

Contao 3.11
HTML 5
keine weiteren Plugins .. da neu installation

und folgende Einstellungen im modul.. siehe Anhang !

habe schon alle möglichen einstellungen probiert.... das modul habe ich per Seitenlayout eingefügt ( in hauptspalte.. habe es aber auch schon einmal in eigenem layoutbereich probiert.. ausserhalb des wrappers.. auch ohne erfolg)

[Dirch]

Moin Sfx,

kann ich mir das mal online anschauen? Ohne selbst debuggen zu können ist das nahezu unmöglich zu sehen wo es klemmt. Die Bilder werden neu skaliert/ausgerichtet, wenn der Slider ein resize-Event bekommt. Evtl. bekommt er dieses in diesem Fall nicht? Was passiert wenn du bei "Verhalten bei Größenänderung des Fensters" mal "debounce" verwendest oder es ausschaltest? Abgeschaltet wird dann das Standard-Verhalten des Browsers verwendet.

2 Tips aber vorweg:

- die Größenangaben in der Konfiguration werden alle ignoriert (logisch oder? ). Dachte das irgendwo aufgeschrieben zu haben, aber ich hab's nicht gefunden.
- bei der Startmethode solltest du readyLoad benutzen bzw. besser onDocumentReady, falls du keinen anderen Slider verwendest. Dadurch, daß die Bilder angepaßt werden sollten sie auch in WebKit-Browsern komplett sichtbar sein. Bei onWindowLoad wird der Slider erst gestartet, wenn alle Bilder geladen wurden - was länger dauern kann. Auch kann man sich auf das Eintreffen dieses Events wohl nicht 100% verlassen.

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

[sfx]

Danke für die supaschnelle Antwort,

achso.. darum ändert sich auch nix .. wenn ich in der konfiguration versch. Größenangaben mache.. lol.

also ich hatte on document.ready und readyload auch schon probiert.. leider kein unterschied... und das throttle/debaounce auch.. und jetzt mal abgeschalte... hilft auch nix.

Zwecks Link... kuck mal deine PN bitte :-)

Liebe Grüße und vielen dank das du dich dem Prob widmest !!!

BEST FORUM EVA !!!!

[Dirch]

Ich kann das Verhalten nachvollziehen und hab es auch lokal bei mir so. Warum das so ist muß ich jetzt rausfinden. Jedenfalls ist es eindeutig nicht richtig. Wäre interessant zu wissen, ob es schon immer so war oder erst reinrutschte. Denn an diesem Code-Part habe ich nichts geändert seit er enthalten ist.

Na mal schauen. Wann es korrigiert ist kann ich dir allerdings nicht sagen. Hängt von den Hürden ab, die mir auf dem Weg dahin in den Weg gestellt werden... =) Denke ich werd's aber in den nächsten Tagen hinbekommen.

PS: nun was sollte sich auch ändern durch die Größeneinstellungen, wenn man ein bildschirmgroßes Hintergrundbild sehen will? Das würde das ja ad absurdum führen.

[sfx]

hmm,

hatte mir schon gedacht das dies ein bug von anfang an ist.. da ich auf paar anderen seiten das gleiche phenomän glaub ich endeckte !!

habe da auch mal gelesen ob es vielleicht was mit oncreate: funktion oder onafter: evtl.. zu lösen wäre ?

LG
SfX


PS: das hatte ich gefunden..hat es vielleicht damit was zu tun ?


I had an issue in carouFredsel 6.2.0 where the wrapper that's created updated it's height OK when given height:'variable' in the config, but the actual list of items would be stuck with the height of the first item. This then cropped off any subsequent items that were taller than the first. The updateSizes trigger didn't seem to do anything, so I solved it using the onAfter event;

scroll : {
onAfter : function( data ) {
var carousel_height = $(this).parents('.caroufredsel_wrapper').css('heig ht');
$(this).css('height', carousel_height);
}
}

[Dirch]

Es ist so, daß ich alle Bilder im Hintergrund-Slider bei einem resize-Event anpasse. Wenn der Slider dann scrollt überschreibt das Script dann wohl auch teilweise die Werte, die ich gesetzt habe. Vermutlich muß ich lediglich in der onAfter-Funktion das resize-Event einmal auslösen, damit wieder auf allem das notwendige CSS sitzt und alles ist gut.

[Dirch]

Version 1.2.3 behebt das Problem und kann nun aus dem ER heraus installiert werden.

[comanche]

Version 1.2.3 behebt das Problem und kann nun aus dem ER heraus installiert werden.

Hallo Dirk,

ich habe die Version 1.2.3 installiert und Hintergundbilder werden (immer noch) falsch skaliert, sobald das Browserfenster in Breite/Höhe verändert wird. Hierzu kannst du dir mal meine Testinstallation ansehen:

http://www.calmbach.com/contaodreiei...bg-slider.html

Alle Bilder - bis auf das Zweite von links - haben ungefähr das selbe Seitenverhältnis. Das zweite Bild entspricht dem Header-Bild und ist somit ein starkes Querformat. Jetzt klick mal jedes Thumbnail von links nach rechts durch und ändere nach jedem Bildwechsel die Browsergröße. Du wirst feststellen, dass Bild 2 die Seitenverhältnisse von Bild 1 übernimmt. Dann Bild 3 die Seitenverhältnisse von Bild 2 ... usw. ... Es werden also immer die Seitenverhältnisse des vorigen Bildes übernommen. Zumindest scheint es für mich so zu sein. Nachvollziehbar?

Schönes Wochenende und viele Grüße,
Andreas

[Dirch]

Hallo Andreas,

das Verhalten (war) korrekt, da der Hintergrund-Slider nicht für unterschiedliche Bildgrößen - besonders nicht der Wechsel von Hoch-/Querformat - vorgesehen war. Allerdings habe ich mich in den letzten Tagen erneut sehr intensiv damit beschäftigt und habe zufällig (bevor ich diesen Post las) einen neuen Commit nach Github gepushed, der genau das nachrüstet. Sfx war mein freundlicher Tester/Supporter, der dies nun für gut befand.

Allerdings gibt's bisher keine Einstellung um die zentrierte Ausrichtung der Bilder für die jeweilige Achse auszuschalten. Ja nach Motiven müßtest du das dann manuell im Template rauswerfen, da es sonst Menschen ohne Köpfe beispielsweise geben könnte.

Hier: https://github.com/dklemmt/contao_dk_caroufredsel kannst du die neue Version vorab laden. Wann sie ins ER kommt mal sehen...

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

[comanche]

Hallo Dirk,

danke für die Infos! Du hast natürlich recht, wenn das Mischen von Hoch- und Querformaten als Hintergrund eigentlich keinen Sinn macht. Wir Grafiker können damit problemlos umgehen und die Bilder entsprechend aufbereiten. So mancher Kunde wird damit aber Schwierigkeiten haben, falls er tatsächlich an den Hintergrund-Slides Hand anlegen möchte.

Vielen Dank für deine Mühe! Ich werde mir die aktualisierte Version gleich am Montag ziehen und installieren.

Ich wünsch dir ein schönes Wochenende,
Grüße,
Andreas

[MacPix]

Hallo Leute

Der slider funtionier bei mir gut, wenn ich ihn per margin-top weiter herunter positioniere. Ich würde ihn aber per position:absolute; und top: 270px; positionieren.
Leiter ist dann der slider nicht mehr sichtbar. Er stellt ihrgendwie die breite auf 1px auch wenn im css breite 100% steht.

Was könnte man da ändern??
Ich will ihn so positionieren dass es bei jeden browser gleich ist, denn es git differenzen.

[bird]

Hallo Dirk,

vielen Dank für diese schöne Erweiterung!

Mir sind beim Einsatz 2 Punkte aufgefallen:

1. Ich habe den Slider zum Test mit voller Bildschirmbreite eingerichtet. Unabhängig von der Animationsmethode wird das erste Bild ??teilweise?? genau in der Hälfte des Positioniert, das zweite Bild erscheint dann vollflächig und bei der Wiederholung das erste Bild ebenfalls.

2. Auf dem iPad scheinen die Animationseinstellungen gar nicht zu greifen?

Danke für Dein Engagement!
hangover

[Dirch]

Der slider funtionier bei mir gut, wenn ich ihn per margin-top weiter herunter positioniere. Ich würde ihn aber per position:absolute; und top: 270px; positionieren.
Leiter ist dann der slider nicht mehr sichtbar. Er stellt ihrgendwie die breite auf 1px auch wenn im css breite 100% steht.

Man darf KEINE absolute Positionierung verwenden auf die Slides. Wie sollte er dann technisch noch funktionieren? Evtl. mußt du die absolute Positionierung dann auf einen äußeren Container setzen - caroufredsel_skin oder ce_caroufredsel. Evtl. geht sogar auch der caroufredsel_wrapper.

Was für Differenzen gibt es denn?

[Dirch]

Hallo Dirk,

vielen Dank für diese schöne Erweiterung!

Mir sind beim Einsatz 2 Punkte aufgefallen:

1. Ich habe den Slider zum Test mit voller Bildschirmbreite eingerichtet. Unabhängig von der Animationsmethode wird das erste Bild ??teilweise?? genau in der Hälfte des Positioniert, das zweite Bild erscheint dann vollflächig und bei der Wiederholung das erste Bild ebenfalls.

2. Auf dem iPad scheinen die Animationseinstellungen gar nicht zu greifen?

Danke für Dein Engagement!
hangover

Hallo hallo,

zu 1: ohne es mir anschauen zu können kann ich dazu nicht mehr sagen. In der Regel stimmt dann etwas am CSS nicht oder einer Kombination von Einstellung und CSS.

zu 2: mangels iPad kann ich dies nicht testen, aber ich weiß daß die Animationen dort funktionieren. Hast du einen Link zu der Seite? Dann könnte ich das testen lassen. Welche Animationen hast du denn benutzt? Gab es beim Laden evtl. nen Fehler? Der Slider benutzt entweder jQuery- oder CSS-Animationen. Je nachdem wie man ihn im BE konfiguriert hat. Also nichts hausgemachtes.

Beste Grüße...
...Dirk