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