Jquery or JavaScript image slider from JS array with thumbnails -

please help, javascript , jquery experts, how make automatic image gallery slider thumbnails, target images' source paths stored in java script array?

i have jquery image gallery automatic slider code thumbnails, works fine. but, can see target images placed in unordered list in html. need target images (i.e. img src) in js array, need modify js script, don't know how. so, don't want images in html list, want div image source in js array. have js array made php array.

 <script type="text/javascript">     var imgs = <?php echo json_encode($images); ?>; </script> 

thanks in advance!!

    //image gallery  var triggers = $('ul.triggers li'); var images = $('ul.images li'); var lastelem = triggers.length-1; var target;  triggers.first().addclass('active'); images.hide().first().show();   function sliderresponse(target) {     images.fadeout(800).eq(target).fadein(800);     triggers.removeclass('active').eq(target).addclass('active'); }  triggers.click(function() {     if ( !$(this).hasclass('active') ) {         target = $(this).index();         sliderresponse(target);         resettiming();     } });  $('.next').click(function() {     target = $('ul.triggers li.active').index();     target === lastelem ? target = 0 : target = target+1;     sliderresponse(target);     resettiming(); }); $('.prev').click(function() {     target = $('ul.triggers li.active').index();     lastelem = triggers.length-1;     target === 0 ? target = lastelem : target = target-1;     sliderresponse(target);     resettiming(); }); 

you can try this, without change script:

var imgs = <?php echo json_encode($images); ?>;  //create list of img each src in array wrapped inside li element var _tmpl = ""; for(var k=0; k < imgs.length; k++){     _tmpl+="<li><img src='"+imgs[k]+"' /></li>"; }  //then append string inside wrapper ul.images var images = $(_tmpl); var wrapper = $('ul.images'); images.appendto(wrapper);  //then script create slider var triggers = $('ul.triggers li'); var lastelem = triggers.length-1; var target;  triggers.first().addclass('active'); images.hide().first().show();   function sliderresponse(target) {     images.fadeout(800).eq(target).fadein(800);     triggers.removeclass('active').eq(target).addclass('active'); }  triggers.click(function() {     if ( !$(this).hasclass('active') ) {         target = $(this).index();         sliderresponse(target);         resettiming();     } });  $('.next').click(function() {     target = $('ul.triggers li.active').index();     target === lastelem ? target = 0 : target = target+1;     sliderresponse(target);     resettiming(); }); $('.prev').click(function() {     target = $('ul.triggers li.active').index();     lastelem = triggers.length-1;     target === 0 ? target = lastelem : target = target-1;     sliderresponse(target);     resettiming(); });