[bgstretcher] - Ein Fullscreen Bilder-Slider für den Hintergrund einer Website

Aktuelle Version ist 1.0.0 stable

Wichtiger Hinweis
Bei einigen lief der bgstretcher anfangs nicht. Das Problem war der noconflict Mode.
Sofern dieser aktiviert wurde gab es Probleme, da jQuery dann mit "jQuery" statt "$" angesprochen werden muss.
In der aktuellen Version kann man nun pro Slider auswählen wie die Funktion aufgerufen werden soll,
damit sollte es dann in beiden Varianten funktionieren.

Beschreibung
Der Background Stretcher ist eine auf jQuery basierende Erweiterung von ajaxblender.com um Bilder im Hintergrund einer Website durchzusliden.
Die Bilder werden dabei je nach Größe des Browserfensters automatisch skaliert.
http://www.contao.org/erweiterungsli...etcher.de.html

Feedback und Fehler bitte hier posten.

Sieht ja ganz nett aus :-).

Hier mal direkt der Link, damit man nicht umständlich aus dem ER der Link kopieren muss.
http://www.ajaxblender.com/bgstretch...n-updated.html

WOW,
geht nur leider nicht mit mootools zusammen... jedenfalls bei mir.

noconflict eingeschaltet, mootools und jquery aktiviert...

mach ich was falsch?

g.a.B.
H.C.

moin,
mit dieser hilfe http://www.contao-community.de/showt...s-verwenden#22
gings, super.

Ich würde mir wünschen das man die Slideshow nur einmal abspielen kann also ohne wiederholung...
kann man das irgendwo einstellen? Im .js hab ich nichts gefunden.

g.A.B.
H.C.

icke nochmal,

jetzt ist im noconflict modus '$.fn.bgStretcher' Null oder kein Objekt
ich gebs auf schade

g.A.B.
H.C.

Hallo,

eigentlich sollte es problemlos mit mootools laufen.

Hast du noch ein paar Infos für mich oder einen Link,
sonst wird es schwierig zu sagen vorran es liegt.

Hallo,

ich benutze Contao 2.10.3 und habe via Rep. die Extension sowie die jQuery-Erweiterung installiert. Wenn ich in das Modul gehen, kann ich zwar ein Bild auswählen. Aber sobald ich in das Textfeld oder in die Alt-Beschreibung etwas eintippe erscheint beim speichern die Fehlermeldung:

"Query error: Unknown column 'description' in 'field list' (UPDATE tl_bgstretcher_elements SET description='"

Auch ohne Text erscheint der Hintergrund im Frontend nicht. Ich habe das Modul in das Seitenlayout integriert. Lt. Quelltext wird jQuery geladen....Kann mir jemand weiterhelfen? :o

Hallo Thanatos,
hast du eventuell noch kein Datenbank Update gemacht nachdem du das installiert hast (muss man drann denken wenn man das von Hand macht)?

Viele Grüße

Hallo MacKP,

ich habe ja via Repository installiert und dort wird doch das Update gemacht? Anyway, habe gerade das Contao Install-Tool aufgerufen und dort steht, das die Datenbank aktuell ist :(

Hmm spannend. Ich musste mir gerade im Chat sagen lassen, das es schon länger so ist. Ich könnte wetten, das der Entwickler sich dann mal irgendwann damit befasst wenn er Zeit hat ;-)

Viele Grüße

Aaaaaah! Das ist schlecht :(
Ich benötige für ein Portfolio ein Fullscreen-Script. Kennst Du eine Alternative?

Hi.

Zitat:

---

Zitat von Thanatos

Aaaaaah! Das ist schlecht :(
Ich benötige für ein Portfolio ein Fullscreen-Script. Kennst Du eine Alternative?

---

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

Gruß
Thomas

Hallo Thomas,

danke für den Tip. Habe es gerade ausprobiert. Funktioniert einwandfrei. Leider habe ich ein Problem. Bei der MooTools-Variante kann ich leider keinen Text zum Bild hinzufügen - nur ein ALT-Text. Ich wollte eine Fullscreen-Slideshow mit einer Infobox zum jeweiligen Bild :(

Hi.

Das kann man bezüglich dessen ganz sicher auch etwas "aufbohren". Leider bin ich dafür nicht der passende Ansprechpartner.
Vielleicht hilft dir ja der entsprechende Thread im Forum etwas... oder du sprichst mal den/die Entwickler an.

Gruß
Thomas

Hallo,

das Problem mit dem noconflict Mode ist in der neuen Version behoben!
Du musst dazu nur den Modus auswählen mit dem der Slider aufgerufen werden soll.

Die anderen Probleme mit den Feldern sind in der neuen Version auch behoben.

Hallo Schlauchbeutelmaschine,

vielen Dank für das Update - funktioniert jetzt bei auf 2.10.3.
Aber wurden jetzt die tollen "Features" entfernt? Ich kann plötzlich zu den Bildern keinen Text/Beschreibung mehr eingeben! Gerade das war das tolle an der Erweiterung, dass man zu einem BIld auch einen Text/Beschreibung zuordnen konnte....oder übersehe ich da etwas?

Sieht ja ganz nett aus, würde mir gerne n paar weitere Beispiele ansehen... hat das jemand von euch schon produktiv eingesetzt? Postet mal bitte Links :)
So kann man besondere Fotos natürlich richtig toll in Szene setzen.

Was sind denn da die empfohlenen Bildmaße damit es auch auf einem 22'' Monitor anständig aussieht?
Sagt jetzt nicht 1650x 900 oder so, das ja dann riesig das Bild ^^

Hallo,

@Thanatos
Da ich das Modul auf Basis der Slideshow2 aufgebaut habe waren diese Felder noch mit drin.
Aber das bgstretcher Skript hat diese Felder nicht unterstützt daher habe ich es rausgenommen.
Die Frage ist was du machen möchtest?

@Stranger
Schau Dir einfach mal die Demo an. Und die Bildgröße ist natürlich davon abhängig welche Auflösung die meisten deiner User haben da musst wahrscheinlich mal die Statistik checken. Ich würde dann von der Auflösung recht klein bleiben und dann mal testen ob es bei einer großen Auflösung noch gut aussieht.

Hallo Schlauchbeutelmaschine,

ich möchte gerne eine Fullscreen-Slideshow haben, in welcher ich zu jedem Bild auch eine kleine Beschreibung mit Link integrieren kann.
Hab hier was gefunden: http://www.sap.com/germany/index.epx
Wenn ich ein Foto-Portfolio erstelle brauche ich halt eine Beschreibung zum Bild. Das wäre echt super.

Ja, so ein Slider mit Beschreibung ist was feines.

Allerdings ist das in deinem Beispielskript nicht so gut umgesetzt gerade wenn du den Browser verschiebst,
aber von der Optik und Funktion schön.

Allerdings ist das bgstrechter Skript nicht dafür ausgelegt das noch ein Inhalt mit dem Bild verknüpft ist,
der sich dann auch ändert. Die Navigation ist aber schon da.

Wenn du fit mit Javascript bist, solltest du da was hinbekommen,
aber das ist wohl nicht unaufwendig.

Danke. Ja das hatte ich mir schon mal kurz angesehen, allerdings ist die Seite dort sehr simpel. Ich dachte irgendein User hier hätte vielleicht noch mehr Inhalt etc.
Die verwenden dort 1024x768 und sieht auf meinem 1650er Bildschirm auch ganz passabel aus.

"Allerdings ist das in deinem Beispielskript nicht so gut umgesetzt gerade wenn du den Browser verschiebst,"
Das heißt also, dass SAP keine guten Webentwickler hat, was? :P

Hallo,

Vielen Dank für diese geniale Erweiterung! Damit eröffnen sich neue Welten für Designs die schon länger in meinem Kopf herumschwirren ich aber nicht umsetzen konnte!

Eine Frage: Kann man auch eine Navigation einbauen so wie sie bei der Beispielseite gezeigt wird? Mir würde es schon reichen wenn ich zB die Zahlen 1 bis 10 auf der Seite einbauen könnte, und mit einem Klick darauf das dazugehörende Foto geöffnet wird!

Zitat:

---

Zitat von matthias123

Hallo,
Eine Frage: Kann man auch eine Navigation einbauen so wie sie bei der Beispielseite gezeigt wird? Mir würde es schon reichen wenn ich zB die Zahlen 1 bis 10 auf der Seite einbauen könnte, und mit einem Klick darauf das dazugehörende Foto geöffnet wird!

---

das wäre gar nicht schlecht, melde meinerseits auch interesse :)

noch eine frage: hat zufällig schon jemand der diese erweiterung benützt einen sticky footer erfolgreich eingesetzt?

Habe probiert nach dieser Anleitung vorzugehen: http://www.cssstickyfooter.com/de/verwendung.html, aber da bgstretcher ja auch einiges an divs hineinschmeißt scheint es nicht ganz zu funktionieren, oder ich mach einfach irgendwas falsch!?

EDIT: hat sich eigentlich erledigt, habe es anders gelöst und bin damit sehr zufrieden! Nochmals danke für diese Erweiterung!

mir ist aufgefallen, dass die Installation nicht ordentlich umgesetzt wurde. Da eine Abhängigkeit zu der Erweiterung jQuery besteht, sollte diese auch bei der Installation mitinstalliert werden wie das üblich ist bei abhängigkeiten.
Man findet im Er zwar den Hinweis, aber eigentlich sollte das mit der Installation gleich erledigt werden.

gruss
ways

Zitat:

---

Zitat von matthias123

noch eine frage: hat zufällig schon jemand der diese erweiterung benützt einen sticky footer erfolgreich eingesetzt?

---

ja problemlos. man muss nur die klassen für den bgstretcher mit auf eine höhe von 100% bringen

html,
body,
#wrapper,
.bgstretcher-area,
.bgstretcher-page
{
height:100%;
}

Hallo allerseits

Ich glaub, ich spinne. Bei mir wird leider nichts im Hintergrund angezeigt. Vielleicht kann jemand helfen?

Hier das Vorgehen:

Contao 2.10.4 lokal installiert.
BGStretcher installiert und danach JQuery.
BGStretcher erstellt mit zwei Bildern und bei jQuery noConflict Mode --> $
Seitenlayout: Modul eingebunden, JQery verwenden aktiviert (lokale Version 1.7.1), kein Mootool-Templates aktiviert.

Der Code ist im Frontend nun wie folgt:

Code:

---

...
<link rel="stylesheet" href="plugins/bgstretcher/bgstretcher.css" media="all">
<link rel="stylesheet" href="system/scripts/9d9cc51e77aa.css" media="all">
<script src="plugins/jquery/js/jquery-1.7.1.min.js"></script>
<script src="plugins/bgstretcher/bgstretcher.js"></script>
<!--[if lt IE 9]><script src="plugins/html5shim/html5-1.6.2.js"></script><![endif]-->
</head>
<body id="top" class="mac safari sf5">
...
<script type="text/javascript">
/* <![CDATA[ */

$(document).ready(function(){
        //  Initialize Backgound Stretcher
        $('BODY').bgStretcher({
                images: ['tl_files/xyz/background/startseite/startseite_01.jpg','tl_files/xyz/background/startseite/startseite_02.jpg'],
                imageWidth: 1024,
                imageHeight: 768,

                nextSlideDelay:3000,
                slideShowSpeed:1000,
                transitionEffect: 'superSlide',
                sequenceMode: 'normal'
        });
});

/* ]]> */
</script>

---

Spinn ich jetzt? Das müsste doch alles korrekt sein? Die Bildpfade stimmen natürlich.

mach mal den conflict mode raus!

gruss

Hallo,

ich würde gerne die Frage von matthias123 nochmal aufgreifen:

Ist es möglich eine Navigation einzufügen, wie hier: http://www.ajaxblender.com/script-so...emo/index.html

Das würde mir bei einem aktuellen Projekt sehr viel helfen!

Freu mich auf die Antworten der Experten. ;)

Lg, John

Das sollte recht einfach gehen.

In das Javascript Template musst du in der Konfiguration folgende Optionen hinzufügen:

PHP-Code:

---

buttonPrev: '#prev',
buttonNext: '#next',
pagination: '#nav', 


---

Und dann musst du ein Modul "HTML-Code" erstellen in dem du die Buttons einfügst.

HTML-Code:

---

<div class="row">
<h2>Manual Controls</h2>
<div class="nav-buttons">
<a href="javascript:;" id="prev">Previouse image</a>&nbsp;&nbsp;&nbsp;
<a href="javascript:;" id="next">Next image</a>
</div>
</div>
<div class="row nav-buttons">
<span class="pager">Pager:</span> <div id="nav">&nbsp;</div>
</div>
<div class="row">
<a href="javascript:;" id="toggleAnimation" >Pause Animation</a>
</div>

---

Awesome! Danke dir!!

wenn du das template änderst, darfst du es aber nicht in einem unterordner von /templates platzieren... denn das auslesen von diesen unterverzeichnissen beherrscht bgstretcher leider nicht.

konnte die anleitung mit dem menü leide rnicht erfolgreich umsetzen.. jemand anders?

Also bei mir hat es gleich funktioniert.

Template:

Code:

---

<script type="text/javascript">
 
/* <![CDATA[ */


<?php echo $this->js_mode; ?>(document).ready(function(){

        //  Initialize Backgound Stretcher

        <?php echo $this->js_mode; ?>('BODY').bgStretcher({
                buttonPrev: '#prev',
                buttonNext: '#next',
                pagination: '#nav-bgs', 
               
                images: [<?php echo $this->imgElements; ?>],
                  imageWidth: <?php echo $this->arrSliderSize[0]; ?>,
                      imageHeight: <?php echo $this->arrSliderSize[1]; ?>,
         

                nextSlideDelay:<?php echo $this->rotation_interval; ?>,
                slideShowSpeed:<?php echo $this->effect_duration; ?>,
                transitionEffect: '<?php echo $this->EffectType;?>',
                sequenceMode: '<?php echo $this->sequencemode; ?>'

        });

});

/* ]]> */
</script>

---

Und dann eben noch das HTML-Modul erstellen und in das Seitenlayout einbinden...

Ich habe es pagination: '#nav-bgs', genannt, da es sonst Probleme mit der Navigation gibt... Das muss dann natürlich auch im Modul angepasst werden.

ich hab exakt die gleichen anpassungen genommen... sowohl im js als auch im template...

hast du im bgstretcher selbst bestimmte Einstellungen vorgenommen? bestimmte jquery version oder so?
bei mir will die steuerung einfach nicht funktionieren


template: und der code landet auch im quelltext.. unter images tauchen dann die bilder auf.. der bgstretcher an sich funktioniert...

HTML-Code:

---

<script type="text/javascript">
/* <![CDATA[ */

<?php echo $this->js_mode; ?>(document).ready(function(){
        //  Initialize Backgound Stretcher       
        <?php echo $this->js_mode; ?>('BODY').bgStretcher({
        buttonPrev: '#prev',
        buttonNext: '#next',
        pagination: '#navBg',
                images: [<?php echo $this->imgElements; ?>],
                imageWidth: <?php echo $this->arrSliderSize[0]; ?>,
                imageHeight: <?php echo $this->arrSliderSize[1]; ?>,
                nextSlideDelay:<?php echo $this->rotation_interval; ?>,
                slideShowSpeed:<?php echo $this->effect_duration; ?>,
                transitionEffect: '<?php echo $this->EffectType;?>',
                sequenceMode: '<?php echo $this->sequencemode; ?>'
        });
});

/* ]]> */
</script>

---

das modul:

HTML-Code:

---

<div class="row">
<h2>Manual Controls</h2>
<div class="nav-buttons">
<a href="javascript:;" id="prev">Previouse image</a>[nbsp][nbsp][nbsp]
<a href="javascript:;" id="next">Next image</a>
</div>
</div>
<div class="row nav-buttons">
<span class="pager">Pager:</span> <div id="navBg">[nbsp]</div>
</div>
<div class="row">
<a href="javascript:;" id="toggleAnimation" >Pause Animation</a>
</div>

---

bgStretcher Einstellungen:
Breite: 2560
Höhe: 1703

Einlendungsdauer: 200000
Effektdauer: 1000

Effekt Art: none
Abspielreihenfolge: normal

Js-Template -> Das bearbeitete auswählen

jQuery noConflict Mode: jQuery


Seitenlayout -> Experten-Einstellungen:
Ausgabeformat: HTML
lokale Datei
jQuery verwenden ja
jQuery-Version: 1.7.1
jQuer und mootools laden ja

MooTools-Templates: moo_mediabox und moo-jquery_nc (Erweiterung jquery)

Hoffe das hilft dir weiter.

dankeschön!

ich hab den blöden fehler damit gefunden!
ich hatte bei Abspiel-Reihenfolge "random", wenn das aktiviert ist, geht das mit der Navigation nicht mehr..
was bei mir aber dennoch nicht geht ist die pagination.. also das "Pager", geht das bei dir?

Ja, das geht auch. Aber ich weiß nicht, wieso das bei dir nicht geht...

Zitat:

---

Zitat von johndoe

Ja, das geht auch. Aber ich weiß nicht, wieso das bei dir nicht geht...

---

hast du dafür noch irgendwas in das html-modul eingefügt? auch das PAuse funktioneirt nicht bei mir :(

Nee, ich habe eigentlich nichts mehr verändert. Ich habe nur einiges weg gemacht, da für mich nur die Buttons next und prev interessant waren...

sehr komisch :(

die pagination und auch das playPause funktioniert ja über die zuweisung von IDs...
is doch aber schon der bgstretcher vs 2 oder irre ich da?

das pagination und pause hat bei dir vorm entfernen aber funktioneirt ja?