How can I make this XML gallery snippet prettier?

Question

Everything works, i just want to know if i can change the way the xml tags are retreived. This way seems a bit bulky - but i could be wrong. Thoughts?

 var d = 0
 $(".timeline").children().eq(d).addClass("active")
 // default traverse function to buttons, inject node
 prev.data("node", array.length-1)
 next.data("node", 1)
 // use default node to get default properties
 src = xml.getElementsByTagName("src")[d].childNodes[0].nodeValue
 name = xml.getElementsByTagName("name")[d].childNodes[0].nodeValue
 date = xml.getElementsByTagName("date")[d].childNodes[0].nodeValue
 desc = xml.getElementsByTagName("desc")[d].childNodes[0].nodeValue
 img = '<img alt="'+name+'" src="'+src+'">'
 // inject default image properties
 $(".stage").html(img)
 $(".window").width($(".stage").width())
 $(".name").html(name), $(".date").html(date), $(".desc").html(desc)

Answer 1

• There's a lot of duplication to get src, name, and so on. Simply use $.map:

  var properties = $.map(["src", "name", "date", "desc"], function(id) {
   return xml.getElementsByTagName(id)[d].childNodes[0].nodeValue;
  }
  

  You can then use properties[0]. Not sure how I could return an object with the correct keys as simply as this. Maybe something like

  var properties = {}
  $.each(["src", "name", "date", "desc"], function(i, name) {
   properties[name] = xml.getElementsByTagName(name)[d].childNodes[0].nodeValue;
  }
  

• Don't forget any var

• Create img using this less error-prone technique:

  var img = $('<img>').attr({'alt': properties["name"], 'src': properties["src"]});
  

• James Khoury: or .attr({'alt': name, 'src': src}) ... right?
• Quentin Pradet: Yes, that's better.
• Quentin Pradet: @JamesKhoury Also, I proposed a better alternative to $.map which lets you keep "named" properties.