JCarousel et JqueryUI curseur numéro

Question

Salut, je suis très nouveau pour javascript et Jquery. J'ai récemment trouvé le plugin Jcarousel et j'ai essayé plusieurs exemples sur sorgalla, mais je n'arrive pas à le comprendre. Ce que je veux est de peupler le carrousel avec des images (liens) à partir d'une base de données, la sélection des images que je veux afficher sont basées sur 2 paramètres de date que je reçois d'un curseur jqueryui. Mon idée était de faire une requête ajax avec les paramètres de date "from" et "to" à un script python qui retourne les liens image au format JSON. Mais mon problème est que lorsque je sélectionne une nouvelle gamme d'images à partir du curseur, le carrousel va bananes (affichant des boîtes vides ou des demi-images).

J'apprécierais que quelqu'un puisse me pousser dans la bonne direction ici, merci. Voici mon script:

<script type="text/javascript"> 

function js(){ 
    $('#mycarousel').empty(); 
    var start_d=$("#valueAA").val(); 
    var end_d=$("#valueBB").val(); 
    $.getJSON("http://www.xxx.com/zzzzzzzzz/cgi-bin/hnf.py"  , 
     {start_d: start_d, end_d: end_d}        , 
     function(data){ 
      var encoded = $.toJSON(data); 
      for(var i=0; i < data.articles.length; i++) { 
       $('#mycarousel').append('<li><img src="' + $.evalJSON(encoded).articles[i].img + '" width="120" height="100" alt="" /></li>'); 
      } 
      jQuery('#mycarousel').jcarousel({scroll: 1}); 
     } 
    ); 
} 

$(document).ready(function() { 
    $(function(){ 
     $('select#valueAA, select#valueBB').selectToUISlider({ 
      sliderOptions: { 
       stop: function(e,ui) { 
        js(); 
       } 
      } 
     }); 
     labels: 12 
     //fix color 
     fixToolTipColor(); 
    }); 

    //quick function for tooltip color match 
    function fixToolTipColor(){ 
     //grab the bg color from the tooltip content - set top border of pointer to same 
     $('.ui-tooltip-pointer-down-inner').each(function(){ 
      var bWidth = $('.ui-tooltip-pointer-down-inner').css('borderTopWidth'); 
      var bColor = $(this).parents('.ui-slider-tooltip').css('backgroundColor') 
      $(this).css('border-top', bWidth+' solid '+bColor); 
     }); 
    } 
}); 
</script> 

Answer 1

trouvé une solution:

Je ne peux pas vider mon ul pour une raison quelconque, mais une solution est de placer votre ul dans un emballage et détruire cette enveloppe et refaire la ul entre chaque jeu d'images. Probablement pas la solution la plus sexy, mais cela fonctionne ..

solution

:

function js(){ 
    $('#wrap').remove(); 
    $('#container').append('<div id ="wrap"></div>'); 
    $('#wrap').append('<ul id="mycarousel" class="jcarousel-skin-tango"></ul>'); 
    var start_d=$("#valueAA").val(); 
    var end_d=$("#valueBB").val(); 
    $.getJSON("http://www.xxx.com/zzz/cgi-bin/hnf.py"  , 
     {start_d: start_d, end_d: end_d}        , 
     function(data){ 
      var encoded = $.toJSON(data); 
      for(var i=0; i < data.articles.length; i++) { 
       $('#mycarousel').append('<li><img src="' + $.evalJSON(encoded).articles[i].img + '" width="110" height="100" alt="" /></li>'); 
      } 
      jQuery('#mycarousel').jcarousel({scroll: 1}); 
     } 
    ); 
}