Contao-Camp 2024
Ergebnis 1 bis 12 von 12

Thema: Imagerotator/slider als wechselndes Background image für body-Tag

  1. #1
    Contao-Nutzer Avatar von Der_Ritter
    Registriert seit
    21.06.2009.
    Beiträge
    106

    Standard Imagerotator/slider als wechselndes Background image für body-Tag

    Hallo zusammen!

    Ich habe folgendes vor:

    Eine Webseite, deren bodybereich kein einfaches Hintergrundbild per CSS-Anweisung background-image: url(blablubb.jpg) enthält, sondern der Hintergrund der kompletten Webseite soll eine Slideshhow sein, also wechselnde Fotos als Hintergrund. Darauf soll dann die eigentliche Seite abgebildet werden.

    Nun google ich seit mehreren Stunden herum, und komme zu keinem befriedigendem Ergebnis, wie ich das lösen könnte.

    Nun gibt es ja die Erweiterung imageslider. Ist es irgendwie Möglich, den Imageslider im Hintergrund als Body-Background sozusagen laufen zu lassen und auf dem Bereich des imagesliders meine Homepage abzubilden?

    Einfach gesprochen, ich möchte kein statisches Hintergrundbild für meine Webseite, sondern einen Imageslider. Gibt es die Möglichkeit, einem Tag, wie zum Beispiel <body>, nicht nur ein einfaches Bild sondern den Imageslider zuzuweisen? Und wenn nicht, hat jemand eine idee wie ich das lösen könnte?

    Liebe Grüße
    Der_Ritter

  2. #2
    Contao-Nutzer Avatar von webseven
    Registriert seit
    19.06.2009.
    Ort
    Zürich Outback
    Beiträge
    116

    Standard

    Hi Ritter

    ich würde behaupten, so was geht vielleicht als reine Flash-Lösung. Beachte, dass bereits
    /// ein solches Beispiel relativ speicherhungrig ist und viel Daten geladen werden müssen,
    bevor die Seite geladen ist. Eine reine Gwundernasenfrage: Was willst Du mit dieser Technik
    erreichen? (musst nicht Antworten) ..

    Grüsse aus der Schweiz
    cy

  3. #3
    Contao-Nutzer Avatar von Der_Ritter
    Registriert seit
    21.06.2009.
    Beiträge
    106

    Standard

    Zitat Zitat von .cy Beitrag anzeigen
    Eine reine Gwundernasenfrage: Was willst Du mit dieser Technik
    erreichen? (musst nicht Antworten) ..

    Grüsse aus der Schweiz
    cy
    Ganz einfach, es ist ein Kundenwunsch, und die Speicherlastigkeit nimmt er in Kauf. Mit Flash soll es nicht gelöst werden, da er die Fotos relativ unkompliziert ändern möchte.

    Ich habe jetzt zwar was gefunden, was den Hintergrund ändert, aber den Überblendeffekt nicht hat. Und der CSS Photoshuffler braucht leider immer einen img-Tag, so dass das hierfür auch unbrauchbar ist. Es ist zum Haare raufen ;-(

    Liebe Grüße
    Der_Ritter

  4. #4
    Administratorin Avatar von lucina
    Registriert seit
    19.06.2009.
    Ort
    Kiel (DE)
    Beiträge
    7.328
    Partner-ID
    152
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Naja, wenn es 'body' sein soll, dann musst Du wohl in der fe_page.tpl da hinein ein Inhalts-Div platzieren, bevor der Rest der Seite zusammengebaut wird.

    (Via 'eigene Layoutbereiche' in 'Einstellungen', dann in 'Templates' - 'neues Template' - aus 'fe-page' und dann den Teil mit Custom-Sections direkt hinter das öffnende 'body'-Tag platzieren)

    Dann könntest Du dorthinein einen Imageslider packen.

    Nur mal so als Beispiel.

    Carolina.

  5. #5
    Contao-Nutzer Avatar von Der_Ritter
    Registriert seit
    21.06.2009.
    Beiträge
    106

    Standard

    Zitat Zitat von lucina Beitrag anzeigen
    Naja, wenn es 'body' sein soll, dann musst Du wohl in der fe_page.tpl da hinein ein Inhalts-Div platzieren, bevor der Rest der Seite zusammengebaut wird.

    (Via 'eigene Layoutbereiche' in 'Einstellungen', dann in 'Templates' - 'neues Template' - aus 'fe-page' und dann den Teil mit Custom-Sections direkt hinter das öffnende 'body'-Tag platzieren)

    Dann könntest Du dorthinein einen Imageslider packen.

    Nur mal so als Beispiel.

    Carolina.
    Hallo Carolina!
    Dein Vorschlag klingt sehr gut. ich werde das am Wochenende einmal in Ruhe ausprobieren. Denke, dass könnte funktionieren. Müsste dann den body aber eine position mit z-index zuweisen, da ich davon ausgehe, dass beim ersten Bildwechsel das neu geladene Bild die Webseite überdecken wird. Wie gesagt am Wochenende probiere ich das einmal.

    Gibt es eigentlich die Möglichkeit, beim Imageslider eine variable Seitenbreite mit width: 100% zuzuweisen? Im Moment kann ich nur eine feste Größe im Backend unterImageslider angeben. Interessant wäre es nämlich, dass das Bild immer, zumindest in der Breite, komplett dargestellt wird, egal welche Auflösung der Monitor hat, mit dem die Seite aufgerufen wird..

    Ei, ei, ei, lauter kleine fiese Sachen hab ich da auf meiner Wunschliste :-)

    Liebe Grüße
    Der_Ritter

  6. #6
    Contao-Fan Avatar von Nils Riel
    Registriert seit
    19.06.2009.
    Beiträge
    730

    Standard

    Ich kann mir nicht Vorstellen, dass das später nutzbar wird. Allein schon, wenn du ein einzelnes Bild als Hintergrund setzt (mit 100% width), ist das für die meisten Computer zu viel und alles ruckelt beim scrollen - wenn die Bilder dann auch noch ständig wechseln, zwingst du die meisten Computer in die Knie.

  7. #7
    Contao-Nutzer Avatar von Der_Ritter
    Registriert seit
    21.06.2009.
    Beiträge
    106

    Standard

    Zitat Zitat von Nils Riel Beitrag anzeigen
    Ich kann mir nicht Vorstellen, dass das später nutzbar wird. Allein schon, wenn du ein einzelnes Bild als Hintergrund setzt (mit 100% width), ist das für die meisten Computer zu viel und alles ruckelt beim scrollen - wenn die Bilder dann auch noch ständig wechseln, zwingst du die meisten Computer in die Knie.
    Es handelt sich dabei um eine Introseite:

    Vorgaben: Hintergrundbildwechsler in der Breite des Bildschirms und linke Seite sowie oben ein Menü, deren Links auf ein anderes Layout (ohne den Bildwechsler) verweisen.
    Es dient lediglich als erster Hingucker. Sämtliche Contentseiten werden ein anderes Layout haben.

    Inwieweit die PCs bei Ansicht der Seite dann "in die Knie" gezwungen werden, muss man dann sehen.

    Liebe Grüße
    Der_Ritter

  8. #8
    Contao-Fan Avatar von Schlauchbeutelmaschine
    Registriert seit
    16.06.2009.
    Ort
    Wiesbaden
    Beiträge
    668

    Standard

    Hallo,

    als kleine Anmerkung zu deiner Anforderung würde ich, falls du eine TL-Extension verwendest, aufjedenfall die Slideshow2 verwenden, die hat nämlich einen Preloader und verhindert ein sichtbares Laden der Bilder beim ersten Aufruf.

    Was mir allerdings noch nicht ganz klar ist wie du die Bilder für verschiedene Bildschirmgrößen darstellen willst? Ich sehe als Lösung da eigentlich nur Flash oder ein Bildvergrößerungs-JS das in den Slider eingebaut wird.

    Bin aufjedenfall gespannt wie du es umsetzt.

  9. #9
    Contao-Nutzer Avatar von Der_Ritter
    Registriert seit
    21.06.2009.
    Beiträge
    106

    Standard

    Hallo!
    Wollte mich mal kurz zum Stand der Dinge melden.
    Also, ich bekomme diese Woche nochmal die genauen Vorstellungen des Kunden, werde diese dann umsetzen und nach Fertigstellung meine Lösung hier bekanntgeben. Kann allerdings noch etwas dauern, aber ich werde es nicht vergessen.

    Gruß
    Der_Ritter

  10. #10
    Contao-Nutzer Avatar von GeorgDerks
    Registriert seit
    20.01.2010.
    Ort
    47906 Kempen
    Beiträge
    70
    Partner-ID
    6516

    Standard CSS-Lösung vielleicht nicht die beste ...

    Zitat Zitat von lucina Beitrag anzeigen
    ... (Via 'eigene Layoutbereiche' in 'Einstellungen', dann in 'Templates' - 'neues Template' - aus 'fe-page' und dann den Teil mit Custom-Sections direkt hinter das öffnende 'body'-Tag platzieren). Dann könntest Du dorthinein einen Imageslider packen. ...
    Danke Carolina (lucina), so hab ich's gemacht.
    Zur Projektsite HIER KLICKEN

    Erster Schritt:
    HTML-Code:
    <?php echo $this->getCustomSections('before'); ?>
    direkt hinter den body-Tag.

    Zweiter Schritt:
    Zentrierung der (1700px breiten) Slideshow2 per CSS:

    HTML-Code:
    #bannerblackstripe .inside {
     left:50%;
     }
    
    .mod_slideshow2 {
     width:1700px;
     height:345px;
     position:absolute;
     margin-left:-850px;
     }
    Dritter Schritt:
    Um den nun entstandenen horizontalen Scrollbalken wegzubekommen, habe ich dem body folgende Eigenschaft verpasst:
    HTML-Code:
    body {
     overflow-x: hidden;
     }
    Für Manöverkritik bin ich dankbar, hat jemand vielleicht eine bessere Idee (speziell bei overflow-x:hidden fühle ich mich nicht sehr wohl ).

    Kleine Ergänzung: Auch den (bis an den rechten Rand des Browserfensters gehenden) schwarzen Balken als Navigationshintergrund habe ich durch die CSS-Definition von .blackstripe zentriert. Letzteren zum Probieren per Firebug vielleicht einfach ausblenden.
    Herzlichen Gruß,

  11. #11
    Contao-Urgestein Avatar von ways2web
    Registriert seit
    23.03.2010.
    Ort
    Berlin
    Beiträge
    1.698
    User beschenken
    Wunschliste

    Standard

    Zitat Zitat von Der_Ritter Beitrag anzeigen
    Hallo zusammen!
    ..

    Nun gibt es ja die Erweiterung imageslider. Ist es irgendwie Möglich, den Imageslider im Hintergrund als Body-Background sozusagen laufen zu lassen und auf dem Bereich des imagesliders meine Homepage abzubilden?

    suFu ist dein Freund und Helfer... wobei ich zugeben muss, dass man erst mal die begrifflichkeiten kennen muss....
    ich hab das ganze fertig als templates... kann es aber noch nich hier veröffentlichen, weil der Kunde das ganze erst abnehmen muss..

    http://www.contao-community.de/showt...ground-MooSize

    gruss
    ways

  12. #12
    Contao-Fan
    Registriert seit
    11.08.2013.
    Beiträge
    287

    Standard

    Hallo Gemeinde,

    ich suche einen Slider der per Fade Effekt wechselnde BG Bilder in einem Artikel zulässt. slideshow2 ist leider für C 3.1.3 nicht funktionsfähig. Kann aber wahrscheinlich genau das was ich suche. Kennt jemand eine Alternative?

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Ähnliche Themen

  1. CSS Background-Image
    Von leguano im Forum Newsletter
    Antworten: 2
    Letzter Beitrag: 04.02.2011, 08:14
  2. Background-Image im Header verlinken
    Von LutzWinkler im Forum Layout / Templates / Holy Grail
    Antworten: 4
    Letzter Beitrag: 08.12.2010, 13:44
  3. body background skalieren // für jede Seite ein anderes image
    Von tyler im Forum Layout / Templates / Holy Grail
    Antworten: 9
    Letzter Beitrag: 19.05.2010, 17:29
  4. body und background-image
    Von Bernd im Forum Layout / Templates / Holy Grail
    Antworten: 3
    Letzter Beitrag: 12.10.2009, 09:33

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •