2013-11-08 2 views
0

У меня есть Drop-down по категориям. У меня 20 изображений в Cat1 и 30 изображений в Cat2 и так далее. это изображения из веб-службы JSON. У меня есть Parsed api, итоговый результат, который я добавил в массив. Поэтому, когда Cat1 выбран из DropDown, изображения будут загружаться правильно, но при выборе cat2 они не будут отображаться.Динамически добавлять изображения в слайдер jQuery

Что я сделал это IAM отправки массива изображений в эту функцию, когда выбрана Категория, была РМКА Построение HTML строки с изображениями из массива с помощью цикла их последующего добавления к элементу mcts1 сНа,

function createIcons(imagesArray) { 
    console.log(imagesArray); 
    var iconsDict = imagesArray; 
    var output = ''; 
    var foo = (iconsDict); 
    for (var i = 0; i < iconsDict.length; i++) { 
     output += '<img class="icons" id=' + i + ' src=' + foo[i] + ' width="100px" height="100px"/>'; 
    } 
    $("#mcts1").html(output); 

} 

Здесь мой HTML,

<div class="div2"> 
     <div id="mcts1"> 

     </div> 
    </div> 

IAM с использованием menucool слайдера here is the link

+0

может у [скрипка] (http://fiddle.jshell.net/) ваш код – rynhe

ответ

0

Вы Динамически изменять JQuery Slider так е ollow это шаги

HTML

<div id="mcts1"></div> 

Script

<script type=”text/javascript”> 
function addSlides(str) 
{ var sliderElm = document.getElementById(“mcts1”); 
sliderElm.innerHTML = str; 
} 
</script> 

После получения выхода из вашего вызова функции как этот

addSlides(output); 
+0

Я пробовал это, но он не работает для меня .. – progeek

+0

попробуйте этот способ каждое изменение 'empty()' the div then append ваш вывод затем вызывает эту функцию 'ThumbnailSlider (mct1_Options)' комментарий вашего вывода –

+0

$ ("mcts1"). empty(); addSlides (выход); ThumbnailSlider (mct1_Options); вывод: Uncaught ReferenceError: ThumbnailSlider не определен – progeek

0

Попробуйте это .. Его работа для меня

var html = ""; 
for(var i = 0; i <= images_array.length - 1; i++) 
{ 
    html += "<img src='"+images_array[i]+"' class='sliderImage' id='image_"+i+"' />"; 
} 
$("#slider").append(html); 
0:
Смежные вопросы