CarouFredSel in Akkordeon

[Flox]

Hallo zusammen,

ich habe folgendes Problem:
Gerne würde ich in ein Akkordeon einen CarouFredSel Slider einbauen. Der Slider ist in einem Akkordeon-Element, dass zuerst geschlossen ist und somit ein display:none; hat. Dadurch kann der Slider sich nicht richtig laden.
Wie bekommen ich es hin, dass die Resize-Funktion des Sliders beim aktivieren des Akkeordeons gestartet wird? Somit sollte der Slider ja dann ordentlich erscheinen?

Viele Grüße
Flox

[Dirch]

dann hängt doch einen jQuery handler auf das Akkordeon und wenn dieser gefeuert wird initialisierst du dort den Slider.

[Flox]

Hallo Dirch,

danke schonmal für deine Antwort.

Ich bin leider in Javascrip/Jquery nicht so gut. Mit was kann ich die Initialisierung starten lassen?
Was ich bisher versucht habe:

Ich habe mal testweise den Ausgegebenen Code auf meiner Webseite vom Slider:

(function($) {
    var $carouFredSel = $('#caroufredsel_50');
    $(document).ready(function() {
        $carouFredSel.krioImageLoader();
    });
    $.readyLoad(function() {
        $carouFredSel.carouFredSel({
responsive: true, width: "100%", onCreate: function(data) { data.items.addClass("visible"); }, items: { height: "variable" }, scroll: { fx: "fade", easing: "linear", onBefore: function(data) { data.items.old.removeClass("visible"); }, onAfter: function(data) { data.items.visible.addClass("visible"); } }, prev: { button: "#caroufredsel_prev_50" }, next: { button: "#caroufredsel_next_50" }, pagination: { container: "#caroufredsel_pagi_50" }, swipe: { onTouch: true } }, { onWindowResize: "throttle", wrapper: { classname: "caroufredsel_wrapper caroufredsel_wrapper_50" } }        );
    });
    /* Pagination zentrieren */
    $(window).load(function() {
        var counter = 0;
        var elementwidth = $(".caroufredsel_pagi > a").width();
        $(".caroufredsel_pagi > a").each(function() {
            counter++
        });
        breite = counter*elementwidth+(7*counter);
        $(".caroufredsel_pagi").width(breite);
    });
    
})(jQuery); 

in

(function($) {
    $(document).ready(function() {
      $(document).accordion({
        // Put custom options here
        heightStyle: 'content',
        header: 'div.toggler',
        collapsible: true,
        create: function(event, ui) {
          ui.header.addClass('active');
        },
        activate: function(event, ui) {
          ui.newHeader.addClass('active');
          ui.oldHeader.removeClass('active');
        }
      });
    });
  })(jQuery); 

eingefügt. Das hat dann wunderbar funktioniert. Da das ja nur bei dem Slider mit der ID50 funktioniert ist das keine tolle Lösung.

Dann hatte ich dem Code vom Slider einen Funktionsnamen gegeben und wollte diese dann mit funktionsname(); aufrufen lassen. Habe den Slider-Script folgendermaßen umgebaut:
(function funktionsname($) {
var $carouFredSel = $('#caroufredsel_50');
$(document).ready(function() {
$carouFredSel.krioImageLoader();
....

Hier bekam ich leider immer die Meldung dass die Funktion "funktionsname" nicht definiert ist.

Wie muss ich das denn umschreiben, dass ich die Funktion, die ja eh schon geladen ist, aufrufen kann?
Würde mich über Hilfe sehr freuen.

Viele Grüße
Flox

[seven80]

Hallo Flox,

hast du hierzu mittlerweile eine Lösung gefunden?

Habe gerade ein ganz ähnliches Problem. Habe vier Karussels, wobei drei zu anfangen ausgeblendet sind und erst per Klick eingeblendet werden. Das Erste, anfangs schon sichtbare Karussel funktioniert wie gewünscht. Die anderen drei haben eine Höhe von 0px und ich sehe nichts.

Viele Grüße,
Sven