jquery - Add atrributes from image to javascript array and display -

i need add attributes images inside div js array , run supersized, these images:

       <div id="dgaslides">             <img src="img/temp/topimg01.jpg" title="image 1">             <img src="img/temp/topimg02.jpg" title="image 2">             <img src="img/temp/topimg03.jpg" title="image 3">         </div> 

my js:

jquery(function($){  var img_length = $('#dgaslides img').length-1;  var dgaslides = [];  $('#dgaslides img').each( function(i){      var src     = $(this).attr('src');     var title   = $(this).attr('title');      dgaslides.push("{image : '" + src + "', title : '" + title + "'}");      if(img_length == i){          $.supersized({              // functionality             slide_interval          :   3000,       // length between transitions             transition              :   1,          // 0-none, 1-fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left, 6-carousel right, 7-carousel left             transition_speed        :   700,        // speed of transition             horizontal_center       :   1,          // centers image horizontally. when turned off, images resize/display left of page.               // components                                        slide_links             :   'blank',    // individual links each slide (options: false, 'num', 'name', 'blank')             slides                  :   dgaslides          });      } }); }); 

it work, im getting 3 images in output, link (src) "undefined", , title isn't there either?

the right way hardcode is:

var dgaslides = [           // slideshow images                 {image : 'img/temp/topimg01.jpg', title : 'reception'},                 {image : 'img/temp/topimg02.jpg', title : 'reception 2 og noget mere tekst her'},                   {image : 'img/temp/topimg03.jpg', title : 'reception 3'}             ]; 

can me figuring out i'm doing wrong?

you use jquery's map method simplify task. following code.

jquery(function ($) {     var dgaslides = $('#dgaslides img').map(function () {       return {         image: $(this).attr('src'),         title: $(this).attr('title')       };     });     $.supersized({       slide_interval: 3000,       transition: 1,       transition_speed: 700,       horizontal_center: 1,                          slide_links: 'blank',       slides: dgaslides     }); }); 

hope helps.