Breite der Slideshow an Browserfenster anpassen bzw. zentrieren

Hallo zusammen,

ich hänge jetzt schon einige Zeit an einem kleinen Problem mit der Slideshow2 und hoffe, dass ich vielleicht aus dieser Runde einen Tipp bekomme. Eigentlich ist es ja kein eigentliches Slideshow-Problem, aber ich stelle es trotzdem mal an dieser Stelle ein:

Mein Ziel ist, eine Slideshow als Hintergundgrafik auf die Startseite einzubinden. Es soll dafür die volle Fensterbreite genutzt werden, also über den wrapper hinaus. Dafür haben die Bilder eine Breite von 1920px. Wie kann ich nun erreichen, dass die Grafiken immer zentriert angezeigt werden? Geht das mit CSS? Aktuell ist es so, dass bei "normaler" Fensterbreite (1024px) jeweils nur der linke Bildbereich gezeigt wird. Es bringt auch nichts, wenn man in das JS-Template die Option 'center: true' schreibt, das hilft wohl nur, wenn das Bild kleiner als die Größe der Slideshow ist.

Vielen Dank und nette Grüße aus Brandenburg!!!

Matthias

Hallo Mathias,

hast du mal den bgstretcher ausprobiert?
Die Slideshow2 kannst du zwar so umbauen das es auch im Hintergrund angezeigt wird, ist aber nicht optimal.

Hi Matti,
für das Zentrieren sollte ein umschließendes DIV mit absoluten Positionen bei x=0, y=0 und Breite, Höhe 100% reichen und text-align: center;

Um ganz sicher zu gehen kann man auch noch den Bildcontainer absolut positionieren und mit left:50% und margin-left: -BREITE_DER_BILDER das Bild/Slideshow ausrichten. (funzt nicht bei Bildern unterschiedlicher Breite)

Bei jedem Skallieren des Browserfensters verschiebt sich dann der Inhalt mit.

Das wäre eine CSS Lösung.

Sauberer wäre ein JS Script zu schreiben, dass die Bilder abhängig der Bildschirmbreite skalliert bzw. wenn die Breite kleiner als das Bild wird nach der Höhe.

Das sähe dann so aus: http://www.public-poetry.com/
(ist sicher das gleiche wie der bgstretcher)

Grüße

Vielen Dank an Euch beide für die schnelle Hilfe!!! Mein Problem ist nun gelöst, ich konnte beide Ideen nutzen. Die Grafiken wechsele ich nun mit mit dem BG-Stretcher. Diesen habe ich in einen Container gepackt und nach Tims Vorschlag positioniert. Klappt prima - margin-left muss dabei der halben Bildbreite entsprechen (negativer Wert natürlich).

Bis bald mal wieder!!!

Der Contao-"Frischling" Matti

Hallo,

ich habe den bg-stretcher (mit Bildern 1920x1080) in der Version 2.10.4 eingebaut und am Desktop funktioniert es bestens. Die Darstellung auf dem ipad konnte ich durch einen headtag (viewport content width 1600) optimieren. Nur auf den mobile devices funktioniert es nicht so recht, d.h. das Bild ist in der Portrait-Ansicht nicht verkleinert und in der Landscape-Ansicht kann ich auf dem iphone nicht scrollen. Habe auch schon probiert, mittels einer Klasse beim bg-stretcher-modul wie oben zu zentrieren. Es funktioniert leider nicht.

Wer hat einen Tipp für mich?

Vielen Dank im Voraus.
Gruß
bintang