2010-11-11 90 views
0

嗨我很新的JavaScript和JQuery。我最近发现了Jcarousel插件,并且我尝试了几个关于sorgalla的例子,但似乎无法弄清楚。JCarousel和JqueryUI滑块问题

我想要的是从数据库中填充图像(链接)的旋转木马,我想要显示的图像的选择基于我从jqueryui滑块获得的2个日期参数。我的想法是使用“from”和“to”日期参数对python脚本执行ajax请求,该脚本以JSON格式返回图像链接。但我的问题是,当我从滑块中选择一个新的图像范围的传送带去香蕉(显示空盒子或半图像)。

如果有人能够在这里向我推荐正确的方向,我将不胜感激,谢谢。 这里是我的脚本:

<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> 

回答

0

找到了解决办法:

我不能只是空我UL出于某种原因,而是一个解决方法是放置在包装的UL和销毁的包装和改造的ul在每个图像集之间。也许不是最性感的解决方案,但它的工作原理..

解决方案:

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}); 
     } 
    ); 
}