[full-background-images] - Full Background Image(s) / Slider

Diese Erweiterung stellt verschiedene Varianten für Full-Background-Bilder in Contao zu Verfügung.

• Einzelbild mit Einblendeffekt
• Zufallsbild mit Einblendeffekt
• Mehrere Bilder mit Einblendeffekt und Fadeeffekt bei Bildwechsel
• Unterseiten können die Einstellungen von übergeordneter Seite erben, überschreiben oder deaktivieren

Die Bilder und Einstellungen werden direkt in der Seitenstruktur verwaltet.

Links:
Github
Anleitung (Englisch!)
Extension-Repository
Packagist (für Composer)

Danke an:
Anregung/Idee: nuun gmbh & traumwerk
Entwicklung: 1up GmbH

Ich habe der Erweiterungen ein paar Bugfixes spendiert.
Die Änderungen betreffen nur mobile Endgeräte (primär iOS-Devices).

Hey,

spannende Erweiterung. Hast Du Erfahrung in welchen Browserversionen (IE) das ohne Probleme läuft?

Hallo

Die Erweiterung funktioniert laut meinen Tests unter IE ab Version 8.

Grüsse
bytehead

Die Erweiterung ist genau das was ich für das nächste Kundenprojekt brauche. Einfach klasse!

Habe trotzdem eine Frage:

Gäbe es die Möglichkeit zwischen den Bildern zu navigieren? Auf der Seite ist im Grunde nämlich nur ein kleiner Header-Bereich mit Logo und Navigation und die Hintergrund-Slideshow. nur dass man dort zwischen den Hintergrundbildern navigieren könnte?

Ist nur eine kleine Anregung/Anmerkung meinerseits. Gibt es vielleicht eine andere Erweiterung die sowas bewerkstelligt (unter Contao 3.2.x) ?

Auf jeden Fall eine top Erweiterung!

Grüße,
Sinainu

Hallo Sinainu

Danke für das Feedback, freut mich dass die Extension Einsatzgebiete findet.

Zu deinem Anliegen gibt es bereits ein Ticket auf Github https://github.com/1up-lab/contao-fu...ages/issues/11, ich bin jedoch noch nicht dazu gekommen, dieses Ticket zu bearbeiten.
Das Feature ist aber geplant für die Version 1.1.

Ich werde sicher hier einen Post schreiben, sobald ich das Feature drin habe.

Grüsse
bytehead

Hallo,

eine tolle Erweiterung für Contao und auch schon im Einsatz. Allerdings habe ich festgestellt, dass die Darstellung auf dem iPhone nicht richtig funktioniert. Hier wird nur ca. 1/3 der Fläche durch das Hintergrundbild gefüllt. Ist das nur bei mir so oder kann das noch jemand bestätigen?

Danke für die Rückmeldung!

Hallo Dublay

Ich habe es kurz getestet auf meinem iPhone (4s) und im iOS-Simulator. Bei mir funktioniert das einwandfrei.
Hast du allenfalls sonst Skripte / CSS dass irgendwie da mit hineinspielt?
Im Anhang noch einen Screenshot der MA-Demo mit der Extension im iOS-Simulator.

Anhang 13883

Grüsse
bytehead

Hallo bytehead,

ich habe das Problem eingrenzen können. Scheinbar hängt es mit dem Layout-Builder zusammen. Darf ich Dir mal einen Link schicken? Vielleicht siehst Du ja auf Anhieb das Problem.


Viele Grüße,

Dublay

Ja kannst du gerne machen.

Hallo,
ich wollte gerade den Full Background Image(s) Slider über composer installieren. Leider scheint er mit Contao 3.3.3 noch nicht kompatibel zu sein.

ist ein Update für Contao 3.3 geplant?

LG Martina

Zitat:

---

Zitat von Dublay

Hallo,

eine tolle Erweiterung für Contao und auch schon im Einsatz. Allerdings habe ich festgestellt, dass die Darstellung auf dem iPhone nicht richtig funktioniert. Hier wird nur ca. 1/3 der Fläche durch das Hintergrundbild gefüllt. Ist das nur bei mir so oder kann das noch jemand bestätigen?

Danke für die Rückmeldung!

---

Hallo,
ich habe dasselbe Problem,
alles gut nur nicht bei iphone ...
Gibts dafür schon eine Lösung?

Danke im Voraus für die Hilfe!
Anx

Zitat:

---

Zitat von Martina

Hallo,
ich wollte gerade den Full Background Image(s) Slider über composer installieren. Leider scheint er mit Contao 3.3.3 noch nicht kompatibel zu sein.

ist ein Update für Contao 3.3 geplant?

LG Martina

---

erstmal danke für die tolle Erweiterung!

bei mir läuft es unter Cto 3.3.3

ausgewählt:

- den Startpunkt einer Website ausgewählt
- individuelle Bildauswahl
- mehrere Bilder mit fade-effekt

allerdings fadet er alle Bilder, egal welchen Bildmodus man auswählt.
Die Einstellungen für Pausen u. Bildwechsel werden auch nicht umgesetzt.
wenn ich das in der ersten Seite unter Startpunkt einstelle, werden die Zeiten für Pausen u. Bildwechsel ausgeführt

Zitat:

---

Zitat von Martina

Hallo,
ich wollte gerade den Full Background Image(s) Slider über composer installieren. Leider scheint er mit Contao 3.3.3 noch nicht kompatibel zu sein.

ist ein Update für Contao 3.3 geplant?

LG Martina

---

Hallo Martina

Ein Update ist geplant, bzw. schon in Arbeit. Erste Tests unter Contao 3.3.x funktionieren soweit fehlerfrei.

Grüsse
bytehead

Zitat:

---

Zitat von anx

Hallo,
ich habe dasselbe Problem,
alles gut nur nicht bei iphone ...
Gibts dafür schon eine Lösung?

Danke im Voraus für die Hilfe!
Anx

---

Hallo Anx

Die Erweiterung sollte problemlos auch auf Smartphones funktionieren. Voraussetzung: Die Webseite muss responsive sein, sprich auch den Meta-Tag für den Viewport mitliefern.
Ich habe die Erweiterung auf dem iPhone mit der alten und der neuen Contao Demo getestet, funktioniert bei beiden Demoversionen von Contao.

Grüsse
bytehead

Zitat:

---

Zitat von andrea$

erstmal danke für die tolle Erweiterung!

bei mir läuft es unter Cto 3.3.3

ausgewählt:

- den Startpunkt einer Website ausgewählt
- individuelle Bildauswahl
- mehrere Bilder mit fade-effekt

---

Hallo andrea$

Bei mir läuft die Erweiterung auch unter 3.3.3.
Allerdings kann ich in Verwendung mit der neuen Contao Demo kein Fehlverhalten feststellen.

Zitat:

---

Zitat von andrea$

allerdings fadet er alle Bilder, egal welchen Bildmodus man auswählt.
Die Einstellungen für Pausen u. Bildwechsel werden auch nicht umgesetzt.
wenn ich das in der ersten Seite unter Startpunkt einstelle, werden die Zeiten für Pausen u. Bildwechsel ausgeführt

---

Generell werden alle Bilder gefadet (egal ob Bildübergang oder beim Seitenaufbau), wenn du die Dauer des Bildwechsels aber auf 0 setzst, sollte es nicht mehr faden.

Grüsse
bytehead

Das Contao 3.3.x-kompatible Update (v1.0.7) ist für die Contao-Erweiterungsverwaltung und Composer-Installationen verfügbar.

Grüsse
bytehead

hab scheinbar ein konflikt mit der funktion LazyLoad JavaScript, ich glaube die kommt mit theme+ daher

Probleme hat das jquery-backstretch dennoch einige was das mobile angeht.

1. landscape bei firefox/chrome android kann das script jedoch noch immer nicht richtig. Nur der native android browser kann damit umgehen
2. Dolphin Browser ist ne katastrophe

Zitat:

---

Zitat von ways2web

hab scheinbar ein konflikt mit der funktion LazyLoad JavaScript, ich glaube die kommt mit theme+ daher

---

Die neuste dev-master Version funktioniert jetzt mit dem LazyLoad Javascript von theme-plus. Allerdings noch ohne IE8/9 Support.

Zitat:

---

Zitat von ways2web

Probleme hat das jquery-backstretch dennoch einige was das mobile angeht.

1. landscape bei firefox/chrome android kann das script jedoch noch immer nicht richtig. Nur der native android browser kann damit umgehen
2. Dolphin Browser ist ne katastrophe

---

Ich werde mir die Erweiterung auf Firefox&Chrome unter Android ansehen. Unter iOS funktioniert es mit Chrome einwandfrei.
Dolphin kenne ich nicht - der wird auch einen verschwindend kleinen Marktanteil haben - somit nicht relevant.

Grüsse,
bytehead

Zitat:

---

Zitat von bytehead

Die neuste dev-master Version funktioniert jetzt mit dem LazyLoad Javascript von theme-plus. Allerdings noch ohne IE8/9 Support.



Ich werde mir die Erweiterung auf Firefox&Chrome unter Android ansehen. Unter iOS funktioniert es mit Chrome einwandfrei.
Dolphin kenne ich nicht - der wird auch einen verschwindend kleinen Marktanteil haben - somit nicht relevant.

Grüsse,
bytehead

---

zuerst mal wie es sich gehört... DANKE! Denn die extension ist toll.

ja, dolphin ist sicher zu vernachlässigen..... firefox und chrome wäre schon toll... falls das Problem dort zu beheben wäre, klappt es dann vielleicht ja auch mit den anderen exoten... da die genau das gleiche Problem wie firefox & Co haben.
das es mit IOs läuft ist schon mal toll,, kann ich nur mit emus testen.. .und den trau ich ned :)

gruss
ways

Hallo
Die Hintergrundbilder werden vom Mittelpunkt aus skaliert. Gerne würde ich die obere linke Ecke als Referenzpunkt für die Bildskalierung verwenden. Kann man das irgendwie ändern? Leider verstehe ich zu wenig von Programmierung, um selbst aktiv zu werden. Ich nutze Contoa 3.3.3 und Full Background Image(s) 1.1.0 Build 5 zurzeit in einer lokalen Installation.
Gruss
pees

Hallo pees

Zitat:

---

Zitat von pees

Die Hintergrundbilder werden vom Mittelpunkt aus skaliert. Gerne würde ich die obere linke Ecke als Referenzpunkt für die Bildskalierung verwenden. Kann man das irgendwie ändern?
pees

---

Das könnte ich eigentlich noch zu den Einstellungen hinzufügen. Wird in einer nächsten Version drin sein.

Bis dahin kannst du das Template modifizieren:

Code:

---

<script type="text/javascript">
    window.addEventListener("load-fullbg", function() {
        ;(function($){
            $(document).ready(function() {
                $.backstretch(
                    [<?php echo $this->images; ?>],
                {
                    centeredX: false,
                    centeredY: false,
                    duration: <?php echo $this->timeout; ?>,
                    fade: <?php echo $this->speed; ?>,
                });
            });
        })(jQuery);
    });
</script>

---

centeredX und centeredY sind defaultmässig auf true gesetzt.

Grüsse
bytehead

Zitat:

---

Zitat von bytehead

Bis dahin kannst du das Template modifizieren:

Code:

---

<script type="text/javascript">
    window.addEventListener("load-fullbg", function() {
        ;(function($){
            $(document).ready(function() {
                $.backstretch(
                    [<?php echo $this->images; ?>],
                {
                    centeredX: false,
                    centeredY: false,
                    duration: <?php echo $this->timeout; ?>,
                    fade: <?php echo $this->speed; ?>,
                });
            });
        })(jQuery);
    });
</script>

---

centeredX und centeredY sind defaultmässig auf true gesetzt.

---

Bei mir werden die Bilder nicht komplett angezeigt. Es fehlt links u. rechts etwas vom Bild.
Auch wenn ich das Template wie von dir hier gepostet ändere u. mal die x/y unterschiedlich auf true oder false setze, ändert das nichts.
Größe der Bilder 1280x720 aber auch wenn ich sie reduziere auf 800x450 sind sie links/rechts abgeschnitten.

Richtig responsive ist das ganze auch nicht? Beim ändern des Viewports verschwindet so einiges vom Bild.

Tolle Erweiterung!

Bei mir ist nur das Problem, dass die Bilder ihre Größe beibehalten und nicht je nach Größe des Browserfensters automatisch skalieren.
An was kann das liegen?

Grüße
Chinagirl

Nach nochmaligem Testen habe ich festgestellt, dass Problem ist nur beim Firefox am Apple !?

liebe Grüße,
chinagirl

Hallo,
ich bin neu hier.
Habe den Full Background Image(s) Slider installiert unter Contao 3.3.3.
Meine Frage wäre, wie kann ich die Bilder einbinden?

Danke in voraus.

Zitat:

---

Zitat von jove

Hallo,
ich bin neu hier.
Habe den Full Background Image(s) Slider installiert unter Contao 3.3.3.
Meine Frage wäre, wie kann ich die Bilder einbinden?

Danke in voraus.

---

du musst erst im startpunkt der seite (seitenstruktur) das ganze aktivieren... und dann kannst du in den einstellungen der seitenstruktur auch pro seite Bilder angeben

Zitat:

---

Zitat von ways2web

du musst erst im startpunkt der seite (seitenstruktur) das ganze aktivieren... und dann kannst du in den einstellungen der seitenstruktur auch pro seite Bilder angeben

---

Danke ways2web.

Gruß JoVe

Hallo andrea$

Zitat:

---

Zitat von andrea$

Bei mir werden die Bilder nicht komplett angezeigt. Es fehlt links u. rechts etwas vom Bild.
Auch wenn ich das Template wie von dir hier gepostet ändere u. mal die x/y unterschiedlich auf true oder false setze, ändert das nichts.
Größe der Bilder 1280x720 aber auch wenn ich sie reduziere auf 800x450 sind sie links/rechts abgeschnitten.

Richtig responsive ist das ganze auch nicht? Beim ändern des Viewports verschwindet so einiges vom Bild.

---

Ich kann deine Beobachtungen nicht nachvollziehen/nachstellen. Hast du einen Link, wo man sich das anschauen kann?
Mehr Informationen über die Versionen von Device/Betriebssystem/Browser wäre sicher auch hilfreich.

Grüsse
bytehead

Hallo chinagirl

Zitat:

---

Zitat von chinagirl

Tolle Erweiterung!

---

Danke vielmal!

Zitat:

---

Zitat von chinagirl

Nach nochmaligem Testen habe ich festgestellt, dass Problem ist nur beim Firefox am Apple !?

---

Ich habe dies gerade auf einem Mac OSX System mit Firefox v31.0 getestet und finde kein falsches Verhalten.
Hast du einen Link zu der Installation oder kannst du mir die Versionen von Device/Betriebssystem/Browser nennen?

Grüsse
bytehead

Die Erweiterung ist einfach Spitze!..

Zitat:

---

Zitat von bytehead

Hallo andrea$



Ich kann deine Beobachtungen nicht nachvollziehen/nachstellen. Hast du einen Link, wo man sich das anschauen kann?
Mehr Informationen über die Versionen von Device/Betriebssystem/Browser wäre sicher auch hilfreich.

Grüsse
bytehead

---

danke für deine schnelle Antwort!

Ich habs nur offline aber chinagirl hat ja ein ähnliches Problem. Ich habe das auf einem Desktop, Windows 7 div. Browser: FF, Opera, Iron (chrome). Mobile Geräte sind bei mir noch gar nicht im Gespräch.
Ich habe die Seite überwiegend mit Prozentangaben für wrapper, container etc. erstellt. Ich wüßte jetzt auch nicht weiter woran es liegen kann. Viel Einstellungsmöglichkeiten gibt es ja nicht.

Ziehe ich das Browserfenster weit genug auf, ist das komplette Bild sichtbar.

Hallo andrea$

Zitat:

---

Zitat von andrea$

Ziehe ich das Browserfenster weit genug auf, ist das komplette Bild sichtbar.

---

Ich vermute zu wissen, was du meinst :)
Das Bild wird im grösstmöglichen Format in das Fenster eingepasst, wenn das Seitenverhältnis des Bildes zum Bildschirm nicht passt, wird je nach Situation links/rechts oder oben/unten abgeschnitten.
Aber das verhaltet sich in allen mir bekannten Browsern so - ist also kein Bug ;-)

Grüsse
bytehead

hallo bytehead!

Zitat:

---

Zitat von bytehead

Ich habe dies gerade auf einem Mac OSX System mit Firefox v31.0 getestet und finde kein falsches Verhalten.
Hast du einen Link zu der Installation oder kannst du mir die Versionen von Device/Betriebssystem/Browser nennen?

---

danke für deine rasche antwort!

ich habe einen mac osx mit firefox v31.0.
das problem dürfte an meinem gerät liegen, da ich die seite jetzt auf einem anderm mac osx getestet habe und da funktioniert sie tadellos.

grüße,
chinagirl

Zitat:

---

Zitat von bytehead

Hallo andrea$
Ich vermute zu wissen, was du meinst :)
Das Bild wird im grösstmöglichen Format in das Fenster eingepasst, wenn das Seitenverhältnis des Bildes zum Bildschirm nicht passt, wird je nach Situation links/rechts oder oben/unten abgeschnitten.
Aber das verhaltet sich in allen mir bekannten Browsern so - ist also kein Bug ;-)

Grüsse
bytehead

---

Zunächst mal wollte ich das nicht als Bug melden. ;)

Wenn ich z.B. meine Seite (übrigens eine Onepage) mit Web Developer unterschiedliche Fenstergrößen anzeigen lasse, wird das Bild komplett dargestellt. Ziehe ich am Fenster ist wieder links/rechts was abgeschnitten.

Zitat:

---

Das Bild wird im grösstmöglichen Format in das Fenster eingepasst, wenn das Seitenverhältnis des Bildes zum Bildschirm nicht passt, wird je nach Situation links/rechts oder oben/unten abgeschnitten.

---

Genau so habe ich das aber verstanden, dass das Hintergrundbild sich immer der Fenstergröße anpasst. Klingt für mich widersprüchlich oder verstehe ich da wieder was falsch? Ich nehme an das 95% der Hintergrundbilder nie der aktuellen Fenstergröße des Browsers entsprechen .


Ich werde mal sehen ob ich heute meine Seite auf hochlade.

Zitat:

---

Zitat von andrea$

Zunächst mal wollte ich das nicht als Bug melden. ;)

---

Ok, dann hab ich dich wohl falsch verstanden :)

Zitat:

---

Zitat von andrea$

Genau so habe ich das aber verstanden, dass das Hintergrundbild sich immer der Fenstergröße anpasst. Klingt für mich widersprüchlich oder verstehe ich da wieder was falsch? Ich nehme an das 95% der Hintergrundbilder nie der aktuellen Fenstergröße des Browsers entsprechen .

---

Hmm. Ich wüsste nicht, wie ich ein Bild mit dem Seitenverhältnis von z.B. 16:9 (1920px x 1080px) auf einen 16:10 (1920px x 1200px) Bildschirm füllend draufbringe ohne das Bild auf 2133px x 1200px zu vergrössern und links und rechts was abzuschneiden.

Grüsse
bytehead

Zitat:

---

Zitat von bytehead

Ok, dann hab ich dich wohl falsch verstanden :)
Hmm. Ich wüsste nicht, wie ich ein Bild mit dem Seitenverhältnis von z.B. 16:9 (1920px x 1080px) auf einen 16:10 (1920px x 1200px) Bildschirm füllend draufbringe ohne das Bild auf 2133px x 1200px zu vergrössern und links und rechts was abzuschneiden.

Grüsse
bytehead

---

ich weiß es noch weniger! :D

aber tumbrl scheints zu gehen hier

Zitat:

---

Zitat von andrea$

ich weiß es noch weniger! :D

aber tumbrl scheints zu gehen hier

---

tumblr beschneidet auch um das ganze passende und unverzerrt abzubilden.. sieht man doh deutlich, dass links und rechts dann einfach abgeschnitten, wenn das Seitenverhältnis mathem. nicht zur ausgangsgröße passt.

gruss

wenn ma da reloaded kommt immer ein anders Bild. Manchmal wird was abgeschnitten, stimmt. Bei anderen Bilder bleibst einfach gleichgroß. Wie dem auch sei, so ein full-background-image kann schon ne tolle atmospäre schaffen.

Tumbler macht es vor - auch die schneiden zwecks Proportionalität an dem Hintergrundbild rum.
Hintergrundbilder sollen einen gewissen Mood reinbringen, unabhängig von dem Bildausschnitt, welcher schlussendlich angezeigt wird.
Wenn Bilder vollständig angezeigt werden müssen, ist ein Full-Background-Image der falsche Weg.

Grüsse
bytehead

Hallo,
wenn ich auf der Root Seite die Navigationselemente aktiviere sehe ich diese auf den Unterseiten nur wenn ich die Vererbungseinstellungen so belasse.
Sobald ich auf den Unterseiten eine andere Bildauswahl oder die Einstellungen per Seite überschreibe - erhalte ich nie mehr die Navigationselemente im Frontend angezeigt ...

Hat jemand eine Idee.
Danke
Frank

Hallo Franko

Zitat:

---

Zitat von Franko

wenn ich auf der Root Seite die Navigationselemente aktiviere sehe ich diese auf den Unterseiten nur wenn ich die Vererbungseinstellungen so belasse.
Sobald ich auf den Unterseiten eine andere Bildauswahl oder die Einstellungen per Seite überschreibe - erhalte ich nie mehr die Navigationselemente im Frontend angezeigt ...
Frank

---

Ich habe gerade eine solche Situation mit Contao 3.2.14, 3.3.4 und 3.3.5 getestet, kann aber das geschilderte Verhalten (bei deiner Seite) nicht nachvollziehen, die Erweiterung funktioniert bei mir wie erwartet.
Kannst du vielleicht einen Link zu Verfügung stellen?

Grüsse
bytehead

Zitat:

---

Zitat von bytehead

Hallo Franko
Ich habe gerade eine solche Situation mit Contao 3.2.14, 3.3.4 und 3.3.5 getestet, kann aber das geschilderte Verhalten (bei deiner Seite) nicht nachvollziehen, die Erweiterung funktioniert bei mir wie erwartet.
Kannst du vielleicht einen Link zu Verfügung stellen?
Grüsse
bytehead

---

Hallo - bin erst gerade wieder zum Testen gekommen - Sorry - zur Zeit nur lokal via XAMPP.
Frische Contao 3.3.4 - nur 2 Seiten angelegt - keine weiteren Styles im Theme ( auch nicht die Core Styles )
- Erweiterung installiert
- Auf der Startpunkt Seite alles aktiviert.
- Die erste Seite standardmäßig auf Funktionsmodus Vererbung - im Frontend wird mir da zunächst gar kein Bild angezeigt
- Auf der ersten Seite dann den Funktionsmodus Bildauswahl und Einstellungen überschreiben - im Frontend werden die Bilder angezeigt und korrekt gefadet

Ich erhalte jedoch weiterhin - im Grunde nie - die Navigationselemente.

Wenn ich im template "oneup_ct_fullbgimage.html5" die Einstellung direkt aktiviere:
...
nav: true,
...

erhalte ich zwar im Quelltext unterhalb des entsprechenden Script Eintrages die Listen Elemente ( <ol class"bs-nav">...) aber es werden keine Bilder mehr angezeigt: Chrome meldet Uncaught TypeError: undefined is not a function
Irgendwie stört er sich um die Zeile $('.bs-nav .item').get(newIndex).addClass('active'); in der jquery.backstretch.min.js.

Ist nicht soo wichtig - verstehe nur nicht was ich hier falsch machen könnte ...

Gruß
Frank

Würde mich hier gerne auch einklinken.

Sowohl bei Contao 3.2.14 als auch 3.3.5 erscheint, sobald die Navigation eingeschaltet ist, weder die Navigation noch das Hintergrundbild bzw. die Hintergrundbilder.
Verhalten bei Opera 24, Chrome, IE 10 unter Win8; xammp

Es sind keine Stylesheets im Seitenlayout aktiviert.
JQuery ist aktiviert, mediaelement und colorbox angewählt.

bei 3.2.14 erscheint das Hintergrundbild bei aktivierter Navigation auf einer Seiter, bei dieser ist ein Mediaelement eingebunden - die Navigation ist im Quelltext zu finden, jedoch ohne erkennbare Funktion (leere Container /Listen)

Muss man noch irgendwas beachten bei der Erweiterung?

Edit: Die Erweiterung scheint aber zu merken wie viele Bilder angezeigt werden sollen. Wähle ich im Startpunkt 3 Bilder, werden 5 Menüpunkte angezeigt (3 + Vor/Zurück), wähle ich dann auf einer Subseite 2 individuelle Bilder, werden 4 Punkte angezeigt.
Jedoch in keinem Fall ein Bild.

Fehlerkonsole sagt: Uncaught TypeError: undefined is not a function fa885563567c.js:13

Edit2:

Code:

---

(function(e,t,n){"use strict";e.fn.backstretch=function(r,s){if(r===n||r.length===0){e.error("No images were supplied for Backstretch")}if(e(t).scrollTop()===0){t.scrollTo(0,0)}return this.each(function(){var t=e(this),n=t.data("backstretch");if(n){if(typeof r=="string"&&typeof n[r]=="function"){n[r](s);return}s=e.extend(n.options,s);n.destroy(true)}n=new i(this,r,s);t.data("backstretch",n)})};e.backstretch=function(t,n){return e("body").backstretch(t,n).data("backstretch")};e.expr[":"].backstretch=function(t){return e(t).data("backstretch")!==n};e.fn.backstretch.defaults={centeredX:true,centeredY:true,duration:5e3,fade:0,nav:false,navClick:false,navPrevNext:false};var r={wrap:{left:0,top:0,overflow:"hidden",margin:0,padding:0,height:"100%",width:"100%",zIndex:-999999},img:{position:"absolute",display:"none",margin:0,padding:0,border:"none",width:"auto",height:"auto",maxHeight:"none",maxWidth:"none",zIndex:-999999}};var i=function(n,i,o){var u=this;this.options=e.extend({},e.fn.backstretch.defaults,o||{});this.images=e.isArray(i)?i:[i];e.each(this.images,function(){e("<img />")[0].src=this});this.isBody=n===document.body;this.$container=e(n);this.$root=this.isBody?s?e(t):e(document):this.$container;var a=this.$container.children(".backstretch").first();this.$wrap=a.length?a:e('<div class="backstretch"></div>').css(r.wrap).appendTo(this.$container);if(this.options.nav){var f=this.$container.children(".bs-nav").first();this.$nav=f.lenght?f:e('<ol class="bs-nav"></ol>');e.each(this.images,function(t){u.$nav.append(e('<li class="item"></li>').data("idx",t))});if(this.options.navPrevNext){u.$nav.prepend(e('<li class="item-nav prev"></li>'));u.$nav.append('<li class="item-nav next"></li>')}this.$nav.appendTo(this.$container);if(this.options.navClick){e(".item",u.$nav).on("click",function(t){t.preventDefault();u.show(e(this).data("idx"));return false});if(this.options.navPrevNext){e(".item-nav").on("click",function(e){e.preventDefault();if(e.target.hasClass("prev"))u.prev();if(e.target.hasClass("next"))u.next();return false})}}}if(!this.isBody){var l=this.$container.css("position"),c=this.$container.css("zIndex");this.$container.css({position:l==="static"?"relative":l,zIndex:c==="auto"?0:c,background:"none"});this.$wrap.css({zIndex:-999998})}this.$wrap.css({position:this.isBody&&s?"fixed":"absolute"});this.index=0;this.show(this.index);e(t).on("resize.backstretch",e.proxy(this.resize,this)).on("orientationchange.backstretch",e.proxy(function(){if(this.isBody&&t.pageYOffset===0){t.scrollTo(0,1);this.resize()}},this))};i.prototype={resize:function(){try{var e={left:0,top:0},n=Math.ceil(t.innerWidth/t.innerHeight)>Math.ceil(screen.width/screen.height),r=this.isBody?o?n?screen.height:screen.width:this.$root.width():this.$root.innerWidth(),i=r,s=this.isBody?o?n?screen.width:screen.height:t.innerHeight?t.innerHeight:this.$root.height():this.$root.innerHeight(),u=i/this.$img.data("ratio"),a;if(isNaN(u)){return this}if(u>=s){a=(u-s)/2;if(this.options.centeredY){e.top="-"+a+"px"}}else{u=s;i=u*this.$img.data("ratio");a=(i-r)/2;if(this.options.centeredX){e.left="-"+a+"px"}}this.$wrap.css({width:r,height:s}).find("img:not(.deleteable)").css({width:i,height:u}).css(e)}catch(f){}return this},show:function(t){if(Math.abs(t)>this.images.length-1){return}var n=this,i=n.$wrap.find("img").addClass("deleteable"),s={relatedTarget:n.$container[0]};n.$container.trigger(e.Event("backstretch.before",s),[n,t]);this.index=t;clearInterval(n.interval);n.$img=e("<img />").css(r.img).bind("load",function(r){var o=this.width||e(r.target).width(),u=this.height||e(r.target).height();e(this).data("ratio",o/u);if(n.options.nav){e(".bs-nav .item.active").removeClass("active");e(".bs-nav .item").get(t).addClass("active")}e(this).fadeIn(n.options.speed||n.options.fade,function(){i.remove();if(!n.paused){n.cycle()}e(["after","show"]).each(function(){n.$container.trigger(e.Event("backstretch."+this,s),[n,t])})});n.resize()}).appendTo(n.$wrap);n.$img.attr("src",n.images[t]);return n},next:function(){return this.show(this.index<this.images.length-1?this.index+1:0)},prev:function(){return this.show(this.index===0?this.images.length-1:this.index-1)},pause:function(){this.paused=true;return this},resume:function(){this.paused=false;this.next();return this},cycle:function(){if(this.images.length>1){clearInterval(this.interval);this.interval=setInterval(e.proxy(function(){if(!this.paused){this.next()}},this),this.options.duration)}return this},destroy:function(n){e(t).off("resize.backstretch orientationchange.backstretch");clearInterval(this.interval);if(!n){this.$wrap.remove()}this.$container.removeData("backstretch")}};var s=function(){var e=navigator.userAgent,n=navigator.platform,r=e.match(/AppleWebKit\/([0-9]+)/),i=!!r&&r[1],s=e.match(/Fennec\/([0-9]+)/),o=!!s&&s[1],u=e.match(/Opera Mobi\/([0-9]+)/),a=!!u&&u[1],f=e.match(/MSIE ([0-9]+)/),l=!!f&&f[1];return!((n.indexOf("iPhone")>-1||n.indexOf("iPad")>-1||n.indexOf("iPod")>-1)&&i&&i<534||t.operamini&&{}.toString.call(t.operamini)==="[object OperaMini]"||u&&a<7458||e.indexOf("Android")>-1&&i&&i<533||o&&o<6||"palmGetResource"in t&&i&&i<534||e.indexOf("MeeGo")>-1&&e.indexOf("NokiaBrowser/8.5.0")>-1||l&&l<=6)}();var o=function(){try{document.createEvent("TouchEvent");return true}catch(e){return false}}()})(jQuery,window)

---

hier läuft Cto 3.3.5 mit OnePageWebsite

Es wird nur die <ol> ganz am Ende der Seite angezeigt. Ansonsten keine Navigation, weder klickbare noch Vor/Zurück

Ist mir allerdings schon lange bekannt.

Zitat:

---

Zitat von bytehead

Tumbler macht es vor - auch die schneiden zwecks Proportionalität an dem Hintergrundbild rum.
Hintergrundbilder sollen einen gewissen Mood reinbringen, unabhängig von dem Bildausschnitt, welcher schlussendlich angezeigt wird.
Wenn Bilder vollständig angezeigt werden müssen, ist ein Full-Background-Image der falsche Weg.

Grüsse
bytehead

---

Habe hier was interessantes gefunden. So hatte ich mir das auch vorgestellt.


Demo

Demo

bekommt man die denn einfach und schmerzfrei mit Contao zum Laufen?

http://de.contaowiki.org/Fullsize_Ba...Tools_MooSizer

Zitat:

---

MooSizer - a Mootools rewrite of: Supersized - Full Screen Background/Slideshow jQuery Plugin

---

Zitat:

---

Zitat von ways2web

http://de.contaowiki.org/Fullsize_Ba...Tools_MooSizer

---

Klasse! Die Anleitung werde ich mir mal reinziehen

Feedback:

habs in Cto 3.3.5 installiert. Scheint fast alles zu funktionieren. Die Bilder sliden bei mir nicht. mo_slider ist auch im Layout eingebunden.

werden denn vielleicht fehler im javascript geworfen?

Hi,

danke erstmal für die tolle Erweiterung :-)
Ich habe eine 3.2.13 Instanz laufen und auf meinem iPhone und iPad werden leider die Hintergrundbilder nicht komplett auf die Seitengröße skaliert. Auf dem iPad fehlt rechts ein Zentimeter und auf dem iPhone ist das Hintergrundbild auf 30% seiner Größe skaliert. Habt ihr dazu eine Idee?

Bsp: http://www.tessitore.de/filum.html

Viele Grüße,
operatorone

Zitat:

---

Zitat von ways2web

werden denn vielleicht fehler im javascript geworfen?

---

das ist alles was angezeigt wird. der type error hat aber nichts damit zu tun. noconflict hatte ich nachträglich im head eingetragen. dachte das löst das problem.
ich habe noch den hauseigenen content slider in meiner seite (onepage). nun werden dort die menü punkte doppelt angezeigt. deaktiviere ich das template werden die menü punkte wieder korrekt angezeigt.

zudem gibt es im be keine einstellungsmöglichkeiten. ich glaube das wird wieder entsorgt.

getUserData() und setUserData() sollten nicht mehr verwendet werden. Verwenden Sie stattdessen WeakMap oder element.dataset. requestNotifier.js:63
getAttributeNode() sollte nicht mehr verwendet werden. Verwenden Sie stattdessen getAttribute(). 7bb690d7390b.js:4
TypeError: $.noConflict is not a function
Das angegebene "type"-Attribut "video/x-youtube" wird nicht unterstützt. Das Laden der Medienressource http://www.xxxxx ist fehlgeschlagen.
Alle Kandidaten für die Ressource konnten nicht geladen werden. Medien-Laden pausiert.

Hallo,

hatte meine Seite mal durch den validator geschickt

Line 18, Column 104: Bad value static for attribute media on element link: Expected a CSS media type but the query ended.

…ef="system/modules/full-background-images/assets/css/style.css" media="static">

Syntax of media query:
One or more media queries, combined in a comma-separated list. Each media query consists of a media type and zero or more expressions that check for the conditions of particular media features. A media type is one of the following: all, braille, embossed, handheld, print, projection, screen, speech, tty, or tv. Note: The aural media type is deprecated. For information about valid media features and about the exact syntax of media queries, see the Media Queries specification.

Zitat:

---

Zitat von Franko

Hallo - bin erst gerade wieder zum Testen gekommen - Sorry - zur Zeit nur lokal via XAMPP.
Frische Contao 3.3.4 - nur 2 Seiten angelegt - keine weiteren Styles im Theme ( auch nicht die Core Styles )
- Erweiterung installiert
- Auf der Startpunkt Seite alles aktiviert.
- Die erste Seite standardmäßig auf Funktionsmodus Vererbung - im Frontend wird mir da zunächst gar kein Bild angezeigt
- Auf der ersten Seite dann den Funktionsmodus Bildauswahl und Einstellungen überschreiben - im Frontend werden die Bilder angezeigt und korrekt gefadet

Ich erhalte jedoch weiterhin - im Grunde nie - die Navigationselemente.

Wenn ich im template "oneup_ct_fullbgimage.html5" die Einstellung direkt aktiviere:
...
nav: true,
...

erhalte ich zwar im Quelltext unterhalb des entsprechenden Script Eintrages die Listen Elemente ( <ol class"bs-nav">...) aber es werden keine Bilder mehr angezeigt: Chrome meldet Uncaught TypeError: undefined is not a function
Irgendwie stört er sich um die Zeile $('.bs-nav .item').get(newIndex).addClass('active'); in der jquery.backstretch.min.js.

Ist nicht soo wichtig - verstehe nur nicht was ich hier falsch machen könnte ...

Gruß
Frank

---

Hallo Frank

Sorry, ich war noch in den Ferien, darum solange keine Antwort.
Ich werde versuchen, dein Problem nachzuvollziehen.

Grüsse
bytehead

Zitat:

---

Zitat von operatorone

Hi,

danke erstmal für die tolle Erweiterung :-)
Ich habe eine 3.2.13 Instanz laufen und auf meinem iPhone und iPad werden leider die Hintergrundbilder nicht komplett auf die Seitengröße skaliert. Auf dem iPad fehlt rechts ein Zentimeter und auf dem iPhone ist das Hintergrundbild auf 30% seiner Größe skaliert. Habt ihr dazu eine Idee?

Bsp: http://www.tessitore.de/filum.html

Viele Grüße,
operatorone

---

Hallo operatorone (und alle die das gleiche Problem haben...)

Ich sehe dein Problem, die Seite ist nicht responsive.
Das Skript holt die Breite des Endgerätes und nicht der Seite, somit hast du auf einem Phone z.B. 320px Breite, auf diese Grösse wird dann das Hintergrundbild skaliert. Aber deine Seite ist effektiv breiter, somit ist das Bild dann zu klein.
Ich versuche in einer nächsten Version einen Workaround für Seiten, welche den Viewport-Tag nicht mit

Code:

---

width=device-width

---

angeben, das Bild auf die Seitenbreite und nicht auf die Devicebreite zu skalieren.

Stay tuned,
bytehead

Hallo erstmal

Ich habe der Erweiterung soeben ein Update spendiert, welches die genannten Bugs mit der Navigation und dem CSS (media=static) beseitigen sollte.
Vielen Dank allen, die mich hier aktiv mit Fehlerberichten unterstützt haben.

Der Workaround für die mobile Version bei nicht responsiven Seiten werde ich noch nachliefern.

Grüsse
bytehead

Hallo

Ich hab noch eine alpha-Version veröffentlicht (1.4.0-alpha1), welche nun auch auf mobilen Geräten bei nicht responsiven Seiten das Bild richtig skalieren sollte.
Wurde von mir in zwei Projekten, welche nicht responsive sind, kurz getestet und hat soweit funktioniert.

Wäre aber froh, wenn das andere auch noch bestätigen könnten :)

Grüsse
bytehead

Zitat:

---

Zitat von bytehead

Hallo erstmal

Ich habe der Erweiterung soeben ein Update spendiert, welches die genannten Bugs mit der Navigation und dem CSS (media=static) beseitigen sollte.
Vielen Dank allen, die mich hier aktiv mit Fehlerberichten unterstützt haben.

Der Workaround für die mobile Version bei nicht responsiven Seiten werde ich noch nachliefern.

Grüsse
bytehead

---

Vielen Dank für deine schnellen Updates! Validator hat wegen media=static nichts mehr zu meckern.

Hallo zusammen

Zuerst danke für die tolle Erweiterung. Auch ich habe Probleme bei meiner 3.3.5 Installation. Wenn ich im Root alles anklicke, funktioniert alles, ausser der Navigation. Im Javascript werden die Felder für die Navigation alle mit false ausgegeben. Egal was ich auf den Folgeseiten anklicke, die Navigation wird nicht angezeigt. Ich habe nun direkt in der DB in der entsprechenden Folgeseite die Felder für die Navigation ausgefüllt. Jetzt funktioniert es tadellos.

Grüsse

Rafael

Hallo Rafael

Ich habe es gerade in einer 3.3.5er-Installation getestet, ich kann das von dir beschriebene Fehlverhalten nicht nachvollziehen.
Ist die Seite irgendwo erreichbar? Was hast du für eine Version der Erweiterung im Einsatz?

Grüsse
bytehead

Hallo,

ich habe die Erweiterung ausprobiert und sie gefällt mir auch sehr. Vielen Dank dafür.
Ich möchte fragen ob ich irgendwie noch folgendes realisieren könnte:

Ich habe dem Startpunkt der Webseite mehrere Hintergrundbilder zugewiesen und die Navigation aktiviert. Jeder Besucher könnte also mit der Hilfe der Navigation einen Hintergrund auswählen.
Mal angenommen der Besucher kommt also auf die Startseite, wählt ein Hintergrund aus, dann soll das gewählte Hintergrundbild auch auf allen Unterseiten eingeblendet sein bis man über die Navigation wieder ein anderes wählt.

Ist das möglich?

Liebe Grüße

Hallo N1N

Zitat:

---

Zitat von N1N

Ich habe dem Startpunkt der Webseite mehrere Hintergrundbilder zugewiesen und die Navigation aktiviert. Jeder Besucher könnte also mit der Hilfe der Navigation einen Hintergrund auswählen.
Mal angenommen der Besucher kommt also auf die Startseite, wählt ein Hintergrund aus, dann soll das gewählte Hintergrundbild auch auf allen Unterseiten eingeblendet sein bis man über die Navigation wieder ein anderes wählt.

---

Dieses Feature ist nicht geplant mit dieser Extension, da es meiner Meinung nach ein ziemlicher "Edge Case" darstellt.
Der Sourcecode ist aber auf Github verfügbar. Sofern du genügend Kenntnisse mit der Modulentwicklung unter Contao hast, lässt sich das sicher realisieren (z.B. mit Session-Storage, LocalStorage oder notfalls über Cookies).

Grüsse
bytehead

Hallo bytehead,

vielen Dank für diese tolle Erweiterung.
Ist es möglich, als Bezugspunkt der Skalierung die rechte untere Ecke zu bestimmen? Ich verwende freigestellte Abbildungen, die eben in dieser Ecke positioniert sind.

Danke.
JL

Hallo imacfan

Zitat:

---

Zitat von imacfan

Ist es möglich, als Bezugspunkt der Skalierung die rechte untere Ecke zu bestimmen? Ich verwende freigestellte Abbildungen, die eben in dieser Ecke positioniert sind.
JL

---

Zur Zeit noch nicht, aber ich kann das gerne mal in die ToDo-List aufnehmen.

Grüsse
bytehead

HI,

gibt es eine Möglichkeit Hintergrundbilder zu zentrieren? Ich habe zwar die Option "Bild horizontal zentrieren" angewählt, aber leider ist es immer noch im Browser links angeheftet.

Viele Grüße,
operatorone

https://github.com/1up-lab/contao-fu...ages/issues/23

gesendet mit Tapatalk.

Hallo zusammen !

Mich würde interessieren, ob diese tolle Erweiterung auch problemlos mit Rocksolid-Themes (hier Luxe) arbeitet. Gibt es hier eventuelle Erfahrungen oder ggf. Tipps?

Bei der Rocksolid-Übersicht für schon getestete Erweiterungen fand ich hier leider nichts ...

Vielen Dank im voraus
Mike

Hallo Mike

Zitat:

---

Zitat von MikeS

Mich würde interessieren, ob diese tolle Erweiterung auch problemlos mit Rocksolid-Themes (hier Luxe) arbeitet. Gibt es hier eventuelle Erfahrungen oder ggf. Tipps?

---

Ich habe gerade kein Rocksolid-Theme zur Hand, aber ich denke das sollte möglich sein. Die Erweiterung ist eigentlich nicht Theme abhängig, sofern die Themes mit einer Standard-Contao-Installation arbeiten.

Gruss
bytehead

Hallo zusammen!

Erst mal ein herzliches Dankeschön an bytehead für diese tolle Erweiterung. Ich setz sie gerade zum ersten mal bei einer Webseite ein und bin begeistert! Danke!

Nun zu meinem Problem/meiner Frage:
Ich habe auf der Startseite einen Background-Slider eingebaut. Hier werden aktuell 4 Bilder geladen. Die Bilder sind alle 1920x1045 Pixel groß und haben jeweils so ca. 300 kB. Nun ist das Problem, dass die Bilder anscheinend nicht vollständig geladen werden. Das führt dazu, dass Bilder unten abgeschnitten sind, also z.B. nur 80% der Höhe geladen werden und somit die Hintergrundfarbe der Seite zu sehen ist. Teilweise waren auch nur Streifen des Bildes im unteren Bereich geladen. Ich vermute also, die Bilder werden nicht schnell genug geladen bzw. das Laden wird abgebrochen.

Hat jemand ähnliche Probleme? Kann man sagen, es liegt definitiv an der Größe der Bilder? Hat die Erweiterung irgendwie Einfluss darauf wie die Bilder geladen werden? Hat jemand Tipps, wie ich das verhindern kann?

Viele Grüße
Nicole