Slideshow automatisch an Grösse des Bildschirms anpassen ?

Hallo zusammen

Ich habe eine RockSolid Slidshow in einer Homepage eingebaut. Diese ist jedoch fix auf eine Grösse ausgerichtet.
Kann ich diese auch dynamisch vorbereiten und steuern, dass es jeweils auf die Grösse des Bildschirms automatisch angepasst wird ? Also bei einem 17" Bildschirm automatisch grösser dargestellt wird als bei einem 15" ?

Die Slideshow geht aktuell über den ganzen Bildschirm, erst beim Scrollen sieht man weiteren Text. Dies ist aktuell auf den 15" ausgerichtet, beim 17" sieht man dann eben doch schon wieder Abschnitte des Textes unten, was nicht so sexy aussieht.

www.loeffler-web.ch/tao ist meine Spielwiese, da kann man das gut sehen.

Vielen Dank für euren wertvollen Input.

Grüsse
Michi

Zitat:

---

Zitat von Michi Löffler

Ich habe eine RockSolid Slidshow in einer Homepage eingebaut. Diese ist jedoch fix auf eine Grösse ausgerichtet.
Kann ich diese auch dynamisch vorbereiten und steuern, dass es jeweils auf die Grösse des Bildschirms automatisch angepasst wird ? Also bei einem 17" Bildschirm automatisch grösser dargestellt wird als bei einem 15" ?

---

Davor würde ich eigentlich ausgehen, sofern beide Bildschirme die gleiche Auflösüng haben.

Hallo Tab

Danke für den Hinweis, habe dies gerade an einer bestehenden Seite versucht (www.salt.ch). Habe da die Auflösungen geändert und dies auf einem 15" und 17" Bildschirm getestet. Das Bild, welches man auf der Einstiegsseite sieht passt sich von Auflösung zu Auflösung und von Bildschirmgrösse zu Bildschirmgrösse automatisch an. Mit welchen Einstellungen kann ich dies beim Slider entsprechend steuern ?

Danke und Grüsse
Michi

Ich kenn den Rocksolid-Slider nicht, hab aber mal Verschiedenes mit Firebug probiert, um hinter seine Funktionsweise zu kommen. Wie Du gern hättest, ist das nach meinem Eindruck höchstwahrscheinlich nicht hinzubekommen, weil der ganz anders arbeitet, als er dafür sollte.

Um die Formatierung im responsiven Layout sagen wir mal von 320 bis ca. 2.400px möglichst optimal zu skalieren, sollte zunächstmal das Format der Bilder gut darauf abgestimmt sein. 2000 x 500 px bzw. das Verhältnis 4:1 eignet sich recht gut. Wenn man dann den Images width:100% und height:auto mitgibt und dem äußeren Slider-Container garkein Format, richtet sich die Darstellung nur nach der Imagegröße. Kannst Du Dir als Beispiel auf einer meiner Seiten mal anschauen, wie das aussieht, wenn Du die Browserfenstergröße von sehr klein bis sehr groß veränderst: khw-netz.de

Kann man auch anders proportionieren, aber eines ist klar - bei 100% Breite muss die Höhe immer automatisch sein, damit die Bilder nicht verzerrt angezeigt werden. Das bedeutet, je mehr Pixel das Originalbild in der Breite hat, um so niediger wird es angezeigt. Und umgekehrt. Daran ist nichts zu ändern. Machst Du es zu breit, wirds in kleinen Viewports nicht hoch genug. Oder Du legst die Bilder in Überbreite an mit verzichtbaren Randbereichen und gibst Ihnen per Mediaquery bei schmalem Viewport über 100% Breite, z. B. 120 und dem Container overflow:hidden. Dadurch kannst Du es so gut variieren, dass die Höhe bei jeder Auflösung optimal ist.

So funktioniert Dein Slider aber eben nicht. Da überschreibt anscheinend Javascript dynamisch die Bildgröße. Mit Firebug sieht man, dass es Inline-CSS ist, also wahrscheinich im DOM überschrieben wird. Dagegen ist kein Kraut gewachsen. Nichtmal mit Verwendung des !important Attributs. Außerdem wird den meisten beteiligten Elementen eine feste Höhe zugewiesen, die sich an einem Breakpoint ändert. Vielleicht per Mediaquery, vielleicht ebenfalls im DOM.

Du könntest zwar das äußere DIV des Sliders überschreiben und auch per Mediaqueries passend machen:

Code:

---

.main-slider {
  height: auto;
  width: 100%;
}

---

Das reagiert so ziemlich als einziges, aber die Bilder rutschen dann einfach raus und werden abgeschnitten, wenn sie nicht passen. Außerdem sollte das äußere DIV garkeine Breite und Höhe erhalten für das, was Du willst. Sondern die Sliderproportionen von innen gesteuert werden, nämlich durch die Größe des Image-Elements. Teste den CSS-Schnipsel ruhig mal, da wirds bei Browser-Resize erkennbar. Du könntest die Fotos natürlich so mitteln, dass sie trotzdem bei allen Auflösungen gut aussehen. Das einzige, was man dafür anfassen müsste, wär das mit dem Lieferwagen. Bei den anderen beiden fällt es nicht auf, da bräuchtest Du nichts ändern.

Na ja, das wäre die schnellste und einfachste Lösung. Und wenn Du den Bildern etwas Überbreite verpasst, könntest Du per Mediaqueries auch ein wenig die Slider-Höhe der jeweiligen Auflösung anpassen. Nicht grad elegant. Doch bei Deinen 3 Bildern könnte man es vertreten. Ansonsten den Slider gegen einen ersetzen, der sich besser von außen beeinflussen lässt.

Noch ein kleiner Tipp: Die beiden roten Flächen ganz oben links sind eine Grafik und die Schrift wird auflösungsabhängig extrem unscharf. Kann dann kein Mensch lesen und sieht auch miserabel aus. Da sollte höchstens der "3 S"-Schriftzug eine Grafik sein, falls es keinen Font dafür gibt. Die normale Schrift hingegen normaler Font und mit Mediaqueries die Schriftgröße möglichst optimal anpassen. Oder alternativ statt der Pixelgrafik eine Vektorgrafik im SVG-Format erstellen. SVG ist jeglicher Auflösung stets gestochen scharf. Wäre hier sogar schneller erledigt als das Gefrickel mit HTML-Schrift und mindestens genauso gut.

Moin,

wenn die Sliderbilder skaliert werden sollen, gibt es eine Einstellmöglichkeit "Skaliermodus" dort Proportional einstellen.
Eine weitere Möglichkeit ist in Höhe und Breite "css" eintragen und im CSS selbst stylen mit media queries.

Weiterhin kann man ja auch für den Slider für verschiedene Bildschirmgrößen definieren und in der Sliderkonfiguration einstellen.

Hier mal der Link dur Doku des Sliders http://rocksolidthemes.com/de/contao.../dokumentation.

Zitat:

---

Eine weitere Möglichkeit ist in Höhe und Breite "css" eintragen und im CSS selbst stylen mit media queries.

---

Eben nicht. Oder jedenfalls nicht so, wie es m. E. sein sollte. Probierte ich mit Firebug, und schrieb im letzten Posting, was dabei rauskam. Das Problem war, das äußere Slider-DIV tat es zwar, aber das Bild wurde dabei unten abgeschnitten und war mit nix zu ändern. Nur der äußere Container reagiert, wie auch die Doku nahelegt, überhaupt auf CSS. Vielleicht ja via gründlichem Studium der Doku irgendwie machbar. Warum nicht der problemlose Standardweg beschritten wurde, bliebe mir aber auch dann schleierhaft. Um sinnvolle Bildproportionen zur möglichst optimalen Abdeckung einer ggf. großen Skalierungsvarianz kommt man eh nicht herum.

Auszug der Slider-Doku, genau das probierte ich. Weil Standardmethode, braucht man dafür ja keine Anleitung. Und wenn´s denn so ginge, skalieren die Bilder doch von selbst, wofür dann ein Javascript-Gefuddel-"Skaliermodus"? Der Autor schreibt sogar "am besten für Text geeignet", im Umkehrschluss also weniger für Bilder. Wen wundert´s. :

Zitat:

---

@media only screen and (max-width: 699px) {
#mein-slider {
width: 100%;
height: auto;
}
} Wenn Sie auto eingeben wird die Größe des Sliders an die Inhalte der Slides angepasst. Dadurch verändert sich die Größe während man von einem Slide zum nächsten slidet. Diese Einstellung wird derzeit nur für die Höhe unterstützt und ist am besten für Text-Inhalte geeignet.

---

Ich lass mich natürlich gern eines Besseren belehren, mangels Einsatz kenn ich dieses Modul ja nicht und finde Anwenderinfos immer interessant, falls ich was vielleicht mal einsetzen möchte. Mir kommt´s momentan halt eher nach dem Motto vor "Warum einfach, wenn´s auch kompliziert geht".

Auf der Seite www.loeffler-web.ch/tao ist für den Slider derzeit keine Breite und Höhe eingestellt, dadurch verwendet der Slider die Angaben aus dem CSS. Im CSS des Themes wird der Slider auf eine Höhe von 400px gesetzt und im Mobile-Media-Query auf „height: auto“. Diese Angaben wurden über die Datei custom.css überschrieben und auf 520px für alle Media-Queries gesetzt.

Um unterschiedliche Größeneinstellungen für die Media-Queries zu ermöglichen und dennoch eine proportionale Höhe zu definieren kann die CSS-Unit vw verwendet werden. Eine 4:1 Proportion mit „height: auto“ für die mobile Version könnte z. B. folgendermaßen aussehen:

Code:

---

.main-slider {
  height: 520px;
  height: 25vw;
}
@media screen and (max-width: 599px) {
  .main-slider {
    height: auto;
  }
}

---

Es ist natürlich auch möglich auf die Angaben via CSS zu verzichten und als Breite 100% und Höhe 4x1 einzustellen, dadurch wird der Slider immer in der Proportion 4:1 dargestellt.

Zu beachten ist bei der Seite, dass die Bilder als Hintergrund-Bilder eingefügt wurden, und sich die automatische Höhe deshalb am Inhalt ausrichtet (in diesem Fall Überschrift und Button).

Zitat:

---

Zitat von soweit_ok

Ich kenn den Rocksolid-Slider nicht, hab aber mal Verschiedenes mit Firebug probiert, um hinter seine Funktionsweise zu kommen. Wie Du gern hättest, ist das nach meinem Eindruck höchstwahrscheinlich nicht hinzubekommen, weil der ganz anders arbeitet, als er dafür sollte.

---

Beim testen via Firebug ist zu beachten, die Style-Attribute der Slider-Elemente nicht zu verändern. Nach Live-Änderungen am CSS muss die Funktion resize des sliders aufgerufen werden oder das Browserfenster vergrößert/verkleinert werden.

Zitat:

---

Zitat von soweit_ok

Das Problem war, das äußere Slider-DIV tat es zwar, aber das Bild wurde dabei unten abgeschnitten und war mit nix zu ändern. Nur der äußere Container reagiert, wie auch die Doku nahelegt, überhaupt auf CSS. Vielleicht ja via gründlichem Studium der Doku irgendwie machbar. Warum nicht der problemlose Standardweg beschritten wurde, bliebe mir aber auch dann schleierhaft.

---

Alle Slider-Elemente reagieren auf CSS, der äußere Slider-DIV wird jedoch zusätzlich vom JavaScript erkannt und falls die Höhe per CSS auf auto gesetzt wurde, wird die automatische Höhe aktiviert d.h. der Slider passt sich dem Inhalt des aktuellen Slides an. Wie würde der „problemlose Standardweg“ aus deiner Sicht aussehen?

Zitat:

---

Zitat von soweit_ok

Auszug der Slider-Doku, genau das probierte ich. Weil Standardmethode, braucht man dafür ja keine Anleitung. Und wenn´s denn so ginge, skalieren die Bilder doch von selbst, wofür dann ein Javascript-Gefuddel-"Skaliermodus"? Der Autor schreibt sogar "am besten für Text geeignet", im Umkehrschluss also weniger für Bilder. Wen wundert´s.

---

So wie es beschrieben ist, funktioniert es. Den Skaliermodus benötigt man, da bei fixen Größeneinstellungen definiert werden muss ob die Bilder abgeschnitten oder mit Rändern angezeigt werden sollen. Die automatische Höhe ist für Text-Inhalte am besten geeignet, da der Text nicht abgeschnitten wird, aber auch für Bilder ist es bestens geeignet. Der dritte Slider auf folgender Seite ist ein Bild-Slider mit automatischer Höhe: http://rocksolidthemes.com/de/contao...-slider-demo-2

Zitat:

---

Zitat von soweit_ok

Mir kommt´s momentan halt eher nach dem Motto vor "Warum einfach, wenn´s auch kompliziert geht".

---

Für Feedback zu Verbesserung des Sliders sind wir jederzeit offen, an welchem Punkt können wir etwas vereinfachen?

Zitat:

---

Wie würde der „problemlose Standardweg“ aus deiner Sicht aussehen?

---

Ich hätte vielleicht "bei resp. Layouts" hinzufügen sollen, und dass in diesem Thread nur von Bildern die Rede war, nicht von anderen Inhalten.

• Die Bilder in der für die gewünschte Auflösungsvarianz idealsten Proportion erstellen, bspw. 4:1 als bewährten Mittelwert.
• Die Bilder auf 100% Breite setzen und automatische Höhe.
• Den äußeren Slidercontainer ohne Maßvorgaben oder bei Bedarf lediglich mit max. Breite.
• Um die erforderliche Mindesthöhe bei kleinen Viewports zu bekommen und gleichermaßen auch sehr hohe Auflösungen zu unterstützen, kann man mittels Mediaqueries unterhalb beliebig vieler Breakpoints für kleinere Auflösungen ansonsten noch ein Stück der seitl. Bildränder wegschnippeln, wobei die Bildinhalte dieser Randbereiche dann natürlich verzichtbar gestaltet werden sollten.

Das war´s eigentlich. Nun ja, ein Slider wie dieser kann halt noch einiges mehr als nur Bilder anzeigen. . Ich behauptete ja nicht, dass ein Plus an Optionen sinnlos sei. Nur für diesen Anwendungsfall vielleicht etwas verwirrend. Stimmt natürlich, dass man theoretisch auflösungsabhängig auch unten einen verzichtbaren Bildbereich abschneiden könnte, nicht nur an den Rändern. Wenn der Slider unterstützt, das gezielt zu tun, nicht verkehrt.

Zitat:

---

Für Feedback zu Verbesserung des Sliders sind wir jederzeit offen, an welchem Punkt können wir etwas vereinfachen?

---

Ich verwende bislang wie gesagt bislang kein Rocksolid Theme. Euer ausführlicher Kommentar hilft dem TE vermutlich weiter. Anscheinend bestanden ja Verständnisprobleme, wie die eigentlich recht einfache Darstellungsvariante erzielt wird. Ich weiß nicht, wie leicht verständlich die Doku des Moduls insgesamt ist, sah mir ja hierfür nur einen kleinen Teil davon an. Ein Diplom sollte man für einfache Aufgaben jedenfalls noch nicht benötigen. Am besten dafür nichtmal überhaupt eine Anleitung lesen brauchen.

Danke für dein Feedback. Dein beschriebener Standardweg, ist genau der den unser Slider beschreitet. Einfach einen neuen Slider mit Bildern anlegen und per Modul oder Inhaltselement einfügen, Breite 100% und automatische Höhe ist der Standardwert, dafür muss keine Einstellung verändert werden.

Die Verständnisprobleme beruhen vermutlich darauf, dass die Bilder des Sliders auf der verlinkten Website als Hintergrundbilder eingefügt wurden.