✔ jCarousel: Daten via Ajax & autoslide

[jhartlep]

Moin,
ich habe ein Problem bei der Anpassung von jCarousel.
Ich möchte "Carousel with autoscrolling" mit "Carousel with dynamic content loading via Ajax" verbinden...

Hier ist mein Versuch dazu:

var slider = new Array();

function start_slider() {
  $(function() {
    $('#mycarousel').jcarousel({
      // Configuration Slider
      auto: 2,
      scroll: 1,
      wrap: 'circular',
      initCallback: mycarousel_initCallback,
      itemVisibleInCallback:  { onBeforeAnimation: mycarousel_itemVisibleInCallback },
    });
  });
}

function mycarousel_initCallback(carousel, state) {
  if(state != "init") {
    return;
  }
  var url = "ajax/ajax_slider.php";
  var data = {};
  var dataType = "json";
  $.post(url, data, function(json) { slider = json.topprodukt; }, dataType);
  
  carousel.buttonNext.bind('click', function() { carousel.startAuto(0); });
  carousel.buttonPrev.bind('click', function() { carousel.startAuto(0); });
  carousel.clip.hover(function() { carousel.stopAuto(); }, function() { carousel.startAuto(); });
}

function mycarousel_itemVisibleInCallback(carousel, item, i, state, evt) {
  var idx = carousel.index(i, slider.length);
  carousel.add(i, mycarousel_getItemHTML(slider[idx - 1]));
};

function mycarousel_getItemHTML(item) {
  return '<img src="' + item.imgSrc + '" width="75" height="75" alt="' + item.title + '" />';
};

Das Problem ist jetzt aber, daß ich im Firebug einen JS-Fehler bekomme:

item is undefined (return '<img src="' + item.imgSrc + '" width="75" height="75" alt="' + item.title + '" />';)

Baue ich in der itemVisibleInCallback eine Schleife ala

while(slider.length==0) {}

ein, so lädt die Seite eine halbe Ewigkeit, bis sich überhaupt etwas tut...

Soweit ich es in der Doku von jcarousel verstanden habe wird initCallback sofort ausgeführt, nachdem jcarousel initialisiert wurde. Scheinbar springt das Skript jedoch direkt zu itemVisibleInCallback weiter, ohne auf das Ergebnis der Post-Abfrage zu warten. Daher ist es klar, warum es zu dem Fehler kommt... Die Variable ist ja schließlich leer... Aber wie kann ich das ganze jetzt so zum Laufen bekommen, wie ich mir das vorstelle?

Bin über jeden Tipp dankbar.

 

[Sven Mintel]

Moin,

Scheinbar springt das Skript jedoch direkt zu itemVisibleInCallback weiter, ohne auf das Ergebnis der Post-Abfrage zu warten. Daher ist es klar, warum es zu dem Fehler kommt... Die Variable ist ja schließlich leer... Aber wie kann ich das ganze jetzt so zum Laufen bekommen, wie ich mir das vorstelle?

Hast du schon mal probiert, erst den Request abzuschliessen, und dann den Slider mit allem drumherum zu initialisieren?

Wozu eigentlich das ganze mit dem AJAX....was hindert dich, diesen Array gleich direkt mit dem Dokument zu Laden, ich sehe da keinen Nutzen darin, dort einmalig beim Initialisieren irgendetwas per AJAX abzufragen, wenn man eine serverseitige Sprache verfügbar hat.

 

[jhartlep]

Hast du schon mal probiert, erst den Request abzuschliessen, und dann den Slider mit allem drumherum zu initialisieren?

Gute Idee... daran hatte ich noch nicht gedacht... Ist wohl zu naheliegend...

Wozu eigentlich das ganze mit dem AJAX....was hindert dich, diesen Array gleich direkt mit dem Dokument zu Laden, ich sehe da keinen Nutzen darin, dort einmalig beim Initialisieren irgendetwas per AJAX abzufragen, wenn man eine serverseitige Sprache verfügbar hat.

Ganz einfach... Wenn ich das ganze Serverseitig als Array direkt übergebe, habe ich eine längere Ladezeit für die Seite. Mir ist wichtiger, daß die Seite schon fertig ist, und dann als Bonus der Slider dazukommt.
Ausserdem hat der Slider per Klick wechselnde Inhalte, die ich auf jeden Fall via AJAX nachlade, um die Ladezeiten der gesamten Seite schlank zu halten...

Aber ich denke, ich werde Deinen obigen Vorschlag ausprobieren Danke.