carouFredSel und seine Callback-Funtionen

**Hagord** · 17.02.2014, 08:42

Sicher wieder nur ein Denkfehler! Hier der Code:

Code:

var $gkheadertext = $('#header-text p');

$('#caroufredsel_112').carouFredSel({
    scroll: {
        onBefore: function(){
                  $gkheadertext.text('***');
                  $gkheadertext.fadeOut(250);
                  },
        onAfter:  function(){
                  var figtext = $('#header-slider figcaption').first().text();
                  $gkheadertext.text(figtext);
                  $gkheadertext.fadeIn(250);
                  },
        fx:       "uncover-fade",
        easing:   "swing",
        duration: 1500,
        },
    direction: 'right'        
    }    
);

Es werden im #caroufredsel_112 mehrere Bilder geslidet, und jedes hat im figcaption-Element eine Bildunterschrift.

Die Bildunterschrift des aktuellen Bildes $('#header-slider figcaption').first().text() wird ausgelesen und einem entfernten Absatz $('#header-text p') als Inhalt gegeben.

Dabei wird der alte Text über die onBefore-Funktion ausgeblendet $gkheadertext.fadeOut(250); und der neue über die onAfter-Funktion $gkheadertext.fadeIn(250); wieder eingeblendet.

Alles funktioniert einwandfrei, wenn ich das obige Skript über die Konsole des Firebug ausführe, aber nicht, wenn das Skript am Ende des <body> eingebunden und ausgeführt wird.

Nach einer langen Nacht voller Fehlschläge (auch $(document).ready(function(){ und $(window).load(function(){ brachten keine Lösung) - vielleicht weiß jemand Rat?

Ich wäre sehr dankbar!

**Dirch** · 17.02.2014, 09:52

Wo hattest du das mit dem document.ready gemacht? Steht der Code genau in der Form am Ende der seite? Also kommt dieser aus dem Template oder wurde von dir manuell so gebaut?

**Hagord** · 17.02.2014, 21:01

Hallo Dirch, Danke für deine Antwort.

Alle Zeilen im Skript stammen von mir und beziehen sich auf den carouFredSel-Slider und einen extra Absatz:

Der Slider:
#caroufredsel_112

Die Bildunterschrift zum aktuellen Bild:
$('#header-slider figcaption').first().text()

Der Extra-Absatz:
$('#header-text p')

Das Skript funktioniert einwandfrei, wenn mann es direkt über die Firebug-Konsole eingibt und ausführt: Im Extra-Absatz erscheint immer der Text der Bildunterschrift des aktuell angezeigten Bildes.

Sorge ich stattdessen dafür, dass diese Zeilen am Ende des <body> und nach dem carouFredSel-Skript als <script> ... die Code-Zeilen ... </script> stehen, funktioniert es nicht. Genauer: Im Extra-Absatz erscheint als Text die Bildunterschrift eines ganz anderen als des aktuellen Bildes, und dann tut sich nichts weiter.

Das Debuggen hat gezeigt, dass mein Skript einmal durchlaufen wird, dass die von mir für onBefore bzw. onAfter hinterlegten Funktionen irgendwie vom carouFredSel nicht registriert wurden und max. ein Mal ausgeführt wurden.

Da also hier das Zusammenspiel zwischen meinem Skript und carouFredSel nicht funktioniert, mein Skript aber per Firebug-Konsole seine Funktionstüchtigkeit gezeigt hat, muss es an eben diesem Zusammenspiel liegen. Und da habe ich den zeitlichen Ablauf der Skripte unter Verdacht, als wäre carouFredsel noch nicht vollständig bereit, wenn gleich im Anschluß mein Skript geladen und ausgeführt wird.

Aus diesem Grund habe ich dann meine Zeilen mit den dafür bekannten Funktionen umgeben (alternativ):

$(document).ready(function() { ... das Skript ... }); ---> führt die Funktion mit dem Skript aus, sobald das DOM geladen ist;

$(window).load(function() { ... das Skript ... }); ---> wartet noch etwas länger, nämlich bis auch alle Elemente (Bilder, Skripte) geladen sind.

Leider blieb auch dies ohne Erfolg. So bleibt der Verdacht, dass carouFredsel noch einen weiteren Augenblick länger braucht, bis es zur Registrierung von Funktionen über onBefore bzw. onAfter bereit ist. Wahrscheinlich klappt es deshalb auch über die Firebug-Konsole, da hier die Skriptzeilen manuell per Tastendruck ausgeführt werden und dies natürlich etliche Zeit (Sekunden) später erfolgt.

Vielleicht hat jemand eine Idee oder Kenntnis, wie man für carouFredSel die Synchronisation hinbekommt. Oder ich liege total schief und es liegt an etwas ganz anderem, auf das ich einfach nicht komme.

Best Dank jedenfalls schon vorab dem Wissenden!

**Hagord** · 18.02.2014, 02:15

Heureka! Das Problem ist gelöst. Es lag dort, wo ich es schon vermutete: Bei Ausführung meines Skriptes war carouFredSel einfach noch nicht bereit. Also habe ich zusätzlich zur $(window).load(function(){ die relevanten Zeilen noch in eine setTimeout(function(){ gepackt. Das Testen hat dann ergeben, dass bei einem Timeout von mindestens 200ms beide synchronisiert sind. Hier also die funktionierende Version:

Code:

var $gkheadertext = $('#header-text p');
var figtext = '';

$(window).load(function(){
	$gkheadertext = $('#header-text p');
	setTimeout(function(){
		$('#caroufredsel_112').carouFredSel({
    		scroll: {
        		onBefore: function(){
                		  $gkheadertext.fadeOut(250);
	                	  },
		        onAfter:  function(){
    		                  figtext = $('#header-slider figcaption').first().text();
        		          $gkheadertext.text(figtext);
            		          $gkheadertext.fadeIn(250);
                		  },
    		        }    
		);
	},200);
});

Vielleicht hilft's ja dem Einen oder Anderen. Und vielleicht gibt's von carouFredSel dazu eine systematische Lösung.

**Dirch** · 18.02.2014, 10:48

ah oh fein.

Wenn du die Erweiterung benutzt und dort im Template deine Funktionen hinzugefügt hättest, wäre es wohl sofort gegangen. Habe noch nie Timeout-Probleme gehabt. Aber wenn es so geht ist es auch gut.

**Hagord** · 18.02.2014, 18:43

Hallo Dirch, ich habe deinen Hinweis mit dem Template umgesetzt und alles in die (templates-Kopie) der js_caroufredsel.html5 transferiert. Funktioniert prima! Vielen Dank für den Hinweis - hätte ich gern in der (Contao-)carouFredSel-Dokumentation gelesen - oder überlesen?

**Dirch** · 18.02.2014, 19:47

Na ja so Sachen mit den Templates liegen irgendwie auf der Hand, weil es im Core auch so läuft. Daher keine explizite Erwähnung in der Doku - darfst du aber gern hinzufügen.

Habe es nur grob in der ER-Beschreibung stehen.